/* ============================================================================ IDENTIDADE TPDPLAY - BLOCOS NOMEADOS Depende de tokens.css + efeitos.css. Cada bloco tem um CODIGO (BL-01...) que o HB usa pra me dirigir: "monta um BL-01 com esses quatro casos". Nao e CSS de catalogo: e CSS de PRODUCAO. Uma pagina em `paginas/` liga este arquivo e monta o bloco com o conteudo dela. ========================================================================= */ /* ============================================================================ O TETO DE LARGURA — vale para TODOS os blocos. Medido no Statcounter (Brasil, desktop, julho/2026): 1920x1080 .... 32,3% <- dominante 1280x1200 .... 10,9% 1366x768 ..... 10,8% 1536x864 ..... 9,1% 1366x1366 .... 5,5% A faixa real e 1280 a 1920. O 4K do HB (3840) e o caso extremo, e foi nele que o BL-01 estourou de ponta a ponta e ficou oco. Entao: nenhum bloco se espalha alem de `--bl-teto`. Em 1920 ainda sobra margem confortavel; em 1366 o bloco encosta nas margens do trilho e para; em 4K ele fica centrado, com o fundo respirando dos lados. E colunas EXPLICITAS por faixa — nada de auto-fit decidindo sozinho e produzindo 3+1 (a mesma regra da fileira: linha inteira ou coluna inteira). ========================================================================= */ :root { --bl-teto: 1180px; --bl-teto-texto: 900px; } /* NA TELA MUITO GRANDE O TETO SOBE. 1180px numa janela de 3840 e uma tira estreita cercada de vazio - e a tira estreita e que faz o corpo parecer grande, porque nao ha mais nada perto pra comparar. Acima de 2000px de janela o bloco ganha 140px. Nao viramos 'largura total': a linha de leitura continua presa em --largura-texto (60ch). */ @media (min-width: 2000px) { :root { --bl-teto: 1320px; } } .bl-palco-trilho, .bl-grade, .bl-numeros, .bl-impacto, .bl-obra, .lista-cascata, .bl-quote-caixa { max-width: var(--bl-teto); margin-inline: auto; } /* --- comum a todos ---------------------------------------------------- */ .bloco { padding-block: var(--ritmo); } .bl-grade + .bl-rodape { max-width: 62ch; } /* 🔴 O VAO ENTRE O ROTULO E O TITULO E UM NUMERO SO NA CASA (HB, 22/08). Estava furado em dois lugares ao mesmo tempo: 24px no BL-10, 16px no BL-11 e ZERO no painel dos filamentos, onde o pill encostava no h2. Espacamento nao e do componente (o .pill nao carrega margem, pra poder ser usado em qualquer lugar) - mas a RELACAO entre rotulo e titulo e do sistema, nao de cada pagina. Por isso ela mora numa regra de adjacencia: quem vier logo depois de um pill ganha o respiro, sempre o mesmo. */ .pill + h1, .pill + h2, .pill + h3, .pill + .bl-h2 { margin-top: var(--e3); } .rotulo + h1, .rotulo + h2, .rotulo + .bl-h2 { margin-top: var(--e3); } .bl-h2 { font-family: var(--f-impacto); font-size: var(--t-h2); font-weight: 600; letter-spacing: var(--tr-titulo); line-height: var(--lh-titulo); color: var(--tinta); margin: 0 0 var(--e5); max-width: 20ch; text-wrap: balance; } /* --- BL-01 · GRADE DE PROVA ------------------------------------------- Cards de resultado. O NUMERO carrega o card; sem numero, use outro bloco. */ /* ARMADILHA PROVADA (21/08), DUAS VEZES no mesmo bloco: 1) `repeat(auto-fit, minmax(260px,1fr))` ESTICA — numa tela de 3300px os quatro cards abriram de ponta a ponta e ficaram ocos. 2) trocar por `minmax(240px,300px)` parou de esticar mas caiu no MEIO-TERMO: 3 cards em cima e 1 embaixo. E a mesma doenca da fileira — `auto-fit` decide sozinho, e decide errado. A regra do HB vale aqui igual: ou a linha inteira, ou a coluna inteira. Colunas EXPLICITAS por faixa, e o bloco todo vive num trilho proprio pra o titulo nao ficar solto na esquerda enquanto a grade centraliza. */ .bl-palco-trilho { max-width: var(--bl-teto); margin-inline: auto; } /* cabecalho de bloco CENTRALIZADO. Precisa das duas linhas: text-align centraliza o TEXTO dentro da caixa de cada filho, e margin auto centraliza a CAIXA. Com so a primeira, quem tem max-width (rotulo, h2, subtitulo) fica colado na esquerda com o texto centrado dentro - o defeito parece um erro de espacamento e nao e. */ .bl-palco-trilho.centro { text-align: center; } .bl-palco-trilho.centro > * { margin-inline: auto; } .bl-palco-trilho.centro .rotulo { text-align: center; } /* 🔴 `1fr` NAO E COLUNA IGUAL. Ele e `minmax(auto, 1fr)`, e o `auto` deixa a coluna crescer ate o min-content do conteudo: a palavra mais longa de um card empurrava a coluna dele pra 226px enquanto as outras tres ficavam com 196px. Ninguem ve isso num print de tela larga - so aparece quando aperta. Foi o que fez as tags saírem com duas larguras mesmo depois de igualadas: o teto de 100% delas media cards de tamanhos diferentes. `minmax(0, 1fr)` e o que realmente reparte igual. */ .bl-grade { display: grid; gap: var(--e3); grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--bl-teto); margin-inline: auto; } .bl-grade.de-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bl-grade.de-dois { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } @media (max-width: 1180px) { .bl-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .bl-grade, .bl-grade.de-tres, .bl-grade.de-dois { grid-template-columns: minmax(0, 1fr); } } /* 🔴 A REGUA CERTA E O ESPACO DO BLOCO, NAO A JANELA. No catalogo a pista perde 320px pra navegacao: numa janela de 1300 o bloco tem 758, e a media query de viewport ainda achava que cabiam quatro colunas de 130px - com a tag quebrando em tres linhas. Numa PAGINA de verdade, sem navegacao, os mesmos 1300 comportam as quatro. Media query nao sabe a diferenca; o container query mede o bloco. Fica depois das medias, entao vence quando o navegador entende - e quando nao entende, as medias seguram. */ .bl-palco { container-type: inline-size; position: relative; } @container (max-width: 1000px) { .bl-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 620px) { .bl-grade { grid-template-columns: minmax(0, 1fr); } } .bl-card { background: var(--fundo-carta); border-radius: 16px; padding: var(--e4); display: flex; flex-direction: column; gap: var(--e2); } /* 🔴 A LINHA DE SELECAO DESTE CARD E ROXA (HB, 22/08) - "da mesma forma que na tabela de planos". O `.reage` da casa acende no CIANO; aqui o card segue o `.plano`, com o mesmo par exato: linha #A277F9 e a sombra no roxo dela. SO A LINHA muda de cor - o fundo do card continua o mesmo parado e com o mouse em cima. Ganha por ESPECIFICIDADE, nao por ordem de arquivo: `.bl-card.reage:hover` e (0,3,0) contra (0,2,0) do `.reage:hover`, entao vale mesmo se um dia o `efeitos.css` passar a ser concatenado depois (ver a cicatriz do empate no LEIA-ME). */ .bl-card.reage:hover, .bl-card.reage:focus-within { border-color: rgba(162,119,249,.90); box-shadow: 0 14px 38px rgba(107,67,239,.26); } /* 🔴 AS QUATRO FAIXAS SAO DO GRUPO, NAO DE CADA CARD (22/08). "QUEM ABRE A PORTA" e longa e, depois que ganhou icone, quebra em duas linhas em parte das larguras - e ai o numero daquele card descia 23px e a fileira inteira perdia o eixo. Encurtar a copia e mexer no texto do HB; `nowrap` estoura o card entre 1180 e 1500px, onde nao ha largura pra frase numa linha so. Subgrid resolve na regua certa: rotulo, numero, autor e texto viram faixas da GRADE, e o card se encaixa nelas. Quem quebra em duas linhas engorda a faixa pra todo mundo, e os quatro numeros continuam no mesmo eixo. */ @supports (grid-template-rows: subgrid) { .bl-grade { grid-template-rows: auto auto auto 1fr; } .bl-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; } } /* 🔴 UMA LARGURA SO PRAS QUATRO TAGS, E CENTRADAS (HB, 22/08). `align-self: flex-start` era heranca do tempo em que o card era flex; virando grade (subgrid), o item passou a esticar e cada tag ficou de um tamanho, ancorada na esquerda. Agora a pilula e centrada no card (justify-self) e o conteudo e centrado dentro dela (justify-content) - as duas coisas, porque centrar a caixa sem centrar o texto so muda o defeito de lugar. A LARGURA COMUM e calculada em blocos.js: CSS nao le a largura de um irmao que mora em OUTRO card, e cravar px aqui quebraria no dia em que o texto de um rotulo mudasse - que e o dia em que ninguem vai lembrar deste numero. Sem JS elas ficam na largura natural, centradas: pior, nunca quebrado. */ .bl-tag { justify-self: center; border: 1px solid rgba(44,196,255,.34); background: rgba(0,110,175,.16); border-radius: var(--raio-pill); padding: 6px 14px; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #FFFFFF; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* 🔴 O ICONE TEM UM TAMANHO SO NA CASA. O do BL-09 e o do BL-01 sao o mesmo objeto e nasceram da mesma biblioteca; se cada bloco escolhesse a propria medida, dois selos lado a lado numa pagina real teriam pesos diferentes sem ninguem conseguir dizer por que. */ .plano .selo .ico, .bl-tag .ico { width: 16px; height: 16px; flex: none; display: block; } .plano .selo .ico svg, .bl-tag .ico svg { width: 100%; height: 100%; display: block; } /* 🔴 O NUMERO CARREGA O CARD - entao ele tem o tamanho de numero grande da casa (56px, o mesmo do BL-04), nao um tamanho intermediario so dele. A 40px ele empatava com o texto ao redor e o card virava paragrafo com um numero dentro (HB, 22/08: "quero mais destaque pra eles"). */ .bl-num { font-family: var(--f-impacto); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -.03em; margin-top: var(--e2); } @media (max-width: 680px) { .bl-num { font-size: 46px; } } .bl-autor { font-size: 18px; font-weight: 700; color: var(--tinta); margin: 0; } .bl-autor span { font-weight: 400; color: var(--texto-2); } .bl-txt { font-size: 17px; line-height: 1.55; color: var(--texto); margin: 0; } .bl-rodape { font-size: var(--t-rotulo); color: var(--texto-2); text-align: center; margin: var(--e5) auto 0; max-width: 70ch; } /* --- BL-02 · ESCADA NUMERADA ------------------------------------------ O reveal em cascata mora em efeitos.css; aqui e so a forma da lista. */ .lista-cascata { display: grid; gap: var(--e3); } .lista-cascata > div { display: flex; gap: var(--e3); align-items: baseline; font-size: var(--t-corpo); color: var(--texto); } .lista-cascata b { font-family: var(--f-impacto); font-size: 30px; color: var(--ciano); min-width: 58px; font-variant-numeric: tabular-nums; } .lista-cascata { max-width: var(--bl-teto-texto); } .lista-cascata.larga > div { max-width: var(--largura-texto); } /* 🔴 DEFEITO QUE NASCE JUNTO COM O CABECALHO CENTRADO (22/08). A lista fica alinhada a esquerda de proposito - texto em degrau se le assim. Mas a CAIXA dela tinha 900px e as linhas nao chegavam perto disso: a tinta parava ~130px a esquerda do centro do titulo, e a composicao inteira parecia torta. Nao era defeito antes porque o titulo tambem estava a esquerda; passou a ser no dia em que ele centralizou. `fit-content` encolhe a CAIXA ate o tamanho da linha mais longa, e o margin auto que ja vinha de cima centra o GRUPO. As linhas continuam comecando todas no mesmo x. */ .lista-cascata.centrada { width: fit-content; } /* --- FILEIRA (marcadores) ---------------------------------------------- REGRA DO HB (21/08): ou FILEIRA, ou COLUNA. Meio-termo nao pode. ARMADILHA PROVADA: `display:flex` + `flex-wrap:wrap` produz exatamente o meio-termo - com 3 itens numa largura apertada ele poe 2 em cima e 1 embaixo, e o desenho desmonta. `wrap` decide sozinho, e decide errado. A cura e tirar a decisao do wrap: `grid-auto-flow: column` forca UMA fileira (nao quebra nunca); no ponto de virada, `row` faz UMA coluna. Sao dois estados, sem intermediario possivel. */ .fileira { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--e5); align-items: center; } .fileira > * { min-width: 0; } .fileira-item { display: flex; align-items: center; gap: var(--e2); } .fileira-item i { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(44,196,255,.42); background: rgba(0,110,175,.16); font-family: var(--f-impacto); font-size: 17px; font-weight: 700; color: var(--ciano); font-style: normal; } .fileira-item span { font-size: 17px; color: var(--texto); font-weight: 500; white-space: nowrap; } /* o ponto de virada: abaixo daqui vira COLUNA, inteira, sem meio-termo */ @media (max-width: 1180px) { .fileira { grid-auto-flow: row; grid-auto-columns: auto; justify-items: start; gap: var(--e3); } .fileira-item span { white-space: normal; } } /* --- BL-07 · NUMERO DE IMPACTO ---------------------------------------- Um numero grande, sozinho, com um rotulo em caixa-alta espacada embaixo. Vive de escassez: se a pagina tem dois, nenhum e impacto. O numero e do TPDPlay e e VERDADE — +190 aulas, +10 cursos. Numero que nao se sustenta na plataforma nao entra aqui. */ .bl-impacto { text-align: center; padding-block: var(--e7); } .bl-impacto .cifra { font-family: var(--f-impacto); font-weight: 600; font-size: clamp(84px, 15vw, 190px); line-height: .92; letter-spacing: -.045em; background: linear-gradient(180deg, #FFFFFF 0%, #C9B1FF 62%, #6B43EF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--tinta); } .bl-impacto .cifra sup { font-size: .34em; vertical-align: super; letter-spacing: 0; } .bl-impacto .selo-txt { margin: var(--e3) auto 0; max-width: 54ch; font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); } @media (max-width: 760px) { .bl-impacto .selo-txt { letter-spacing: .1em } } /* --- BL-08 · OBRA COM LEITURA ----------------------------------------- Texto a esquerda, o TRABALHO a direita. O mouse revela uma versao sobre a outra — CAD lisa <-> malha cheia. Nunca hibrido: uma some, a outra aparece. O DETALHE QUE FAZ A PECA LER (HB, 21/08): o fundo da secao e azul e remete a rede, MAS **direto sob o trabalho tem que ser quase preto**. Sem esse poco escuro, o incisivo central fica recortado contra o azul e parece adesivo; com ele, o vao atras dos dentes le como FUNDO DE BOCA — que e onde a peca vive na cabeca de quem olha. Por isso `.poco` e um elipse quase preto, atras da figura, e a rede fica respirando nas bordas. */ .bl-obra { display: grid; grid-template-columns: 1.02fr .98fr; gap: var(--e7); align-items: center; } .bl-obra .texto { max-width: 46ch; } .bl-obra .figura { position: relative; } .bl-obra .poco { /* o vao de boca atras dos dentes */ /* ARMADILHA PROVADA (21/08): a 1a versao usava quase-preto opaco (.985) num elipse concentrado — virou MANCHA PRETA colada atras da peca, pior que o problema que resolvia. O HB: "nao quero uma mancha preta, so um fundo mais escurecido, sutil". O poco nao e um objeto; e uma QUEDA DE LUZ. Alfa baixo, raio grande e borda que morre longe: o olho tem que sentir o escuro sem ver o desenho. */ position: absolute; z-index: 0; inset: -34% -26% -34% -26%; background: radial-gradient(ellipse 64% 60% at 50% 50%, rgba(2,8,14,.62) 0%, rgba(3,11,18,.44) 38%, rgba(4,14,22,.20) 66%, rgba(5,18,28,0) 100%); pointer-events: none; } .bl-obra .par { position: relative; z-index: 1; aspect-ratio: 1537/1023; cursor: pointer; } .bl-obra .par img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s var(--curva); } .bl-obra .par .malha { opacity: 0; } .bl-obra .par.lendo .lisa { opacity: 0; } .bl-obra .par.lendo .malha { opacity: 1; } .bl-obra .etiqueta { margin-top: var(--e2); text-align: center; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); } .bl-obra .par.lendo ~ .etiqueta { color: var(--ciano); } .bl-obra .alterna { margin-top: var(--e3); } @media (max-width: 1180px) { .bl-obra { grid-template-columns: 1fr; gap: var(--e5); } .bl-obra .figura { order: -1; } /* no celular a peca vem primeiro */ .bl-obra .texto { max-width: 100%; } } /* --- BL-04 · FAIXA DE NUMEROS ----------------------------------------- TRES. Nem dois, nem quatro: tres e o que o olho conta sem contar. */ .bl-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); } @media (max-width: 1180px) { .bl-numeros { grid-template-columns: repeat(3, 1fr); } } .bl-n { background: var(--fundo-carta); border-radius: 16px; padding: var(--e4); } .bl-n p { font-size: 18px; line-height: 1.55; color: var(--texto); margin: var(--e2) 0 0; } .num { font-family: var(--f-impacto); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -.03em; } /* --- BL-05 · CITACAO COM AUTORIA -------------------------------------- A arma anti-ceticismo. Barra de marca a esquerda, sem aspa decorativa. */ .bl-quote { max-width: var(--bl-teto-texto); margin: 0 auto; padding: var(--e4) var(--e5); background: var(--fundo-carta); border-left: 4px solid transparent; border-image: var(--grad-legivel) 1; border-radius: 0 16px 16px 0; } .bl-quote p { font-family: var(--f-impacto); font-size: 30px; font-weight: 500; line-height: 1.4; letter-spacing: -.015em; color: var(--texto); margin: 0; max-width: 46ch; } .bl-quote p b { color: var(--tinta); font-weight: 600; } .bl-quote footer { display: flex; align-items: baseline; gap: var(--e2); margin-top: var(--e4); flex-wrap: wrap; } .bl-quem { font-size: 19px; font-weight: 700; color: var(--tinta); } .bl-papel { font-size: 17px; color: var(--texto-2); } .bl-legenda-quote { font-size: 17px; line-height: 1.55; color: var(--texto-2); max-width: 62ch; margin: var(--e3) 0 0; } /* --- BL-06 · BARRA FIXA DE CTA ---------------------------------------- Acessibilidade, nao estetica: o publico 55+ rola devagar e se perde; o botao nunca sai da tela. ARMADILHA PROVADA (21/08): barra `position:fixed` COBRE o fim da pagina. No teste a 900px ela comeu o ultimo item da fileira - e ninguem percebe, porque o conteudo nao some, so fica ESCONDIDO atras dela. O corpo TEM que reservar a altura da barra. E a altura VARIA: a 1920 ela tem uma linha; a 900 quebra em duas e vai a 156px. Numero magico nao serve - por isso `blocos.js` mede a barra e escreve --barra-altura. */ /* ARMADILHA PROVADA (21/08): `:has()` casa com o elemento MESMO ESCONDIDO — ele so pergunta se existe no DOM, nao se aparece. No catalogo, que carrega todos os blocos como paineis ocultos, esta regra vazou pro documento inteiro e somou 160px de padding no body: apareceu uma SEGUNDA barra de rolagem e a pagina ficou com cara de cortada. Cura: a barra de EXEMPLO leva `.exemplo` e a reserva ignora essas. */ body:has(.barra-fixa:not(.exemplo)) { padding-bottom: var(--barra-altura, 160px); } /* 🔴 BARRA FIXA SANGRA, CONTEUDO NAO (HB, 22/08). A barra atravessa a tela inteira - isso e o certo, e o que faz ela parecer parte da pagina. Mas o TEXTO e o BOTAO dela nao podem encostar na borda: numa tela larga o botao ia parar a 1.300px do titulo que ele responde, e o olho perde a ligacao. O truque e o padding: ele vale o respiro lateral normal em tela pequena e, quando a tela passa do teto, cresce sozinho pra segurar o conteudo dentro do MESMO trilho das secoes. Uma linha, sem media query e sem div a mais. */ .barra-fixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(5,18,28,.95); border-top: 1px solid rgba(44,196,255,.22); padding-block: 14px; /* +margem-lat porque o .trilho tambem tem esse respiro POR DENTRO: sem somar, a barra alinha com a CAIXA do trilho e nao com o texto - 40px de diferenca que o olho pega na hora. */ padding-inline: max(var(--margem-lat), (100% - var(--bl-teto)) / 2 + var(--margem-lat)); display: flex; align-items: center; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; } .barra-fixa .frase { font-size: var(--t-corpo); color: var(--texto); margin: 0; } .barra-fixa .frase b { color: var(--tinta); } @media (max-width: 860px) { .bl-numeros { grid-template-columns: 1fr; } .bl-quote p { font-size: 24px; } .barra-fixa { flex-direction: column; align-items: stretch; text-align: center; } .barra-fixa .cta { width: 100%; } } /* --- BL-09 - TABELA DE PLANOS ----------------------------------------- Por que 09 e nao 07: os nomes BL-07 (numero de impacto) e BL-08 (obra com leitura) ja estao ocupados neste arquivo desde 21/08. O catalogo e o LEIA-ME ainda nao mostram esses dois - drift conhecido, anotado no LEIA-ME. Reaproveitar o numero criaria duas coisas com o mesmo codigo, e o codigo do bloco e como o HB me dirige. AS TRES DECISOES DE DESENHO (contra a tabela antiga do site): 1. O 'nao inclui' PARA de gritar. A tabela velha usa 14 proibidos vermelhos; no plano mensal sao 8 numa coluna so, e a leitura que sobra e 'voce nao pode'. Aqui o incluso ACENDE (check ciano) e o ausente recua (traco + tinta --secundario). Recua com 7,45:1 - continua legivel, porque a informacao importa; o que cai e o ALARDE. Nao use `opacity` pra recuar: opacity mexe no pixel e derruba o contraste medido - foi assim que o pill reprovou em 4,11:1. 2. O check e o traco sao DESENHADOS em CSS (borda girada e uma barra). Sem fonte de icone, sem SVG, sem requisicao: nitido em qualquer DPI e colorido por currentColor. 3. A coluna do meio e a unica destacada. Tres destaques = nenhum. --------------------------------------------------------------------- */ .bl-planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); align-items: start; max-width: var(--bl-teto); margin-inline: auto; } .plano { background: var(--fundo-carta); border: 1px solid rgba(159,196,218,.14); border-radius: 16px; padding: var(--e4) var(--e3) var(--e3); display: flex; flex-direction: column; text-align: center; transition: border-color .3s var(--curva), transform .3s var(--curva), box-shadow .3s var(--curva); } /* AS DUAS CORES TEM PAPEIS DIFERENTES (HB, 21/08): AZUL = o estado PARADO. E a marca dizendo qual plano ela recomenda; esta la mesmo sem ninguem tocar, e nao compete com o gesto. ROXO = a RESPOSTA ao gesto. So aparece quando o mouse chega, em qualquer um dos tres cartoes - inclusive no destacado. Um diz 'este e o indicado'; o outro, 'este e o que voce esta olhando agora'. Se o parado ja fosse roxo, a passada nao teria o que dizer. Borda e componente, nao texto: o piso e 3:1. O ciano da 8,71:1 e o roxo #A277F9, 5,46:1 - os dois sobram. */ .plano.destacado { border-color: rgba(44,196,255,.55); box-shadow: 0 18px 46px rgba(0,138,212,.20); position: relative; overflow: hidden; } /* O HALO DO RECOMENDADO - o .horizonte da casa, em escala de cartao. Mesma receita da secao (azul da marca -> roxo, elipse desfocada no topo), com um TERCO da forca: la o halo tem 700px de altura pra se diluir, aqui tem 300. O QUE ELE CUSTA, MEDIDO (nao estimado): . a .34/.20 o rotulo ACESSO ANUAL do cartao destacado cai de 6,89:1 para 6,36:1 - o fundo atras dele vai de rgb(10,27,40) a rgb(16,33,57) . a .26/.15, que e o que ficou, ele para em 6,53:1 (fundo rgb(14,31,53)) . o preco cai de 5,46:1 para 5,39:1 Nenhum reprova, mas o halo NAO e de graca: ele cobra contraste do texto que decora. Subir a opacidade aqui e mexer na legibilidade do cartao. Mora no ::before com z-index 0 e todo o conteudo sobe pro 1 - sem isso o halo pinta POR CIMA do texto. */ .plano.destacado::before { content: ""; position: absolute; z-index: 0; pointer-events: none; top: -150px; left: 50%; transform: translateX(-50%); width: 420px; height: 300px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,138,212,.26), rgba(107,67,239,.15) 46%, transparent 70%); filter: blur(60px); } .plano.destacado > * { position: relative; z-index: 1; } .plano:hover, .plano:focus-within { border-color: rgba(162,119,249,.90); transform: translateY(-3px); box-shadow: 0 14px 38px rgba(107,67,239,.26); } .plano.destacado:hover, .plano.destacado:focus-within { border-color: rgba(162,119,249,.95); box-shadow: 0 22px 54px rgba(107,67,239,.34); } /* O selo do plano do meio EXISTE nos tres cartoes - nos outros dois ele e invisivel. Sem isso, o cartao destacado empurra nome, preco e botao 70px pra baixo e os tres CTAs param em alturas diferentes: o olho le como desalinho, nao como destaque. Espaco reservado > numero magico de padding, que quebraria no dia que o texto do selo mudar. */ .plano .selo-vazio { visibility: hidden; } /* Os TRES cartoes tem selo - com um so, o recado vira 'este e o bom e os outros sao o resto'. Cada um diz em QUE aquele plano e o melhor: economico, completo, acessivel. Aceso (azul) so no recomendado; nos outros dois, contorno neutro - etiqueta, nao chamada. */ .plano .selo { align-self: center; margin-bottom: var(--e2); display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(159,196,218,.22); border-radius: var(--raio-pill); background-color: rgba(159,196,218,.06); color: var(--texto); font-size: var(--t-rotulo); font-weight: 600; padding: 6px 16px; letter-spacing: .04em; } .plano.destacado .selo { border-color: rgba(44,196,255,.42); background-color: rgba(0,110,175,.16); color: var(--tinta); } /* ICONE, NAO EMOJI (HB, 21/08): emoji e desenho de rede social - vem com cor propria, estilo de outra casa e muda de cara a cada sistema operacional. O icone e traco: herda a cor do selo (currentColor), acende junto com ele no cartao destacado e tem a mesma espessura de linha em qualquer tela. Desenhado em SVG inline: nada de fonte de icone, nada de requisicao. */ .plano h3 { font-family: var(--f-impacto); font-size: 26px; font-weight: 600; color: var(--tinta); margin: 0; line-height: 1.15; } .plano .periodo { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--secundario); margin: 6px 0 var(--e3); } .plano .parcela { font-size: 16px; color: var(--texto-2); margin: 0; } .plano .preco { font-family: var(--f-impacto); font-size: 40px; font-weight: 600; line-height: 1.1; margin: 2px 0 4px; } .plano .avista { font-size: 17px; color: var(--texto); margin: 0; } .plano .avista b { color: var(--tinta); } .plano .nota { font-size: var(--t-rotulo); line-height: 1.5; color: var(--secundario); margin: var(--e2) 0 var(--e3); } .plano .cta { width: 100%; } /* a lista: 3 colunas de grade por linha (marca | texto), nao flex - o texto de duas linhas tem que alinhar pela primeira, nao pelo centro. */ .plano-lista { list-style: none; margin: var(--e2) 0 0; padding: var(--e2) 0 0; border-top: 1px solid rgba(159,196,218,.14); text-align: left; } /* Os 14 itens ficam TODOS; o que cede e a fonte (HB, 21/08). 19px -> 18px -> 16px, com a linha em 5px de respiro. A lista de plano nao e leitura: e CONFERENCIA. A pessoa varre procurando o item que lhe interessa, nao le as 14 linhas em sequencia - por isso ela pode ser mais discreta que o corpo da pagina, e deve. A tinta tambem recua: --texto-2 no incluso (era --texto). PISO: 16px. O piso do corpo no tokens.css e 18px, e este e o unico lugar do motor que fica abaixo dele - por decisao do HB, com o motivo acima. Nao desci mais porque 16px e o minimo que a pesquisa externa recomenda para usuario mais velho; abaixo disso a gente sai da recomendacao, e ai e outra conversa, nao um ajuste de layout. */ .plano-lista li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; font-size: 16px; line-height: 1.4; padding-block: 5px; color: var(--texto-2); } .plano-lista li + li { border-top: 1px solid rgba(159,196,218,.08); } /* O TEXTO do item vive num proprio, e nao solto no
  • . Nao e preciosismo: a auditoria de contraste mede o pixel mais claro DENTRO da caixa do elemento de texto - e com o texto solto no
  • , o check ciano desenhado no ::before cai dentro dessa caixa e e lido como se fosse o FUNDO. Deu 12 reprovas fantasmas de 1,44:1. Com o , a caixa medida e so a do texto. */ .plano-lista li > span { min-width: 0; } .plano-lista li::before { content: ""; box-sizing: border-box; } /* o check: duas bordas e um giro de 45 graus */ .plano-lista li.sim::before { width: 8px; height: 14px; margin: 2px 0 0 4px; border-right: 2.5px solid var(--ciano); border-bottom: 2.5px solid var(--ciano); transform: rotate(45deg); } /* o ausente: um traco. Nao e proibicao, e ausencia. */ /* O ausente recua mais um degrau: --apagado (5,35:1 sobre o cartao) contra os 6,89:1 do incluso. PAREI AI de proposito: abaixo de 4,5:1 o item deixa de ser informacao e vira cinza decorativo - e ele PRECISA ser lido, e o que faz a pessoa entender o que NAO esta levando. */ .plano-lista li.nao { color: var(--apagado); } .plano-lista li.nao::before { width: 12px; height: 2px; margin: 9px 0 0 2px; border-radius: 2px; background: var(--apagado); opacity: .8; } @media (max-width: 900px) { .bl-planos { grid-template-columns: 1fr; max-width: 460px; } .plano.destacado { order: -1; } /* no celular o destacado vem primeiro */ /* o preco cede 6px no celular pra nao quebrar entre o R$ e o numero: preco partido em duas linhas le como dois numeros. */ .plano .preco { font-size: 34px; } } /* --- BL-10 - FAQ (a aurora que acende na passada) ----------------------- SEM UMA LINHA DE JS. E
    / nativo: abre no clique, abre no teclado (Enter e Espaco), le direito no leitor de tela e continua funcionando se o JS da pagina quebrar. O atributo name= faz o acordeon exclusivo (abrir um fecha o outro) sem script; em navegador velho o comportamento degrada pra 'abre varios', que nao quebra nada. A AURORA NA PASSADA (HB, 21/08): e a mesma da secao de prova - azul da marca num canto, roxo no outro - reduzida a escala da linha e presa em opacity 0. So o hover/foco acende. Duas medidas importam: . ela mora no ::before com z-index 0; o conteudo vai pro 1. Sem isso a aurora pinta POR CIMA da pergunta. . ela CUSTA contraste, como todo brilho atras de texto. MEDIDO no pixel: o fundo atras da pergunta vai de #0A1720 a #092638 e o branco cai de 18,16:1 para 15,60:1. Sobra folga - mas se alguem subir a opacidade, mede de novo. (Como medir: o hover sintetico do Playwright NAO gruda nesta aba - le opacity 0 com o mouse em cima e o resultado varia entre rodadas. Forcar o mesmo estado por regra (`::before{opacity:1}`) e fotografar da medida repetivel. Medir o efeito, nao o gesto.) O NUMERO NAO E MONO. A referencia usa fonte monoespacada; a identidade tem duas familias e nao vai ganhar uma terceira por causa de 8 digitos. tabular-nums na Baloo da o mesmo alinhamento de coluna. */ .bl-faq { display: grid; grid-template-columns: minmax(260px, .82fr) 1.18fr; gap: var(--e6); align-items: start; } /* Com 15 perguntas a coluna da direita fica tres vezes mais alta que a esquerda - e o cabecalho sumia da tela logo no comeco da rolagem, que e justamente quando a pessoa esta lendo as respostas. Sticky resolve sem JS: ele acompanha ate a lista acabar. */ .faq-cabeca { position: sticky; top: var(--e5); } .faq-cabeca .bl-h2 { margin: var(--e3) 0 var(--e2); } .faq-sub { font-size: var(--t-corpo); line-height: var(--lh-corpo); color: var(--texto-2); max-width: 34ch; margin: 0; } .faq-lista { border-top: 1px solid rgba(159,196,218,.14); } .faq-item { position: relative; overflow: hidden; border-radius: 12px; border-bottom: 1px solid rgba(159,196,218,.14); } .faq-item::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .35s var(--curva); background: radial-gradient(58% 130% at 18% 0%, rgba(0,138,212,.20), transparent 62%), radial-gradient(52% 130% at 82% 100%, rgba(107,67,239,.17), transparent 62%); } .faq-item:hover::before, .faq-item:focus-within::before { opacity: 1; } .faq-item > * { position: relative; z-index: 1; } .faq-item summary { /* a coluna do numero e o recuo da resposta (`.faq-r`) tem que andar juntos: 34 + 12 do gap + 16 do padding = os 62px do recuo la embaixo. Se um mudar sozinho, a resposta desalinha da pergunta e ninguem sabe dizer por que. */ display: grid; grid-template-columns: 34px 1fr 20px; gap: 12px; align-items: center; padding: 16px; cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:focus-visible { outline: 2px solid var(--ciano); outline-offset: -2px; } /* --- 🔴 O FAQ E A LETRA MIUDA DO SITE (HB, 24/08) ---------------------- "Essas sao literalmente a parte conhecida como letras miudas do site. Entao vamos deixar ela mais discreta. Se a pessoa tiver dificuldade ela sempre pode dar zoom na pagina, num e?" Decisao dele, e vale a pena registrar CONTRA O QUE ela foi tomada: a regra 1 do LEIA-ME diz "corpo nunca abaixo de 20px" por causa do publico 45+. A resposta ja estava em 18px antes disto - a regra escrita e o `--t-corpo` do tokens.css (18px, piso declarado de 16) nunca bateram. Aqui o FAQ desce ate o piso do CODIGO, 16px, e nao um pixel abaixo: "discreto" e um degrau de hierarquia, nao licenca pra ilegivel. A HIERARQUIA CONTINUA DE PE - pergunta 18 > resposta 16. Foi exatamente o contrario disso que o HB pegou em 21/08 (resposta MAIOR que a pergunta), e encolher os dois pelo mesmo fator e o jeito de nao reintroduzir aquilo. */ .faq-n { font-family: var(--f-impacto); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ciano); } /* DEFEITO PEGO PELO HB (21/08): a resposta estava em 20px (--t-corpo) e a pergunta em 19px - o texto secundario MAIOR que o titulo dele. Hierarquia invertida le como erro de montagem mesmo quando ninguem sabe dizer o que esta errado. A pergunta manda desde entao. (O comentario dizia "22px contra 19px" e os valores eram 21 e 18: alguem afinou depois e nao mexeu no texto. Numero em comentario envelhece calado - por isso agora ele fala de RELACAO, nao de numero.) */ .faq-q { font-size: 18px; font-weight: 700; color: var(--tinta); line-height: 1.35; } /* o + que vira x: dois tracos e um giro de 45 graus. Desenhado, nao fonte: glifo de + e de x tem peso e altura diferentes e o botao 'pula' ao trocar. */ .faq-mais { position: relative; width: 20px; height: 20px; justify-self: end; } .faq-mais::before, .faq-mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 2px; border-radius: 2px; background: var(--roxo-texto); transform: translate(-50%,-50%); transition: transform .3s var(--curva), background-color .3s var(--curva); } .faq-mais::after { transform: translate(-50%,-50%) rotate(90deg); } .faq-item[open] .faq-mais::before { transform: translate(-50%,-50%) rotate(45deg); } .faq-item[open] .faq-mais::after { transform: translate(-50%,-50%) rotate(135deg); } .faq-r { padding: 0 16px 18px 62px; } .faq-r p { font-size: 16px; line-height: 1.65; color: var(--texto); max-width: 62ch; margin: 0; } .faq-r p + p { margin-top: var(--e2); } /* aberto: a moldura acende, como na referencia - so que em ciano, que e a cor de ESTADO da casa (o roxo aqui ja e a passada do mouse). */ .faq-item[open] { border-bottom-color: transparent; background: rgba(159,196,218,.04); box-shadow: inset 0 0 0 1px rgba(44,196,255,.34); } @media (max-width: 900px) { .bl-faq { grid-template-columns: 1fr; gap: var(--e4); } .faq-cabeca { position: static; } /* empilhado, sticky so atrapalha */ .faq-sub { max-width: none; } .faq-item summary { grid-template-columns: 28px 1fr 20px; gap: 10px; padding: 14px 12px; } .faq-q { font-size: 17px; } /* 🔴 no celular a resposta NAO desce: 16px ja e o piso, e aqui o dedo esta mais perto do olho mas a tela e pior. Encolher os dois no desktop e decisao de hierarquia; encolher no celular seria so tornar ilegivel. */ .faq-r p { font-size: 16px; } .faq-r { padding: 0 12px 16px 50px; } } @media (prefers-reduced-motion: reduce) { .faq-item::before, .faq-mais::before, .faq-mais::after { transition: none !important; } } /* --- A LENTE - revela a peca PRONTA por baixo do projeto ---------------- Duas imagens do MESMO enquadramento, empilhadas. Embaixo fica o projeto (a malha do CAD); em cima, a peca real, escondida por uma mascara redonda de raio zero. O ponteiro abre essa mascara onde passa - e so ali. POR QUE MASCARA E NAO TROCA DE IMAGEM: trocar por opacity mostra tudo de uma vez e mata a graca; a mascara faz a pessoa DESCOBRIR, e a descoberta e o argumento (o CAD virou aquilo). Tecnica confirmada em pesquisa: mask-image radial com borda suave, coordenada do ponteiro em espaco local, suavizada por requestAnimationFrame, e a mascara fecha na saida. Mascara CSS custa menos que canvas: o navegador ja compoe em GPU. 🔴 LINHA VERMELHA RESPEITADA: a foto da peca do protetico nao e alterada. O que existe por cima e o PROJETO - camada derivada, feita a partir dela. Nenhuma IA reescreve o trabalho do profissional; a lente so mostra. 45+ E QUEM NAO TEM MOUSE: hover nao e descobrivel sozinho e nao existe em celular. Por isso vem com dica visivel ('passe o mouse'), e em tela de toque o dedo revela a peca INTEIRA (a classe .tudo) - ninguem fica sem ver o resultado por causa do aparelho. */ .lente { position: relative; display: block; border-radius: 16px; overflow: hidden; cursor: crosshair; -webkit-tap-highlight-color: transparent; } .lente img { display: block; width: 100%; height: auto; } .lente .revelado { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: radial-gradient(circle var(--lente-r, 0px) at var(--lente-x, 50%) var(--lente-y, 50%), #000 56%, rgba(0,0,0,.42) 78%, transparent 100%); mask-image: radial-gradient(circle var(--lente-r, 0px) at var(--lente-x, 50%) var(--lente-y, 50%), #000 56%, rgba(0,0,0,.42) 78%, transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* o aro: da corpo a lente. Sem ele o efeito parece falha de carregamento. */ .lente .aro { position: absolute; pointer-events: none; border-radius: 50%; left: var(--lente-x, 50%); top: var(--lente-y, 50%); width: calc(var(--lente-r, 0px) * 2); height: calc(var(--lente-r, 0px) * 2); transform: translate(-50%, -50%); opacity: var(--lente-o, 0); box-shadow: 0 0 0 1px rgba(44,196,255,.34), 0 0 40px rgba(44,196,255,.14); } .lente-dica { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .04em; /* fundo QUASE OPACO, e nao um veu de .72: a dica pousa em cima da FOTO, e a foto tem dente branco. Com .72 o auditor mediu 1,57:1 - reprovou feio. O que esta atras de um rotulo flutuante nao e escolha nossa, entao ele nao pode depender do que estiver la. */ color: var(--tinta); background: rgba(4,19,28,.93); border: 1px solid rgba(44,196,255,.30); border-radius: var(--raio-pill); padding: 7px 16px; pointer-events: none; transition: opacity .4s var(--curva); } .lente.usada .lente-dica { opacity: 0; } /* toque e teclado: sem ponteiro que passeia, revela a peca inteira */ .lente.tudo .revelado { -webkit-mask-image: none; mask-image: none; } .lente.tudo .aro { opacity: 0; } .lente:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; } /* --- A CORTINA - o corte que fica onde voce deixou --------------------- Irma da .lente, e a fabrica fica com as duas: .lente holofote redondo que segue o ponteiro e FECHA quando ele sai. Boa pra 'espiar': o efeito e a descoberta, nao a comparacao. .cortina corte vertical que segue o ponteiro e FICA onde parou. Boa pra COMPARAR: a pessoa ajusta e deixa no ponto que quiser, inclusive pra mostrar pra outra pessoa na tela. A diferenca que importa (HB, 21/08): a cortina NAO volta sozinha. Saiu da zona, congela. Estado que se desfaz sozinho obriga a pessoa a segurar o mouse parado pra olhar - e olhar com o braco travado nao e olhar. Esquerda = peca PRONTA, direita = projeto. Andar pra direita revela mais trabalho acabado: o gesto acompanha a historia (o CAD vira peca). --------------------------------------------------------------------- */ .cortina { position: relative; display: block; overflow: hidden; border-radius: 16px; cursor: ew-resize; -webkit-tap-highlight-color: transparent; --corte: 50%; } .cortina img { display: block; width: 100%; height: auto; } /* 🔴 AS DUAS METADES SAO CLIPADAS - e nao uma imagem POR CIMA da outra. O HB viu antes de mim: "existe alguma aberracao nas bordas... existe algo sobrevivendo abaixo dele?". Existia. Com a peca so empilhada sobre o projeto, a borda dela e antialiasada (meio-alfa em cada pixel do contorno) - e por baixo desse meio-alfa aparecia a silhueta do projeto, que e um pouco mais larga por causa da casca de malha. O resultado era uma auréola clara em volta da peca pronta, que lia como recorte porco. Cura: cada lado so PINTA no seu lado. Onde uma existe, a outra nao esta la pra vazar - e a costura vira a linha do fio, que e proposital. */ /* z-index: a imagem fica ACIMA do fundo Exocad (que e o `.exo`, em z 0), e o fio/puxador acima dela — com `.base` em 1, 1px do fio (que fica do lado direito do corte) ficaria escondido embaixo da imagem. Era condicional enquanto o fundo era teste; virou padrao em 22/08. */ .cortina .base { clip-path: inset(0 0 0 var(--corte)); position: relative; z-index: 1; } .cortina .revelado { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 calc(100% - var(--corte)) 0 0); } /* --- O FUNDO EXOCAD NO LADO DO PROJETO (PADRAO desde 22/08/2026) ------ Nasceu como variante em teste (3.2 campo violeta / 3.3 campo cinza com linhas roxas). O HB escolheu o 3.3 e ele virou o PADRAO de toda exibicao da cortina: quem escreve `.cortina`, sozinho, ja recebe o 3.3. Nenhuma pagina precisa pedir. 🔴 O PADRAO E O ESTADO SEM CLASSE, e as OUTRAS e que se declaram - foi ele quem pediu assim ("quero o direito de escolha, mas a que eu pedi na frente"). Se o padrao dependesse de uma classe (`.exocad33`), toda pagina nova nasceria sem ele e a escolha dele viraria trabalho manual repetido. (sem classe) 3.3 campo cinza, linhas roxas <- PADRAO .exocad32 3.2 campo violeta do Exocad .sem-exocad desligado, so o preto As duas de baixo existem pra COMPARAR (o interruptor da demo do BL-03 no catalogo). Em pagina de verdade, nao se escreve nenhuma das duas. 🔴 ELE NAO PODE ULTRAPASSAR A AGULHA, e nao ultrapassa por ACIDENTE: o `clip-path` e o MESMO do `.base`, escrito com a mesma variavel `--corte`. Se eu tivesse desenhado o roxo com uma largura propria (um `right: 50%`, por exemplo), ele bateria com a agulha hoje e sairia do lugar no primeiro arrasto - e o defeito so apareceria em movimento, que e onde ninguem olha num print. O ROXO MORA ATRAS DA MALHA, nao por cima: as duas imagens tem alfa (62% do quadro e vazio), entao ele preenche o vazio em volta do projeto sem lavar o desenho. Por cima, mesmo com blend, ele tingiria a malha e a peca perderia a leitura de CAD. O degrade nasce na BORDA DE FORA e morre antes do meio: quanto mais fundo no territorio do CAD, mais Exocad. Assim, com a agulha em qualquer posicao, perto dela o roxo ja esta fraco - a transicao continua sendo do fio, nao de uma mancha de cor. #473A6D e o roxo medido do Exocad (1,89:1 - por isso NUNCA leva texto em cima; aqui ele e fundo atras de imagem, que e o unico uso que ele aguenta). */ /* 🔴 ESTES SAO OS NUMEROS DO 3.3, o padrao: campo CINZA e linhas ROXAS. A AURA DO CAMPO E MENOR que a da grade - foi o que fez o HB ver diferenca: com as duas do mesmo tamanho, a risca nunca saia de cima do cinza e o efeito era so uma mancha texturizada. Com o campo menor, a grade avanca sozinha e risca DIRETO sobre o fundo da pagina, que e o desenho que ele descreveu. Os botoes ficam todos aqui em cima, nomeados. Espalhar numero magico pelo meio das regras e o que faz calibragem virar caca ao tesouro. */ .cortina { --exo-campo: 124, 124, 138; /* o cinza do campo */ --exo-forca: .30; /* quanto o campo pesa */ --exo-aura: 30% 28%; /* ATE ONDE vai o campo (menor) */ --exo-grade-aura: 50% 45%; /* ATE ONDE vai a grade (maior) */ --exo-passo: 20px; /* espacamento da grade */ --exo-risca: rgba(172,140,255,.92); --exo-risca-v: rgba(172,140,255,.78); } /* O 3.2, que perdeu mas continua de pe pra comparacao: campo violeta do Exocad #473A6D, opaco, com a aura do campo GRANDE - e por isso a risca ficava sempre por cima do cinza e a grade nao se via. #473A6D da 1,89:1 - NUNCA leva texto em cima; aqui ele e fundo atras de imagem, que e o unico uso que ele aguenta. */ .cortina.exocad32 { --exo-campo: 71, 58, 109; /* #473A6D - o violeta do Exocad */ --exo-forca: 1; --exo-aura: 44% 40%; /* do tamanho da grade */ --exo-grade-aura: 50% 45%; --exo-risca: rgba(154,126,232,.60); --exo-risca-v: rgba(154,126,232,.52); } /* o terceiro estado do interruptor: sem fundo nenhum, so o preto */ .cortina.sem-exocad .exo { opacity: 0; } /* 🔴 DUAS AURAS SOMADAS, NAO UMA CAMADA COM TEXTURA (HB, 22/08). Antes o campo era o `background` do `.exo` e a grade era o `::after` por cima dele - a risca so existia ONDE havia campo. Agora sao dois irmaos independentes: ::before o campo (cinza ou violeta), aura MENOR ::after a grade sobre fundo TRANSPARENTE, aura MAIOR Cada um com a sua extensao; o `.exo` fica so com a mascara da AGULHA, que e a unica regra que vale pros dois. Mascara de pai se aplica ao que os filhos desenham, entao nenhum dos dois consegue atravessar o fio. Por que a extensao da grade para em `50% 45%`: do centro (50% 55%) ate a lateral sao 50% da largura e ate a base 45% da altura. Passar disso poe cor na aresta da caixa, e ai a moldura da cortina vira uma linha visivel. */ .cortina .exo { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* nasce VISIVEL: o fundo e o padrao. A transicao existe porque o interruptor da demo pode apaga-lo, e corte seco parece defeito. */ opacity: 1; transition: opacity .4s var(--curva); -webkit-mask-image: linear-gradient(to right, transparent var(--corte), #000 calc(var(--corte) + 10%)); mask-image: linear-gradient(to right, transparent var(--corte), #000 calc(var(--corte) + 10%)); } .cortina .exo::before, .cortina .exo::after { content: ""; position: absolute; inset: 0; } /* a aura do CAMPO: radial do centro da peca, e a saida de cima com rampa longa (o HB pediu suave subindo). */ .cortina .exo::before { background: radial-gradient(ellipse 72% 92% at 50% 55%, rgba(var(--exo-campo), var(--exo-forca)) 0%, rgba(var(--exo-campo), calc(var(--exo-forca) * .94)) 34%, rgba(var(--exo-campo), calc(var(--exo-forca) * .76)) 60%, rgba(var(--exo-campo), calc(var(--exo-forca) * .42)) 82%, rgba(var(--exo-campo), 0) 100%); -webkit-mask-image: radial-gradient(ellipse var(--exo-aura) at 50% 55%, #000 30%, rgba(0,0,0,.78) 58%, rgba(0,0,0,.34) 80%, transparent 100%); mask-image: radial-gradient(ellipse var(--exo-aura) at 50% 55%, #000 30%, rgba(0,0,0,.78) 58%, rgba(0,0,0,.34) 80%, transparent 100%); } /* a aura da GRADE: fundo transparente, so as riscas - e por isso elas riscam sobre o que estiver atras (a pagina), nao sobre o campo. */ .cortina .exo::after { background: repeating-linear-gradient(to bottom, var(--exo-risca) 0 1px, transparent 1px var(--exo-passo)), repeating-linear-gradient(to right, var(--exo-risca-v) 0 1px, transparent 1px var(--exo-passo)); -webkit-mask-image: radial-gradient(ellipse var(--exo-grade-aura) at 50% 55%, #000 26%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.26) 84%, transparent 100%); mask-image: radial-gradient(ellipse var(--exo-grade-aura) at 50% 55%, #000 26%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.26) 84%, transparent 100%); } /* o fio: sem ele a troca parece defeito de renderizacao, nao um controle */ .cortina .fio { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 2px; z-index: 3; transform: translateX(-1px); pointer-events: none; background: linear-gradient(to bottom, rgba(44,196,255,0) 0%, rgba(44,196,255,.85) 16%, rgba(44,196,255,.85) 84%, rgba(44,196,255,0) 100%); box-shadow: 0 0 18px rgba(44,196,255,.40); } .cortina .puxador { position: absolute; top: 50%; left: var(--corte); z-index: 3; transform: translate(-50%, -50%); pointer-events: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(44,196,255,.55); background: rgba(4,19,28,.72); box-shadow: 0 0 26px rgba(44,196,255,.22); } /* as duas setinhas, desenhadas: mesma regra dos outros icones da casa */ .cortina .puxador::before, .cortina .puxador::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ciano); border-bottom: 2px solid var(--ciano); } .cortina .puxador::before { left: 9px; transform: translateY(-50%) rotate(135deg); } .cortina .puxador::after { right: 9px; transform: translateY(-50%) rotate(-45deg); } .cortina:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; } /* --- A FIGURA VIVA - o ambiente em volta da peca ----------------------- Tres camadas, nesta ordem: rede viva -> cavidade -> peca. A CAVIDADE E UMA AURORA INVERTIDA (HB, 21/08). A tentativa anterior era um degrade dentro da caixa da figura, e por mais que eu calibrasse o raio, SEMPRE dava pra achar onde ele acabava - degrade que termina", dentro do campo de visao tem borda, mesmo que suave. Aqui a construcao e a mesma da `.aurora` da casa (manchas grandes com blur pesado), so que PRETAS: a caixa e 45% maior que a figura em cada lado, o preto morre em ~60% dela, e ainda leva blur(46px) por cima. Nao existe transicao pra ver porque a transicao acontece fora da tela. A rede viva fica ATRAS da cavidade de proposito: ela aparece nas bordas do quadro e some por baixo da peca. Le como "a peca emerge do escuro", e nao como "tem um fundo animado atras de uma foto". 🔴 ESCASSEZ: esta rede conta como A rede viva da pagina. Se o hero usar este bloco, nenhuma outra secao usa .rede-viva. */ .figura-viva { position: relative; isolation: isolate; } .figura-viva > canvas.rede-viva { position: absolute; inset: -8%; width: 116%; height: 116%; z-index: 0; opacity: .8; } /* SEGUNDA CALIBRAGEM (HB): 'ainda mais sutil, aumenta bem mais o degrade, mesmo que comece a pegar azul nas extremidades'. Duas mudancas: . a caixa dobrou (-45% -> -90%): o degrade tem o dobro de espaco pra morrer, e ele morre longe da peca . o pico caiu (.98 -> .80): perto da peca ainda e preto de boca, mas nas pontas o azul do fundo VOLTA - e voltar e o pedido, nao um defeito. Preto que cobre tudo nao e cavidade, e buraco. O blur foi de 46 pra 90px pela mesma razao de sempre: o que a gente nao quer e enxergar ONDE acaba. */ .figura-viva > .cavidade { position: absolute; inset: -90%; z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 55%, rgba(0,0,0,.80) 0%, rgba(0,0,0,.70) 14%, rgba(0,0,0,.46) 26%, rgba(0,0,0,.20) 38%, rgba(0,0,0,0) 54%), radial-gradient(ellipse 30% 18% at 50% 66%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 40%, rgba(0,0,0,0) 72%); filter: blur(90px); } .figura-viva > .cortina { z-index: 2; } /* --- BL-13 - HERO DE PROFESSOR ---------------------------------------- O conceito do BL-03 aplicado a gente: a figura nasce no PRETO e o preto morre no degrade da secao. O que muda e o assunto - la e a peca, aqui e quem ensina - e por isso muda o LADO: as costas encostam na margem e o rosto vira PRA DENTRO, na direcao do texto. Retrato que olha pra fora da pagina leva o leitor junto. NAO PRECISOU ESPELHAR, e isso foi medido antes de escolher o lado: na foto o rosto tem 88 de luz na metade direita contra 34 na esquerda, e o corpo pesa 3x pra direita. Ele ja esta virado pra la. 🔴 ELE NAO FLUTUA (HB). A figura e ancorada na BASE e o corte e a borda da secao - nao e um recorte pousado no meio com sombra. O corte cai no abdomen porque o quadro da foto termina la: cabeca em 9%..41% da altura, ombros em 45%, corpo ate a ultima linha do arquivo (91% dela opaca). Medido, nao enquadrado no olho. 🔴 `contain`, NAO `cover`. O recorte e retrato (0,78) e a caixa da figura e mais larga que alta: com `cover` o navegador preenche a largura e corta a ALTURA - ou seja, corta a cabeca dele. `contain` com ancora embaixo-esquerda nunca corta e sempre pousa o abdomen na borda de baixo, que e o que a gente quer que aconteca. O PRETO E NOSSO, e por isso ele vem depois do fundo e ANTES dele. Com o recorte em alfa, a cabeca fica sobre o azul e a rede viva passa atras - com foto de fundo preto chapado isso seria impossivel, o retangulo escuro comeria a rede inteira. */ /* 🔴 A FIGURA OBEDECE A MARGEM, NAO A BORDA (HB, 22/08: "vc deixou ele muito na borda"). Eu ancorei em `left: 0`, que e a borda da SECAO - e ai as costas dele encostavam no fio da moldura enquanto todo o resto da pagina comeca 40px pra dentro. "Costas na margem" nunca quis dizer "costas no canto". A conta e a mesma que a barra fixa e as paginas ja usam: quando a secao e mais larga que o trilho, a margem cresce junto com a sobra dos dois lados. Fica numa variavel porque o texto do outro lado tem que usar a MESMA - duas contas iguais escritas em dois lugares divergem no dia que uma muda. */ .bl-prof { position: relative; overflow: hidden; isolation: isolate; --prof-margem: max(var(--margem-lat), (100% - var(--largura)) / 2 + var(--margem-lat)); --prof-texto: min(46%, 520px); } .app.bl-prof { min-height: min(76vh, 700px); /* a regua e o BLOCO, nao a janela: no catalogo a pista come 320px, entao uma janela de 1200 da so 777 pro bloco - e ali o retrato encolhia pra 291px com 367 de ar em cima, que e o oposto de 'nao flutuando'. Numa pagina de verdade os mesmos 1200 comportam as duas colunas. */ container-type: inline-size; } .bl-prof > canvas.rede-viva { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .72; } /* o preto que ASSENTA: denso no pe dele e morrendo pra fora e pra cima. Sem ele o recorte parece colado; com ele, ele emerge de algum lugar. */ .bl-prof > .prof-cava { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 44% 62% at 21% 104%, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.34) 54%, rgba(0,0,0,0) 80%); filter: blur(52px); } /* A caixa da figura vai da margem ate onde o TEXTO comeca, menos um respiro. Assim ela nunca invade a coluna de leitura por construcao, em largura nenhuma - em vez de eu escolher um numero que funciona na minha tela. */ .bl-prof > .prof-fig { position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none; left: var(--prof-margem); right: calc(var(--prof-texto) + var(--prof-margem) + var(--e5)); } .bl-prof > .prof-fig img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: left bottom; } /* Retrato virado pro lado errado: espelha a IMAGEM, nao a seção. As costas continuam na margem e o rosto volta a olhar pra dentro. Cuidado com foto que tenha texto, cracha ou logo - espelhar inverte a leitura deles. */ .bl-prof.espelhado > .prof-fig img { transform: scaleX(-1); } .bl-prof > .veu { z-index: 3; } .bl-prof > .trilho { position: relative; z-index: 4; } /* `margin-left:auto` e nao uma grade de duas colunas: a figura e absoluta e sangra ate a margem, entao nao ha coluna pra ela ocupar - inventar uma so criaria um vao fantasma do lado de fora. */ .bl-prof .prof-texto { margin-left: auto; width: var(--prof-texto); } .bl-prof .prof-texto h1 { max-width: 14ch; } .bl-prof .prof-assina { display: flex; align-items: baseline; gap: 10px; margin: var(--e3) 0 0; font-size: var(--t-rotulo); color: var(--secundario); letter-spacing: .08em; text-transform: uppercase; } .bl-prof .prof-assina b { font-size: 17px; color: var(--tinta); letter-spacing: 0; text-transform: none; } /* 🔴 EM TELA ESTREITA A FIGURA NAO SOME - ela e o argumento. Ela passa a ocupar a faixa inteira por tras, e o veu vira radial cobrindo TUDO: com `.veu.direita` numa coluna unica, o texto cairia sobre o rosto sem protecao nenhuma e o contraste iria pro chao. */ /* 🔴 ABAIXO DE 1000px DE BLOCO A FIGURA VIRA FUNDO. Nao e escolha de gosto: com duas colunas nessa largura o retrato fica menor que a propria assinatura dele. Como fundo ele continua sendo o argumento - so para de disputar espaco com a leitura. E ai left/right voltam a zero: nao ha coluna ao lado pra respeitar, e a margem quem passa a garantir e o trilho do texto. */ @container (max-width: 1000px) { .bl-prof > .prof-fig { left: 0; right: 0; opacity: .42; } .bl-prof > .prof-fig img { object-position: center bottom; } .bl-prof > .veu.direita { background: radial-gradient(ellipse 130% 92% at 50% 56%, rgba(5,18,28,.95) 0%, rgba(5,18,28,.90) 50%, rgba(5,18,28,.70) 100%); } .bl-prof .prof-texto { width: 100%; } } /* --- BL-11 - FAIXA DE VIDEO (o topo que se mexe de verdade) ------------ Video de fundo numa faixa larga e baixa (24:5), texto a ESQUERDA, a rede viva por cima e o veu protegendo so o lado do texto. O QUE O VIDEO CUSTA, MEDIDO. O material original tinha 18,8 MB (HEVC, 5.045 kb/s, 30s, com trilha de audio inutil). Recomprimido em H.264 1440x300 a 24 fps, sem audio: 1,03 MB - 94% mais leve, e a diferenca de imagem nao aparece (PSNR 42,6 dB contra o original; acima de 38 o olho nao separa). Video de fundo pesado nao e detalhe: e a primeira coisa que a pessoa baixa antes de ler qualquer palavra. 🔴 O CONTRASTE AQUI NAO SE MEDE NUM QUADRO SO. O fundo MUDA: medi 15 quadros ao longo dos 30s, no retangulo onde o texto fica. O pior deles deixa o branco em 1,41:1 - ilegivel. Nao e o quadro tipico, e o quadro pior; e o pior e o unico que importa, porque ele vai acontecer. Por isso o veu aqui e OBRIGATORIO e forte no lado do texto. O poster (7 KB) existe pra pagina nao nascer com um buraco preto: ele pinta no primeiro quadro, antes de o video ter dado a primeira volta. */ .faixa-video { position: relative; overflow: hidden; border-radius: 16px; min-height: 420px; display: flex; align-items: center; } .faixa-video > .video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } /* a rede fica ENTRE o video e o veu: por cima da imagem, por baixo da protecao do texto. Fora dessa ordem ela some ou atrapalha a leitura. */ .faixa-video > canvas.rede-viva { position: absolute; inset: 0; z-index: 1; opacity: .55; } .faixa-video > .veu { z-index: 2; } .faixa-video > .trilho { position: relative; z-index: 3; width: 100%; } .faixa-video .faixa-texto { max-width: 46ch; } .faixa-video .bl-h2 { margin: var(--e3) 0 var(--e2); } .faixa-video .faixa-sub { font-size: var(--t-corpo); line-height: var(--lh-corpo); color: var(--texto); max-width: 42ch; margin: 0 0 var(--e3); } @media (max-width: 900px) { /* no celular a faixa fica alta demais pro conteudo caber ao lado do assunto do video: o texto desce e o video vira so a moldura de cima. */ .faixa-video { min-height: 520px; align-items: flex-end; padding-bottom: var(--e4); } .faixa-video .faixa-texto { max-width: none; } } /* --- O DIVISOR - a linha que fecha uma faixa ------------------------- Um fio que nasce e morre em transparente, com um ponto aceso no meio. Serve pra dizer 'aqui acabou o banner' sem desenhar uma borda: borda dura num fundo escuro vira risco, e risco parece defeito de render. O ponto no meio nao e enfeite - e ele que faz a linha ter INTENCAO; sem ele o olho le sujeira, com ele le acabamento. */ .divisor { position: relative; width: 100%; height: 1px; pointer-events: none; background: linear-gradient(to right, rgba(159,196,218,0) 0%, rgba(159,196,218,.20) 24%, rgba(159,196,218,.20) 76%, rgba(159,196,218,0) 100%); } /* ---- A LINHA ROXA (24/08) ---------------------------------------------- Ela nasceu no hero dos professores (`_prova-3d`, `.linha-luz i`) como a FONTE DE LUZ acima da cabeça deles, e foi desligada em 24/08 a pedido do HB — *"quero a fonte de luz sendo só o PLAY"*. Nada tinha sido apagado lá; agora ele pediu ela de volta, sozinha e sutil, acima do carrossel de setores. Virou peça do sistema porque é isso que ela é: um divisor. O roxo é o `#A277F9` da casa — o mesmo da linha de seleção do BL-01 e da tabela de planos. Não é decoração nova, é a mesma tinta. 🔴 AS DUAS CICATRIZES DELA VIERAM JUNTO, e são o que separa esta linha de um `border-top`: 1. **Sem `box-shadow`.** A linha apaga nas pontas por GRADIENTE DE FUNDO — e `box-shadow` não olha o fundo, ele nasce da CAIXA. A caixa tem a largura inteira, então o halo saía de ponta a ponta, com aresta reta, inclusive onde a linha já era invisível: uma faixa fantasma atravessando a página. O HB viu a olho nu antes de mim (23/08). O halo é uma camada com a MESMA máscara, então nasce e morre junto com a linha. 2. **O halo morre ANTES da linha.** O núcleo apaga entre 24% e 76%; o halo, entre 29% e 71%. Nas pontas sobra risco sem luz — e isso é o desenho, não um descuido: uma fonte no meio, e o traço continuando. ⚠️ A `_prova-3d` continua com a versão dela (que é parte de um aparato maior — cone de raios e cometa que correm). Os números do núcleo são os MESMOS nos dois lugares de propósito: se um dia o roxo mudar, muda nos dois, ou eles divergem no primeiro ajuste. */ .linha-roxa { position: relative; width: 100%; height: 1px; pointer-events: none; background: linear-gradient(to right, transparent 0%, transparent 24%, rgba(196,166,252,.07) 28%, rgba(202,174,252,.26) 34%, rgba(214,190,253,.55) 42%, rgba(232,214,255,.80) 50%, rgba(214,190,253,.55) 58%, rgba(202,174,252,.26) 66%, rgba(196,166,252,.07) 72%, transparent 76%, transparent 100%); } .linha-roxa::after { content: ""; position: absolute; left: 0; right: 0; /* simétrico, e não caindo pra baixo como no hero dos professores: lá ela era fonte de luz sobre as cabeças, aqui é divisor — luz que cai só pra um lado num divisor lê como sombra, não como brilho. */ top: -5px; height: 11px; background: linear-gradient(to bottom, transparent 0%, rgba(162,119,249,.26) 46%, rgba(162,119,249,.26) 54%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, transparent 29%, rgba(0,0,0,.14) 35%, rgba(0,0,0,.62) 44%, #000 50%, rgba(0,0,0,.62) 56%, rgba(0,0,0,.14) 65%, transparent 71%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 29%, rgba(0,0,0,.14) 35%, rgba(0,0,0,.62) 44%, #000 50%, rgba(0,0,0,.62) 56%, rgba(0,0,0,.14) 65%, transparent 71%, transparent 100%); filter: blur(4px); } /* 🔴 O PONTO AZUL DO MEIO MORREU AQUI (HB, 21/09/2026): "faca esse efeito da linha divisoria inferior ser o padrao, e nao essa bolinha azul". Ele era `.divisor::after` - um marcador de 6px com halo, que a casa punha em TODO divisor. Em 23/08 o HB ja tinha mandado tirar, mas so na `_prova-3d`, e a cura ficou escopada la ("morre AQUI, na pagina, e nao no arquivo compartilhado"). Hoje ele pediu o contrario: promover pro motor. Entao a luz que corre passa a ser o divisor da casa, e o ponto sai de cena. 🔴 QUEM MUDA COM ISSO: `paginas/digital`, o `catalogo` e a secao 1 da `_piloto-home` - as tres que ainda tinham ponto. As outras ja usavam a luz (a regra da pagina continua la, identica, e nao briga). */ .divisor { overflow: hidden; } .divisor::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, rgba(140,206,255,0) 0%, rgba(140,206,255,.10) 58%, rgba(180,224,255,.42) 84%, rgba(226,244,255,.92) 97%, rgba(255,255,255,1) 100%); background-size: 22% 100%; background-repeat: no-repeat; filter: blur(1.4px); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 16%, #000 32%, #000 68%, rgba(0,0,0,.5) 84%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 16%, #000 32%, #000 68%, rgba(0,0,0,.5) 84%, transparent 100%); animation: correr-esq 7.5s linear infinite; } @keyframes correr-esq { from { background-position: 125% 0 } to { background-position: -25% 0 } } /* quem pediu menos movimento fica com a linha parada, nao sem linha */ @media (prefers-reduced-motion: reduce) { .divisor::before { animation: none; opacity: .35 } } /* --- BL-11 CHEIA - o video ocupando a FAIXA INTEIRA do topo ------------ A faixa normal e um cartao largo dentro do trilho. Esta aqui e o HERO da home: sangra de ponta a ponta, tem altura de hero e o conteudo vai no centro - o arranjo que o site ja usa hoje com a foto do protetico. 🔴 O PROBLEMA DE FORMATO, E POR QUE NAO USEI `cover`: o material e 24:5 (1920x400), e o hero tem ~760px de altura. Com `object-fit: cover` o navegador amplia ate cobrir - a largura viraria 3.648px e ele JOGARIA FORA 45% da cena, de ambos os lados. Some a fresadora, some a tela do CAD: sobra um pedaco do meio, ampliado e mole. Aqui o video mantem a largura inteira, fica centrado na vertical, e o resto da altura e o proprio fundo da secao. Pra nao existir uma faixa com comeco e fim visiveis, ele e mascarado em cima e embaixo - a mesma solucao da cavidade: o degrade morre antes de qualquer borda. A BARRA FIXA do site cobre os primeiros ~72px. O conteudo comeca abaixo disso (padding-top), mas o VIDEO passa por tras dela de proposito: barra translucida sobre video parado no meio da tela le como remendo. */ /* DUAS TENTATIVAS ERRADAS ANTES DESTA, as duas medidas na tela: 1. video centrado + veu forte -> o veu protege o CENTRO, que era onde o video estava: texto perfeito, video invisivel. O mesmo erro que eu ja tinha cometido no campo de filamentos. 2. video na base + texto centrado em cima -> legivel, mas nao e o conceito: o video tem o assunto todo pesando pra DIREITA, e empurrar o texto pro meio joga a promessa em cima da maquina. O certo estava na propria faixa: o assunto do video ocupa a direita e sobra PALCO LIVRE a esquerda. O texto mora nesse palco, o video cobre a faixa inteira, e o veu protege so o lado esquerdo (.veu.esquerda). Aqui `cover` e o certo, ao contrario da versao centrada: o corte come as pontas, e as pontas e que sao o vazio. */ .faixa-video.cheia { /* ALTURA DE IMPACTO (HB, 22/08): 'vamos dar bastante impacto nesse primeiro banner'. De 560 pra min(86vh, 820px) - alto o bastante pra dominar a primeira tela e com teto, senao num monitor 4K deitado o hero empurra TODO o resto pra fora e a pagina parece nao ter conteudo. A ALTURA E UM BOTAO DE ZOOM, e essa e a relacao a entender: o `cover` escala pela ALTURA, entao cada pixel a mais amplia o video e joga mais largura pra fora. Medido nesta pagina, em tela de 1600: 560px -> mostra ~70% da largura do material 666px -> ~50% 774px -> ~43% (ficou zoom demais - HB, 22/08) Parou em min(74vh, 700px): impacto de hero sem ampliar a ponto de a imagem virar textura. Se um dia entrar material com acao nas bordas, este e o primeiro numero a revisitar. */ border-radius: 0; min-height: min(74vh, 700px); padding-block: 96px var(--e5); /* 72px da barra fixa + respiro */ align-items: center; text-align: left; } .faixa-video.cheia > .video { top: 0; bottom: 0; height: 100%; transform: none; object-fit: cover; object-position: 68% center; /* segura o assunto do video a direita */ } /* a linha que fecha o banner, colada na base da faixa */ .faixa-video > .divisor { position: absolute; left: 0; bottom: 0; z-index: 4; } /* no centro, o veu tem que ser o CENTRADO - o .esquerda protegeria o lado errado e deixaria o titulo em cima da parte clara do quadro. */ /* No hero o titulo sobe de h2 (44) pra h1 (60): e a primeira coisa que a pessoa le, e a hierarquia da pagina inteira se organiza a partir dele. */ .faixa-video.cheia .bl-h2 { font-size: var(--t-h1); line-height: 1.08; } .faixa-video.cheia .faixa-sub { font-size: var(--t-corpo-g); } /* 🔴 `ch` NAO SERVE AQUI. A medida ch vale a largura do '0' da fonte DO ELEMENTO - e este container roda no corpo (18px), nao no titulo (64px). Pedi 22ch achando que dava ~700px e deu ~300: o titulo quebrou em cinco linhas e o hero virou poema. Largura de coluna de hero se da em % da faixa, com teto em px; ch fica pro texto corrido, que e onde ele vale. */ .faixa-video.cheia .faixa-texto { max-width: min(46%, 620px); margin-inline: 0; } .faixa-video.cheia .faixa-sub { max-width: 44ch; margin-inline: 0; } .faixa-video.cheia .fileira { justify-content: start; margin-top: var(--e4); } @media (max-width: 900px) { .faixa-video.cheia { min-height: 620px; padding-block: 84px var(--e4); align-items: center; } /* 🔴 NO CELULAR O TEXTO SOLTA OS 46% (medido 27/10, piloto da home): a regra `.faixa-video .faixa-texto { max-width: none }` do bloco de cima tem MENOS peso que a `.cheia` de 46% e perdia calada. No iPhone 12 a coluna ficava com 157px - "Toda tecnologia do TPDPlay..." em seis linhas e a pill da data em tres. Mesmo defeito na `digital`. */ .faixa-video.cheia .faixa-texto { max-width: none; } /* 🔴 E O VEU ACOMPANHA O TEXTO ATE A BORDA. O `.veu.esquerda` vai a zero aos 88% da largura - no PC o texto para nos 46% e nunca chega la; no celular, solto, a ponta das linhas caia na parte clara do video. Medido no pior pixel (dentro das letras, 4 quadros): sub 6,4:1 e fileira 5,7:1 no iPhone 12 - AA, abaixo do piso AAA da casa. A conta: com o video em ~rgb(200) a letra clara so passa AAA com veu >= ~.75 por baixo. Aqui ele cobre a largura toda e ainda deixa a maquina aparecer, mais leve a direita. */ .faixa-video.cheia > .veu.esquerda { background: linear-gradient(100deg, rgba(5,18,28,.93) 0%, rgba(5,18,28,.88) 55%, rgba(5,18,28,.80) 100%); } } /* --- BL-14 - HERO DE PAINEL -------------------------------------------- A abertura em DUAS COLUNAS: a promessa a esquerda, o PRODUTO a direita, e a luz da marca nascendo atras dele. De onde veio: o HB apontou o hero da `adapta.org` (24/08). Nao copiamos - MEDIMOS, com Chrome proprio, e o que trouxemos foi a ANATOMIA e a receita de LUZ; a tipografia, a cor e a regua dos 45+ continuam sendo as nossas. O que a referencia entrega, medido em 1366 e 1920: . fundo da secao ..... radial-gradient(100% 100% at 0 0, #0E1816 -> #0B0F0E) luz nascendo NO CANTO, nao no centro . a luz .............. UM elipse 585x385 da cor da marca, filter: blur(128px), opacity .5, atras da arte . pilulas ............ raio 90px, altura 58, pad 16/32, e uma luz INTERNA no topo: inset 0 6px 16px rgba(255,255,255,.15) . titulo ............. 40px/700, alt 48 (1,2), tracking -1px - e NAO escala: 40px em 1366 e 40px em 1920 . destaque ........... uma frase do subtitulo na cor da marca . prova social ....... 5 rostos + UMA frase com NUMERO . rodape do hero ..... "escolhidos por profissionais de empresas como" + marquise de logos apagados 🔴 O QUE NAO TROUXEMOS, E POR QUE: 1. O TITULO TRAVADO EM 40px. Deles pode: publico de tecnologia, tela grande. Nosso publico e 45+ e o h1 da casa e 64px - trazer o 40 seria importar a regua deles junto com o desenho. Fica o NOSSO --t-h1. 2. A RAZAO 2,0x (40/20). A casa mede 3,5x (64/18) e isso e decisao de 21/08, tomada MEDINDO: hierarquia achatada le como tosca. 3. O CORPO EM 14px do rodape deles. Piso da casa e 14 pra rotulo e 16 pra corpo, e a faixa de marcas usa rotulo, nao corpo. 🔴 O CTA E O DA CASA, SEM MODIFICADOR. Existiu aqui uma pilula opt-in que eu justifiquei como "recurso novo soma" - e nao somava: era a MESMA peca falando diferente numa pagina so, que e o oposto de parecer sistema. O HB cortou em 24/08. A regra que fica: recurso novo soma quando serve a uma pagina DIFERENTE; quando so troca a forma da mesma peca, e divergencia. ------------------------------------------------------------------------ */ .bl-painel { position: relative; overflow: hidden; isolation: isolate; /* a luz nasce no CANTO superior esquerdo - de onde o texto comeca. E a unica coisa da referencia que copiamos de numero: a origem em 0 0. Com a luz no centro, as duas colunas ficam igualmente iluminadas e o olho nao sabe por onde entrar. */ background: radial-gradient(118% 108% at 0% 0%, #0C2334 0%, #081A27 44%, var(--fundo) 100%); /* 🔴 TETO DE ALTURA, NAO SO DE LARGURA (armadilha de 24/08: o hero da _prova-3d ocupava 136% de um notebook 1366x768 e ninguem tinha visto, porque eu so media na horizontal). `svh` e nao `vh`: no telefone a barra do navegador some e volta, e `vh` mede a tela SEM ela. */ min-height: min(86svh, 720px); /* 🔴 CENTRALIZAÇÃO VERTICAL DE VERDADE (HB, 24/08). Ela já existia no `align-items: center`, mas não funcionava: a faixa de setores morava DENTRO do trilho, então o "conteúdo" que o flex centrava era grade + faixa juntas — e o resultado era a grade empurrada pra cima e um vão morto embaixo. Com a faixa virando rodapé da seção (fora do trilho) e o espaço dela reservado no `padding-bottom`, sobra só a grade pra centrar, e ela centra no espaço que realmente lhe cabe. */ display: flex; align-items: center; /* 🔴 O TETO E DE ALTURA, E O `min-height` SOZINHO NAO E TETO - ele e piso. Quem faz o hero caber e o CONTEUDO caber: por isso a folga interna abaixo encolhe em tela baixa, em vez de eu cravar um `max-height` que cortaria texto. Medido: 137,7% de um notebook 1366x768 na 1a versao. */ /* 🔴 A FOLGA DO TOPO SAI DA ALTURA DA BARRA, NAO DE UM NUMERO. A barra fixa e da PAGINA (o `_modelo` usa 88px, a `_prova-3d` usa 72), entao escrever a folga aqui de cabeca garante que um dos dois heros nasce com o titulo colado ou boiando. A pagina declara `--barra-topo` e este bloco obedece; sem declaracao, vale o 88 do modelo da casa. E a mesma cura do "mesmo padrao escrito em N lugares" (LEIA-ME). */ /* 🔴 O RESPIRO DO TOPO SUBIU UM DEGRAU (HB, 24/08: "pode dar mais um respiro no teto do laptop"). --e4 -> --e5: o teto da tampa estava a 32px da barra e a arte lia como se tivesse batido nela. Continua saindo da escala de 8 e da altura da barra, não de um número solto. E o rodapé entra como PADDING, não como margem do conteúdo: é ele que tira a faixa do caminho da centralização vertical logo abaixo. */ padding-block: calc(var(--barra-topo, 88px) + var(--e5)) calc(var(--hp-rodape) + var(--hp-respiro)); } /* ---- O TRILHO DESTE HERO, E POR QUE ELE E MAIS LARGO ------------------ 🔴 O HB, 24/08: *"talvez seja melhor tirar a secao de uma moldura. O original esta bem amplo."* Ele esta certo e da pra medir: a referencia usa 1216px de trilho pra um notebook de 707 - a arte ocupa 58% da largura util. No nosso trilho de 1160 o mesmo desenho apertava as duas colunas, e com os filamentos saindo por tras do notebook ficaria pior ainda: fio precisa de ar pra ler como fio. Por que isto NAO fura a regra do `--bl-teto`: aquela regra existe pra LEITURA - bloco de texto largo cansa. Aqui quem cresce e a faixa; a coluna de texto continua presa em 18ch de titulo e 44ch de subtitulo, que e o teto dos 45+. Largura de ARTE e largura de LEITURA sao duas contas diferentes. 🔴 E O CONTAINER MUDOU DE LUGAR: quem mede agora e o TRILHO, nao a secao. A secao e faixa cheia (do tamanho da janela), entao `cqi` nela era `vw` disfarcado - e o titulo, que e amarrado no container, mudaria de tamanho com a janela mesmo depois de o trilho parar de crescer. E a mesma armadilha do `4.2vw` da cena 3D. 🔴 E ISSO CONSERTOU DUAS REGRAS MORTAS. Com o container na propria secao, as declaracoes que miravam `.bl-painel` DENTRO de `@container bloco` nunca valeram - elemento nao responde a container query de si mesmo. Medido num iPhone SE: a regra pedia `min-height: 0` e o computado era **488,48px**. Nao deu erro nem sintoma; simplesmente nao existia. O que e da secao agora e `@media`, o que e das colunas e `@container`. */ .bl-painel .hp-trilho { width: 100%; max-width: var(--hp-teto, 1440px); margin-inline: auto; padding-inline: var(--margem-lat); container-type: inline-size; container-name: bloco; } /* ---- O EIXO DA ARTE, POR CONTA E NÃO POR CHUTE ------------------------ 🔴 O HB pediu o epicentro dos filamentos NO CENTRO DO LAPTOP. Medido, o centro do laptop em % da seção NÃO é um número: ele anda de 63,0% (2560) a 73,1% (1366), porque o trilho tem teto e a sobra dos lados cresce sozinha. Cravar um `%` acerta numa tela e erra em todas as outras — é a mesma armadilha da `.cena-fundo`, que já custou 57px no pé do neon. Então o eixo sai da MESMA conta que o layout faz: trilho = min(teto, janela) conteúdo = trilho − 2 margens colunas = conteúdo − o vão (--e5) eixo = sobra à esquerda + margem + metade da coluna de texto (.94/2 = .47) + o vão + metade da coluna da arte (1.06/2 = .265) Conferido nas quatro larguras: bate no pixel com a medida do laptop. 🔴 Se a razão das colunas mudar lá em cima, MUDA AQUI TAMBÉM — os dois números são a mesma decisão escrita em dois lugares, e é por isso que estão comentados um ao lado do outro. */ .bl-painel { --hp-teto: 1440px; --hp-rail: min(var(--hp-teto), 100vw); --hp-conteudo: calc(var(--hp-rail) - 2 * var(--margem-lat)); --hp-colunas: calc(var(--hp-conteudo) - var(--e5)); --hp-eixo: calc((100vw - var(--hp-rail)) / 2 + var(--margem-lat) + var(--hp-colunas) * 0.47 + var(--e5) + var(--hp-colunas) * 0.265); /* a altura é estável (45,1% em todas as larguras medidas) */ --hp-eixo-y: 45%; } /* 🔴 DENTRO DO CATALOGO A REGRA PRECISA DE DOIS NOMES. `.app` (do `catalogo-shell.css`) e `.bl-painel` empatam em especificidade (0,1,0) e quem decide um empate e a ORDEM dos arquivos - e o shell entra DEPOIS. Sem `.app.bl-painel` o fundo do palco do catalogo apagava o radial deste bloco, e so ali: a pagina sozinha ficava perfeita. E a mesma armadilha que deixou o logo mono em 34px em 22/08. Ganha-se por ESPECIFICIDADE, nunca mexendo na ordem dos . E `--barra-topo: 0`: no catalogo nao ha barra fixa nenhuma pra descontar, entao a folga de 88px viraria um buraco no topo do palco. */ .app.bl-painel { background: radial-gradient(118% 108% at 0% 0%, #0C2334 0%, #081A27 44%, var(--fundo) 100%); --barra-topo: 0px; min-height: 520px; } /* ---- A LUZ ------------------------------------------------------------ 🔴 A LEI DO NEON VALE AQUI (LEIA-ME, "aura se da em ALCANCE"): subir a opacidade de uma mancha larga engorda o miolo e devolve o fog. Quem faz a luz CHEGAR longe e o desfoque; a forca fica moderada. A referencia resolveu com blur(128px) + opacity .5 - e a medida bateu com a nossa lei, entao ficou o numero dela. 🔴 E ELA MORA NA CAIXA DA ARTE, NAO NO HERO (a licao da `.cena-fundo`, 24/08): o hero e a tela inteira e a arte tem teto, entao luz ancorada em % do hero acerta o alvo numa tela e erra na outra. Dentro de `.hp-arte`, `%` na horizontal e largura da arte e na vertical e altura dela. 🔴 SEM `z-index` AQUI. z-index em elemento posicionado cria contexto de empilhamento, e contexto ISOLA blend - a luz pararia de somar com o fundo e viraria tinta chapada. Ela fica atras por ORDEM no documento. */ .bl-painel .hp-luz { position: absolute; pointer-events: none; /* 🔴 A LUZ E MAIOR QUE A PECA QUE ELA ILUMINA. Na 1a versao ela media 76% da arte e ficava INVISIVEL: mancha menor que o objeto le como sombra colorida, nao como facho. A referencia usa um elipse de 585px num container de 1216 - 48% do TRILHO, e o notebook dela tem 707. Ou seja: a luz e da largura do objeto, transbordando pra fora dele. */ /* 🔴 A LUZ NAO ENCOSTA NA COLUNA DO TEXTO. Com `left: -16%` ela avancava 98px pra esquerda e alcancava a ultima palavra da prova social: a auditoria de pixel devolveu 2,76:1 ali, e o veu nao salva - o facho mora ACIMA dele (dentro da grade), que e o que faz ele iluminar. Facho que invade texto e o mesmo defeito do shimmer do pill em 21/08: o efeito sabotando justamente o que ele decora. Ela sangra pra cima e pra direita, que e onde nao ha leitura. */ left: -4%; top: -20%; width: 122%; height: 138%; border-radius: 100%; background: var(--azul); filter: blur(128px); opacity: .62; } /* a segunda camada e MENOR, mais clara e mais concentrada: e ela que da o ponto quente. Sozinha a de baixo vira nevoa azul uniforme - com as duas, a mancha tem centro. A escassez continua valendo: sao DUAS camadas de UMA luz, nao duas luzes disputando a cena. */ /* 🔴 E A COR CUSTA LUZ - a licao do neon, medida em 24/08: o verde carrega 71% da luminancia, e girar a mesma cor pro azul derruba ~25% do brilho. O `--azul` (#008AD4) sozinho e escuro demais pra ler como facho num fundo escuro; quem estoura e o ciano. Por isso o nucleo nao e enfeite: e ele que faz o olho ler LUZ, e a camada larga so leva a claridade longe. */ /* 🔴 E O NUCLEO E PEQUENO E FORTE, NAO GRANDE E FORTE. Na tentativa de fazer a luz aparecer eu abri o nucleo pra 68% e subi a opacidade: a luz passou a existir, mas UNIFORME - lavou o lado direito inteiro e virou nevoa azul, que e o fog contra o qual a receita do neon avisa. Luz sem centro nao le como fonte; le como filtro por cima da cena. Pequeno e forte com a camada larga por tras: nucleo da o ponto quente, a larga leva a claridade longe. Sao as duas metades da mesma lei. */ .bl-painel .hp-luz.nucleo { left: 8%; top: 2%; width: 44%; height: 46%; background: var(--ciano); filter: blur(72px); opacity: .52; } /* ---- A GRADE ---------------------------------------------------------- 🔴 `minmax(0, 1fr)` e nao `1fr`: `1fr` e `minmax(auto, 1fr)`, e o min-content de um titulo longo estica a coluna dele. So aparece quando aperta - que e exatamente quando a pagina vai pro ar num notebook. */ /* 🔴 A COLUNA DO TEXTO TEM QUE CABER O TITULO EM DUAS LINHAS, e isso e conta, nao gosto: com 471px o h1 de 64 quebrou em TRES e empurrou o hero pra 1057px de altura. A largura da coluna e a variavel livre aqui - o tamanho do titulo esta amarrado nela logo abaixo. */ .bl-painel .hp-grade { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: var(--e5); align-items: center; width: 100%; } /* ---- A COLUNA DA ESQUERDA --------------------------------------------- */ .bl-painel .hp-texto { max-width: 100%; } /* 🔴 O TITULO E AMARRADO NO BLOCO, NAO NA JANELA - a mesma lei da cena 3D (LEIA-ME, "Os padroes da cena"): depois do teto de largura a janela e o bloco deixam de andar juntos, e `vw` passa a mentir. `cqi` e a largura INLINE do container, que aqui e o proprio `.bl-painel`. 🔴 E ELE NAO E O h1 DE 64px DA CASA. Num hero de coluna unica o h1 tem o trilho inteiro; aqui ele tem metade, e 64px em meia coluna da tres linhas. Os 50px de teto mantem a hierarquia em 2,8x sobre o corpo de 18 - dentro da faixa 2,4-2,7 que a revisao de 21/08 fixou, e bem acima dos 2,0x da referencia. A regra dos 45+ manda no CORPO e no ROTULO, que nao mudaram. */ /* 🔴 O PILL ESTAVA COLADO NO TÍTULO. A casa tem a regra `.pill + h1 { margin-top: var(--e3) }` justamente pra isso — e o meu `margin: 0` aqui, sendo mais específico, matava ela. Medido: folga ZERO entre os dois, enquanto todo o resto da escada respirava. Espaçamento que existe no sistema e não aparece na página é sempre alguém tendo sobrescrito. */ .bl-painel .hp-texto .pill + h1 { margin-top: var(--e3); } .bl-painel .hp-texto h1 { /* 3,9cqi do TRILHO (nao mais da secao inteira): em 1440 da 56px, em 1160 da 45. O teto de 52 e o que impede o titulo de brigar com a arte numa tela muito larga. */ font-size: clamp(32px, 3.9cqi, 52px); line-height: 1.12; max-width: 18ch; margin: 0; } .bl-painel .hp-sub { font-size: var(--t-corpo-g); line-height: 1.55; color: var(--texto); max-width: 44ch; margin: var(--e3) 0 0; } /* as folgas internas do hero sao MENORES que o ritmo de secao da casa: aqui sete pecas empilham na mesma dobra, e --e5 entre todas somava 240px de ar que jogavam o hero pra 137% de um notebook. */ /* 🔴 O TRECHO COLORIDO DO SUBTITULO NAO PODE SER O `.destaque`, E ISSO E REGRA ESCRITA QUE EU FUREI. O `.destaque` vai do ciano ao #A277F9, e o tokens.css e explicito: "Abaixo de 24px, nao use" - porque o roxo so sustenta texto GRANDE. Aqui o subtitulo tem 20px, e a auditoria de pixel devolveu 2,80:1. REPROVA. A referencia faz a mesma coisa (uma frase do subtitulo na cor da marca) e pode: o verde clarinho dela e uma cor so, sem degrade que escurece. A nossa equivalente e o `--ciano`, que o tokens.css marca como "pode ser texto" (9,41:1). Mesmo efeito de leitura, dentro da regua. */ .bl-painel .hp-sub .realce { color: var(--ciano); font-weight: 600; } .bl-painel .hp-botoes { margin-top: var(--e4); } /* ---- O CTA É O DA CASA, SEM MODIFICADOR -------------------------------- 🔴 EXISTIU AQUI UM `.cta.pilula` (raio 999 + luz interna no topo) e um `.cta.vazado` (contorno), copiados da referência. O HB cortou os dois: *"o botão de call to action está fora do padrão. Pode remover o segundo botão."* E ele está certo pelo sistema, não só pelo gosto. O `.cta` da casa é uma peça FECHADA: `--grad-legivel` (o único degradê que aguenta texto), raio 12, 18px/700, e o hover que clareia + sobe 2px + ganha sombra. Cada um desses números foi medido uma vez. Um "modificador" que troca a forma não é vocabulário novo — é a mesma peça falando diferente em uma página só, e isso é o oposto de parecer sistema. O segundo botão foi junto: dois CTAs dividem o clique, e a página tem uma coisa pra pedir. Quem quiser oferecer a saída lateral usa link de texto (`.link-marca`), que não disputa. */ /* ---- A PROVA SOCIAL --------------------------------------------------- 🔴 OS ROSTOS DELES TEM 20px. Aqui nao: 20px de rosto e um borrao pra quem tem 55 anos, e a fileira existe pra ser LIDA como gente, nao como enfeite. 40px e o piso que ainda deixa cinco caberem em 320px de tela. A borda na cor do fundo e o que separa um rosto do outro na sobreposicao - sem ela vira uma mancha unica. */ .bl-painel .hp-prova { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e4); flex-wrap: wrap; } .bl-painel .hp-caras { display: flex; } .bl-painel .hp-caras > * { /* 34 e nao 40 (HB, 24/08: "pode diminuir um pouco as fotos"). Continua acima do borrao: em 34px o rosto ainda se le como rosto, e a fileira de cinco agora cabe em 320px com folga. */ width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--fundo); background: var(--fundo-carta); object-fit: cover; display: block; margin-left: -10px; } .bl-painel .hp-caras > :first-child { margin-left: 0; } .bl-painel .hp-prova p { /* 17px e nao 18: o HB pediu pra diminuir, e este e o unico corpo da pagina que pode - ele e um rodape de prova, nao leitura. Piso da casa e 16, entao ainda ha folga de um passo abaixo se precisar. */ margin: 0; font-size: 17px; color: var(--texto-2); max-width: 34ch; } .bl-painel .hp-prova b { color: var(--tinta); font-weight: 700; } /* ---- OS FILAMENTOS: CAMADA DA SEÇÃO, NÃO DA ARTE ---------------------- 🔴 O HB, 24/08, depois de três rodadas minhas de remendo: *"os filamentos têm que se estender para além do laptop, passar por trás dos textos se for preciso. Não quero mais ver essa borda, quero um BG de fundo infinito, e quero os filamentos indo pra longe."* Isso não é um ajuste — é outra arquitetura, e a antiga estava errada desde o começo. Os fios moravam DENTRO de `.hp-arte`, que é a coluna do notebook. Uma caixa daquele tamanho tem quatro bordas VISÍVEIS no meio da cena, e por isso cada borda virava um corte. Eu passei três rodadas curando corte de uma caixa que não devia existir. Agora eles são camada da SEÇÃO, como o grão e o campo de polígonos. As bordas passam a ser as da janela — e borda de janela não é corte, é o mundo continuando fora da tela. Fundo infinito de graça. 🔴 E O z-index É 0, ABAIXO DO VÉU (1). É isso que deixa o fio passar por trás do texto sem derrubar a leitura: o véu escurece o que está atrás dele, então quanto mais o fio entra na coluna de texto, mais apagado ele fica — automaticamente, sem eu ter que segurar a caixa longe da leitura (que foi o remendo da versão anterior). */ .bl-painel .hp-fios { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* 🔴 SEM `transform`, E ISSO É O QUE DESBORRA O FIO. A versão anterior centrava a caixa no laptop com `left: var(--hp-eixo)` + `translate(-50%,-50%)`. O eixo é uma conta, então o deslocamento saía FRACIONÁRIO (medido: `matrix(1,0,0,1,-960,-485.695)`) — e canvas dentro de camada transformada em offset subpixel é RASTERIZADO e reamostrado. O fio saía macio e inchado, com um halo que não existe no motor. A peça canônica do catálogo não tem transform nenhum em cima dela, e é por isso que a linha dela é seca. Comparado lado a lado: halo 7,68px contra 5,40, e o meu borrado por cima. O número maior é do motor (o traço escala com a largura do canvas); o borrão era meu. 🔴 E CENTRAR A CAIXA DEIXOU DE SER NECESSÁRIO: quem ancora o epicentro agora é o `data-foco-alvo` do canvas, que lê o centro do ELEMENTO. A caixa só precisa cobrir a seção — e a vinheta se move sozinha, porque o centro dela é o mesmo `--hp-eixo`, agora usado como POSIÇÃO da máscara em vez de posição da caixa. */ -webkit-mask-image: radial-gradient(ellipse 52% 60% at var(--hp-eixo) var(--hp-eixo-y), #000 0%, #000 30%, rgba(0,0,0,.62) 58%, rgba(0,0,0,.24) 80%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,.34) 82%, rgba(0,0,0,.12) 100%); -webkit-mask-composite: source-in; mask-image: radial-gradient(ellipse 52% 60% at var(--hp-eixo) var(--hp-eixo-y), #000 0%, #000 30%, rgba(0,0,0,.62) 58%, rgba(0,0,0,.24) 80%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,.34) 82%, rgba(0,0,0,.12) 100%); mask-composite: intersect; } .bl-painel .hp-fios canvas { display: block; width: 100%; height: 100%; } /* ---- O PAINEL DO PRODUTO ---------------------------------------------- 🔴 E HTML, NAO PRINT. A referencia usa uma foto de notebook com a tela dentro; a gente desenha a tela com os proprios tokens. Tres motivos, e nenhum e preguica: (1) print de produto envelhece no dia seguinte ao deploy e ninguem lembra de trocar; (2) print nao tem 2x, entao borra em telefone e em 4K; (3) print de UI clara dentro de pagina escura obriga um veu por cima, e ai o produto aparece apagado justamente na hora de provar que ele existe. O custo: quem mexer no produto tem que mexer aqui tambem. Por isso o painel e RASO de proposito - ele mostra a ARRUMACAO do produto (o que tem dentro), nao a tela exata. */ /* 🔴 A ARTE NAO SANGRA MAIS PRA FORA DO TRILHO, E ISSO FOI CORRECAO. Eu tinha copiado da referencia um `margin-right: -64px` - la o notebook termina 61px depois da borda do container. Na PAGINA funciona: a secao e faixa cheia e sobra tela de fora. No CATALOGO a secao e um CARTAO cujo trilho ocupa 1350 de 1352 - nao ha 64px la fora. Medido: a arte terminava **23px depois** da borda do cartao, e o `overflow:hidden` dele cortava o casco E os fios. O HB viu como "ta cortando os filamentos"; o defeito era maior que os fios. A regra que eu tinha (`@container bloco (min-width:1120px)`) nao ajuda: ela mede o TRILHO, e o trilho e largo nos dois lugares. Quem varia e o espaco FORA do trilho, e disso o container query nao sabe. Podia resolver com uma excecao pro catalogo - e seria pior: o espelho passaria a mostrar um desenho que a pagina nao tem. Um comportamento so, nos dois lugares. A amplitude que o HB pediu vem do TRILHO LARGO (1440), nao desses 64px. */ .bl-painel .hp-arte { position: relative; } .bl-painel .hp-painel { position: relative; z-index: 2; border-radius: 18px; border: 1px solid rgba(44,196,255,.20); background: linear-gradient(168deg, #0B2030 0%, #071824 62%, #06141F 100%); /* a sombra faz o painel POUSAR: larga e escura embaixo, e um fio de luz na borda de cima (o mesmo truque do inset da pilula, em escala). */ box-shadow: 0 34px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(199,222,236,.14); overflow: hidden; } /* a barra da janela: tres pontos e o nome. Nao e enfeite - e ela que diz "isto e uma tela", e sem ela o painel le como um card qualquer. */ .bl-painel .hp-barra { display: flex; align-items: center; gap: var(--e1); padding: 12px var(--e3); border-bottom: 1px solid rgba(199,222,236,.10); background: rgba(4,16,25,.55); } .bl-painel .hp-barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(199,222,236,.22); display: block; } .bl-painel .hp-barra span { margin-left: var(--e2); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); } .bl-painel .hp-corpo { padding: var(--e3); } .bl-painel .hp-ola { font-family: var(--f-impacto); font-size: 21px; font-weight: 600; color: var(--tinta); margin: 0 0 var(--e3); max-width: none; } .bl-painel .hp-cartas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); } .bl-painel .hp-carta { border-radius: 12px; padding: 14px; border: 1px solid rgba(199,222,236,.10); background: linear-gradient(160deg, rgba(0,138,212,.20), rgba(71,58,109,.16)); min-height: 104px; } .bl-painel .hp-carta.roxa { background: linear-gradient(160deg, rgba(107,67,239,.24), rgba(71,58,109,.18)); } .bl-painel .hp-carta.ciano { background: linear-gradient(160deg, rgba(44,196,255,.20), rgba(0,138,212,.14)); } .bl-painel .hp-carta b { display: block; font-size: 15px; color: var(--tinta); font-weight: 700; } .bl-painel .hp-carta small { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--texto-2); } .bl-painel .hp-linha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e1); margin-top: var(--e2); } .bl-painel .hp-item { border-radius: 10px; padding: 10px; border: 1px solid rgba(199,222,236,.08); background: rgba(255,255,255,.03); font-size: 12.5px; line-height: 1.35; color: var(--texto-2); } .bl-painel .hp-item b { display: block; color: var(--texto); font-size: 13px; } /* ---- O RODAPÉ DO HERO (24/08) ----------------------------------------- O HB: *"a linha pode ser acompanhada por uma barra na parte inferior, algum efeito glass, aurora roxa, algo do tipo. Quero um efeito rodapé."* Ela deixou de ser "a faixa no fim do trilho" e virou **barra da seção**: sai do trilho, sangra de ponta a ponta e mora colada na base. Isso resolve duas coisas de uma vez — dá o efeito rodapé que ele pediu, e devolve a centralização vertical do hero (ver a nota no `.bl-painel`). 🔴 A ALTURA DELA É UM TOKEN, e o `padding-bottom` da seção lê o MESMO token. São a mesma decisão: se a barra crescer e o padding não, o conteúdo centralizado passa por baixo dela. Dois números iguais escritos em dois lugares divergem no primeiro ajuste. 🔴 MAS SÃO DOIS TOKENS, E ISSO NASCEU DE UM PEDIDO QUE NÃO CABIA EM UM SÓ (HB, 24/08): *"a barra pode ser mais baixa, tem muito espaço vazio nela, e precisamos de alguns px a mais de distância da prova social"*. Com um token só, os dois pedidos se cancelam — encolher a barra puxa o padding junto e o conteúdo desce atrás dela, comendo o respiro que ele acabou de pedir. São coisas diferentes: `--hp-rodape` é o TAMANHO DA BARRA (o vidro, quanto ela pesa no pé da página); `--hp-respiro` é a DISTÂNCIA do conteúdo até ela. O padding continua lendo os dois, somados — a garantia de não passar por baixo segue valendo, só que agora com folga declarada. Medido antes: barra de 84–108px pra uma fita de 35,2px, ou seja **até 72,8px de vazio** lá dentro, e só **21,2px** entre a prova social e a aresta. O de dentro era maior que o de fora — invertido: é a folga externa que separa a barra da página, e a interna que a fita precisa pra não colar. Agora o respiro é maior que o vazio de dentro. 🔴 O GLASS É `backdrop-filter`, e ele SÓ FUNCIONA porque há coisa atrás: os filamentos passam por baixo da barra e aparecem desfocados nela. Numa página sem fundo vivo o mesmo CSS entrega um retângulo liso — vidro sem nada atrás é só vidro. */ .bl-painel { /* a barra: 20% mais baixa. A fita mede 35,2px; com 72–88px de barra sobram 18–26px de cada lado dela — respiro de rodapé, não campo vazio. */ --hp-rodape: clamp(72px, 8vh, 88px); /* a distância do conteúdo até a aresta da barra. É um passo da escala da casa (`--e2`), não um número solto: "alguns px a mais" vira medida quando é um degrau do sistema, e não a estimativa de um dia. */ --hp-respiro: var(--e1); } .bl-painel .hp-marcas { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: var(--hp-rodape); /* centralização vertical do que está dentro: é a barra que centra, não o conteúdo que se ajeita com margem. */ display: flex; align-items: center; /* o vidro: desfoca o que passa por baixo e clareia de leve */ backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); /* a aurora roxa nasce da BASE e sobe morrendo — rodapé tem que pesar embaixo. O violeta é o `--violeta` da casa em alfa baixo: ele nunca carrega texto (3,31:1), e aqui não carrega — o texto tem o véu do próprio degradê escuro por cima. */ background: radial-gradient(ellipse 58% 165% at 50% 122%, rgba(122,80,246,.46) 0%, rgba(107,67,239,.20) 44%, transparent 76%), linear-gradient(to bottom, rgba(5,18,28,.30) 0%, rgba(5,18,28,.70) 100%); } /* a linha roxa é a ARESTA DE CIMA da barra, não um elemento solto acima dela: é ela que faz o vidro ter borda em vez de começar do nada. */ .bl-painel .hp-marcas > .linha-roxa { position: absolute; top: 0; left: 0; right: 0; } /* 🔴 A BARRA SANGRA, O CONTEÚDO DELA NÃO (HB, 24/08: "tem que ter limite no bloco central da página, não pode ser a largura toda"). São duas coisas e é fácil confundir: o VIDRO é rodapé, e rodapé atravessa a tela; a FITA é conteúdo, e conteúdo mora no bloco central como o resto da página. 🔴 E A PRIMEIRA TENTATIVA NÃO CORTOU NADA. Eu tinha posto `padding-inline` com a conta do trilho — mas `overflow: hidden` corta no **padding box**, não no content box: o padding empurra o conteúdo pra dentro e a fita, que transborda, continua pintando de ponta a ponta. Quem corta é a LARGURA. Pior: a sonda que escrevi pra conferir mediu `left + paddingLeft`, ou seja, onde o content box COMEÇA — e confirmou a minha intenção em vez do pixel. Instrumento que mede a intenção sempre concorda comigo. 🔴 E ELA É MAIS ESTREITA QUE O TRILHO, medido na referência: o trilho dela tem 1216 e a faixa de logos, 1000 — 82%. Faixa do tamanho exato do trilho lê como "mais uma linha da página"; um pouco menor lê como rodapé. */ .bl-painel .hp-marcas > .hp-trilha { width: 100%; max-width: min(1120px, calc(var(--hp-teto) - 2 * var(--margem-lat))); margin-inline: auto; } .bl-painel .hp-trilha { overflow: hidden; /* as pontas somem em vez de cortar reto: mascara, nao degrade pintado - degrade pintado precisaria saber a cor do fundo, e o fundo aqui e um radial que muda de tom ao longo da faixa. */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .bl-painel .hp-fita { display: flex; align-items: center; gap: var(--e7); width: max-content; animation: tpd-fita 34s linear infinite; } /* 🔴 A FITA PRECISA DE DUAS COPIAS E DO -50%. Com uma copia so, a volta mostra o vazio; com -100%, a emenda pisca. Duas copias identicas e translacao de metade da largura fecham o laco sem costura visivel. */ @keyframes tpd-fita { from { transform: translateX(0) } to { transform: translateX(-50%) } } /* 🔴 OS LOGOS DA REFERENCIA SAO DECORACAO; OS NOSSOS SAO INFORMACAO. Ela apaga as marcas quase ate sumir porque o que importa ali e o formato do logo, reconhecido de relance. A nossa faixa carrega os SETORES do laboratorio - texto que a pessoa precisa LER. Com .42 de opacidade sobre os filamentos isso ficava ilegivel de verdade, e pior: a auditoria nao pega, porque ela mede a cor DECLARADA contra o pixel do fundo e nao sabe da opacidade do elemento. Instrumento otimista e o pior tipo. */ .bl-painel .hp-fita > * { flex: none; opacity: .62; font-family: var(--f-impacto); font-weight: 600; font-size: 22px; letter-spacing: .04em; color: var(--texto); white-space: nowrap; } /* ---- CELULAR E TELA APERTADA ------------------------------------------ */ /* 🔴 A ORIGEM DOS FIOS É UM PONTO FIXO EM % DA SEÇÃO, e no celular o notebook desce pra baixo do texto - a origem tem que descer junto, senão os fios nascem no meio do título. Quem move é o `data-foco` do canvas, que é lido uma vez; então aqui o que se faz é ESCONDER a camada e deixar o grão sozinho: em coluna única o fio cruzando o texto inteiro vira risco por cima da leitura, e o véu não salva porque a tela é estreita demais pra ter "fora do texto". */ /* 🔴 E ESTA E `@media`, NAO `@container` - eu escrevi `@container` por inercia e a regra NAO PEGOU: container query so alcanca DESCENDENTE do container, e os fios agora sao IRMAOS do trilho, nao filhos dele. No Pixel 7 eles apareceram cruzando o texto inteiro, com a regra escrita e sem efeito nenhum. Mudou o elemento de lugar? confira quem ainda o enxerga. E aqui `@media` e o certo por natureza: a secao e faixa cheia, entao a janela E a medida dela. */ @media (max-width: 700px) { .bl-painel .hp-fios { display: none; } } @container bloco (max-width: 940px) { .bl-painel .hp-grade { grid-template-columns: minmax(0, 1fr); gap: var(--e5); } .bl-painel .hp-texto { max-width: 100%; } /* a luz volta pro alto e pro meio: com uma coluna so, ela ancorada a esquerda deixaria metade do painel no escuro. */ .bl-painel .hp-luz { left: 2%; width: 96%; top: 0; height: 52%; } .bl-painel .hp-luz.nucleo { left: 22%; width: 56%; } .bl-painel .hp-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 🔴 ESTAS DUAS SAO DA SECAO, ENTAO SAO @media E NAO @container. Elas moravam no `@container bloco (max-width:560px)` e nunca valeram, porque `.bl-painel` era o proprio container. Agora o container e o trilho, e a secao volta a ser dirigida por quem sabe medi-la. */ @media (max-width: 620px) { .bl-painel { min-height: 0; padding-block: calc(var(--barra-topo, 88px) + var(--e2)) var(--e5); } } @container bloco (max-width: 560px) { .bl-painel .hp-cartas { grid-template-columns: minmax(0, 1fr); } .bl-painel .hp-carta { min-height: 0; } /* os botoes ocupam a linha inteira: dois pills lado a lado em 320px ficam com 8 caracteres cada e o rotulo quebra no meio da palavra. */ .bl-painel .cta { width: 100%; } /* 🔴 O CORPO NAO DESCE NO CELULAR. Regra 1 da casa - o que encolhe e o espaco, nunca a letra. */ .bl-painel .hp-sub { font-size: var(--t-corpo); } } /* ---- TELA BAIXA (o notebook) ------------------------------------------ 🔴 ESTA REGRA MEDE A ALTURA, E E A UNICA DA CASA QUE FAZ ISSO. Nao e capricho: sete pecas empilham nesta dobra, entao a altura do hero e dirigida pelo CONTEUDO - `min-height` e piso, nao teto, e `max-height` cortaria texto. O que sobra e encolher o AR, e ar so encolhe se alguem perguntar quanta tela existe. Medido: com as folgas cheias o hero da 800px, e um notebook 1366x768 fica com 104,2%. Com estas tres folgas menores ele cabe. O que NAO encolhe aqui: letra nenhuma. Regra 1 da casa. */ @media (max-height: 820px) { .bl-painel { padding-block: calc(var(--barra-topo, 88px) + var(--e2)) calc(var(--hp-rodape) + var(--hp-respiro)); } /* 🔴 E O `padding-bottom` AQUI PRECISA SER O RODAPÉ, NÃO `--e5`. Esta regra reescrevia o padding inteiro (é atalho: `padding-block` põe os dois) e devolvia 48px embaixo — ou seja, em tela baixa o conteúdo centralizado voltava a invadir a barra de vidro. Era isso que deixava o pé do laptop a 9px do rodapé num 1366x768, com a sombra sendo cortada por ela. Atalho que reescreve os dois lados é o tipo de regra que conserta um lado e estraga o outro em silêncio. 🔴 Eu tinha "consertado" pondo um teto menor no laptop aqui — e a regra NÃO PEGAVA: empate de especificidade (0,2,0) com a base, e a base vem depois no arquivo. Ficaria no arquivo parecendo cobertura. Saiu. */ .bl-painel .hp-marcas { margin-top: var(--e4); } } @media (prefers-reduced-motion: reduce) { .bl-painel .hp-fita { animation: none !important; } } /* ---- O NOTEBOOK DESENHADO EM CSS — APAGADO EM 24/08 ------------------- Existiu um segundo notebook, desenhado em CSS (`.hp-laptop.vetor`), feito antes de o Nano Banana entregar o casco foto-real. O HB olhou os dois e cortou: *"a moldura de vetor, vc deleta"*. Não ficou "por via das dúvidas". Duas molduras para a mesma peça é o tipo de repertório que a fábrica NÃO quer: recurso novo soma quando serve a uma página diferente, e este servia à mesma. Guardar o perdedor só garante que um dia alguém ligue o errado. Está no git e nesta nota. */ /* ---- O NOTEBOOK FOTO-REAL (o padrão) e as três molduras --------------- O HB autorizou gerar no **Nano Banana**, e o casco veio de lá: `ferramentas/gerar-laptop-nano.py` pede o notebook de frente com a TELA em magenta chapado e o FUNDO em verde chapado; `recortar-laptop-nano.py` recorta os dois e devolve `obras/laptop/casco.webp` (8 KB, com alfa) mais `casco.json` com o retângulo da tela MEDIDO em % do recorte. 🔴 A TELA CONTINUA SENDO HTML. O casco tem um BURACO onde a tela estava — o painel entra por trás dele. É isso que evita o preço do mockup comum: com um print lá dentro a gente perderia o 2x, a edição por texto e a atualização. Aqui o casco é foto-real e o conteúdo é nosso. 🔴 E O RETÂNGULO NÃO É DE OLHO. Os quatro números abaixo saíram do `casco.json`. Posicionar a tela no olho acerta numa largura e erra na outra, porque o casco escala e o número cravado não. Em `%` os dois escalam juntos. Se o casco for regerado, os números vêm do JSON novo — não se ajusta à mão. TRÊS MOLDURAS, e o padrão é o estado SEM classe (a mesma disciplina do fundo Exocad): assim toda página nova nasce com a moldura boa. (sem classe) …… o notebook foto-real `.nu` ………… só o painel, sem moldura nenhuma (a terceira, `.vetor`, foi apagada em 24/08 — ver a nota acima) */ /* 🔴 A BASE DO `.hp-laptop` VOLTOU, E ELA TINHA IDO EMBORA SEM AVISAR. Quando o HB mandou apagar a moldura de vetor (24/08), eu apaguei o bloco inteiro — e junto foram duas coisas que NÃO eram do vetor e sim do notebook em geral: . `position: relative` — sem ele a caixa da tela (`.hp-tampa`, que é absoluta) passou a se ancorar em `.hp-arte`. Continuou parecendo certo só porque as duas caixas quase coincidem; era coincidência, não regra. . `--lap-b`, a espessura de referência — sem ela o `calc()` da sombra virou inválido e a declaração foi DESCARTADA: a sombra ficou com **altura 0**, encostada no topo do laptop. Sem erro, sem console. É o "o que não migra é o que ninguém cobra", na versão CSS: apagar um bloco leva junto o que estava hospedado nele. Peguei porque fui MEDIR a sombra — no print ela só parecia fraca. 🔴 E ENTROU UM TETO DE LARGURA, porque o casco novo é mais ALTO. O anterior media 888x510 (proporção 1,741); este, com o teclado à mostra, mede 1088x735 (1,480) — mesma largura na tela pede ~18% mais altura. Medido: o pé do laptop encostava no rodapé (3px de folga num 1920 e **−3px** num 1366, ou seja por baixo dele). Proporção de arte que muda não é só estética: ela mexe no vizinho. */ .bl-painel .hp-laptop { position: relative; --lap-b: clamp(7px, 1.35cqi, 13px); /* 🔴 A PROPORÇÃO DO CASCO MUDOU DE NOVO (1,434 -> 1,716 no gpt-2): com a mesma largura, o notebook ficou ~64px MAIS BAIXO. Proporção de arte que muda mexe no vizinho — foi o que aconteceu na ida (o pé encostava no rodapé) e acontece na volta: agora sobra folga embaixo, e é dela que sai parte do respiro novo até a barra do carrossel. */ /* 🔴 560 e nao 620 (HB, 24/08: "da um pouco de respiro na parte inferior do laptop"). O respiro nao veio de mexer no espaco: veio da ARTE. Como a grade centra, encolher o laptop em 42px de altura devolve 21px pra cima e 21px pra baixo - e e embaixo que a folga estava faltando (22px ate o rodape). Empurrar com margem faria a peca subir sem ganhar ar. */ max-width: 560px; margin-inline: auto; } .bl-painel .hp-laptop > .hp-casco { display: block; width: 100%; height: auto; position: relative; z-index: 2; pointer-events: none; /* o casco não pode roubar o clique do conteúdo */ } /* no modo foto a `.hp-tampa` deixa de ser moldura e passa a ser só a CAIXA DA TELA, encaixada no buraco do casco. */ .bl-painel .hp-laptop:not(.nu) > .hp-tampa { position: absolute; z-index: 1; left: 6.617%; top: 2.806%; width: 86.840%; height: 81.250%; /* casco: gpt-2.png | proporcao da tela 1,8336 — impressos pelo `recortar-laptop-nano.py`, nunca digitados por mim. 🔴 CASCO NOVO EM 24/08, E ELE RESOLVEU DOIS PROBLEMAS DE UMA VEZ. O anterior (gpt-1) tinha o NOTCH da webcam descendo 3,3% sobre o buraco — e como o print entra por trás, a ilha comia um pedaço do meio da barra de menu do print (caiu bem em cima do botão "Cursos"). E a tela dele era 1,494, contra 16:9 do monitor onde os prints são tirados: cabiam ao preço de 16% das laterais, justo onde moram as barras do Exocad. Este não tem notch e a tela é 1,834 — o print do Exocad entra perdendo 3,1% da altura, e nada das laterais. 🔴 E OS QUATRO NÚMEROS MUDARAM JUNTOS. Casco novo é JSON novo: quem copia um e esquece o outro fica com a tela do casco velho no lugar errado, sem erro nenhum na tela. 🔴 O casco deste aqui saiu do GPT, não do Nano Banana: o HB rodou o nosso prompt lá e mandou o arquivo. A moldura tem 0,9% de trapézio (a base 10px mais larga que o topo) e isso NÃO atrapalha, porque o painel entra ATRÁS do buraco: onde a tela é mais estreita, quem cobre a sobra é a própria moldura. Trapézio só seria fatal se o painel ficasse por cima. */ padding: 0; border-radius: 3px; background: none; box-shadow: none; } .bl-painel .hp-laptop:not(.nu) > .hp-tampa::before, .bl-painel .hp-laptop:not(.nu) > .hp-tampa::after { display: none; } .bl-painel .hp-laptop:not(.nu) > .hp-base { display: none; } /* ---- A SOMBRA DA BASE (HB, 24/08: "o laptop pode ter alguma sombra") --- O casco veio de fundo verde chapado, então ele não tem sombra nenhuma — e sem ela o notebook FLUTUA, ainda mais agora que a luz da marca passa por trás dele. 🔴 SÃO DUAS SOMBRAS, E CADA UMA FAZ UMA COISA. Uma só não resolve: . a de CONTATO é estreita, escura e quase sem desfoque, colada na aresta da frente — é ela que diz "isto está APOIADO em alguma coisa"; . a de AMBIENTE é larga, fraca e muito desfocada — é ela que dá o peso. Com só a larga o notebook parece pairar sobre uma mancha; com só a estreita, parece recortado e colado. É a mesma lógica das duas camadas da luz, invertida: lá é alcance + núcleo, aqui é ambiente + contato. E as duas andam DENTRO do `.hp-laptop`, não no hero: sombra tem que andar junto com o objeto que a faz. */ /* 🔴 ELA TEM QUE DESCER PRA APARECER. Na 1a versao o pe da elipse ficava 1,5% abaixo do notebook e a mancha inteira caia ATRAS da propria base - sobrava um fio de escuro que nao pesava nada. Sombra que o objeto tapa nao e sombra, e forro. A ambiente desce ~1,2 espessuras e a de contato nasce na propria aresta. */ .bl-painel .hp-laptop:not(.nu) > .hp-chao { /* estas quatro também sumiram com o bloco do vetor — ver a nota acima */ /* 🔴 ELA EXISTIA E NAO APARECIA, e o culpado era o desfoque. Um borrao de 44px com `blur(30px)` se espalha por 100px e chega a quase nada em lugar nenhum - medido no print: o pe do laptop encostava no fundo sem nenhuma mancha embaixo. Desfoque nao e o que faz sombra: o que faz sombra e o CONTRASTE perto do objeto. Sombra e o contrario da luz do neon - la o alcance manda, aqui manda a densidade junto ao pe. Agora: mais baixa (mais dela aparece abaixo do casco), mais densa e com metade do desfoque. Continua leve - e uma sombra de contato, nao um buraco. */ /* 🔴 z-index 0, E NAO -1. Com -1 a sombra sumia: teste com ela pintada de VERMELHO chapado deu **7 pixels** na tela contra **11.296** com z positivo - ou seja, nao era cor nem desfoque, era empilhamento. Ela e filha de uma cadeia com tres contextos aninhados (`.hp-grade` z:2, `.hp-trilho` com `container-type`, a secao com `isolation`), e nessa situacao o z negativo deixou de ser confiavel. A cura nao e descobrir de quem foi a culpa: e parar de depender de z NEGATIVO. A ordem agora e explicita e positiva - chao(0) < tampa(1) < casco(2) - que era o que se queria desde o comeco. */ position: absolute; z-index: 0; pointer-events: none; border-radius: 100%; left: 6%; right: 6%; bottom: calc(var(--lap-b) * -1.9); height: calc(var(--lap-b) * 2.6); background: rgba(0,0,0,.5); filter: blur(16px); } .bl-painel .hp-laptop:not(.nu) > .hp-chao::after { content: ""; position: absolute; /* a de contato: estreita, colada na aresta da frente, e e ela que diz "apoiado". Sem desfoque grande, senao vira a mesma nevoa da de cima. */ left: 13%; right: 13%; top: 10%; height: 30%; border-radius: 100%; background: rgba(0,0,0,.62); filter: blur(6px); } /* 🔴 A TELA TEM ALTURA FIXA (a do buraco), e o conteúdo tem que PREENCHER. Sem isto o painel para na altura natural dele e sobra uma faixa vazia na base da tela — que lê como tela cortada, não como tela cheia. */ .bl-painel .hp-laptop:not(.nu) .hp-painel { width: 100%; height: 100%; overflow: hidden; border: 0; border-radius: 3px; display: flex; flex-direction: column; background: linear-gradient(168deg, #0B2030 0%, #071824 62%, #06141F 100%); } .bl-painel .hp-laptop:not(.nu) .hp-corpo { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--e2); } .bl-painel .hp-laptop:not(.nu) .hp-ola { margin-bottom: 0; } /* ---- as outras duas molduras ------------------------------------------ */ .bl-painel .hp-laptop.nu > .hp-casco, .bl-painel .hp-laptop.nu > .hp-base, .bl-painel .hp-laptop.nu > .hp-chao { display: none; } .bl-painel .hp-laptop.nu > .hp-tampa { padding: 0; background: none; box-shadow: none; border-radius: 0; } .bl-painel .hp-laptop.nu > .hp-tampa::before, .bl-painel .hp-laptop.nu > .hp-tampa::after { display: none; } /* 🔴 NO TELEFONE TODA MOLDURA SAI, inclusive a foto. Medido: com o bloco em 272px o casco deixa a tela do produto com ~215px de largura útil — a moldura passa a ocupar mais tela do que o conteúdo que ela emoldura. */ @container bloco (max-width: 560px) { .bl-painel .hp-laptop > .hp-casco { display: none; } .bl-painel .hp-laptop > .hp-tampa { position: static; width: auto; height: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; } .bl-painel .hp-laptop .hp-painel { height: auto; display: block; border: 1px solid rgba(44,196,255,.20); border-radius: 18px; box-shadow: 0 34px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(199,222,236,.14); } .bl-painel .hp-laptop .hp-corpo { display: block; } .bl-painel .hp-laptop .hp-ola { margin-bottom: var(--e3); } } /* ---- A TELA DO CASCO: tudo amarrado na LARGURA DELA ------------------- 🔴 O BURACO DA TELA TEM PROPORCAO FIXA (1,667) E O CONTEUDO NAO TINHA. Na 1a versao o painel entrou com os tamanhos em px: numa tela de 481px de largura ele pedia ~340px de altura contra 289 disponiveis, e a fileira de atalhos foi CORTADA pelo overflow. Sem erro, sem console - so sumiu. E o defeito piora sozinho: quanto mais estreita a tela, mais o texto quebra, mais alto o conteudo fica, mais coisa some. A cura nao e encolher o texto no olho ate caber numa largura: e amarrar TODO o conteudo da tela na largura DELA (`cqi`), do tamanho de letra ao respiro. Assim a altura acompanha a largura na mesma proporcao e o conteudo mantem a MESMA forma em qualquer tela - que e a unica maneira de caber num buraco de proporcao fixa. Mesma lei do titulo do hero, que e amarrado na cena e nao na janela. 🔴 ISTO NAO FURA A REGRA DOS 45+. O piso de 16px vale pro texto da PAGINA, que a pessoa le. Aqui e a imagem de um produto - o equivalente ao print de tela que a referencia usa. O que a auditoria de contraste cobra (e o que ela mede) continua valendo, e continua passando. */ .bl-painel .hp-laptop:not(.nu) > .hp-tampa { container-type: inline-size; container-name: tela; } .bl-painel .hp-laptop:not(.nu) .hp-barra { padding: 2.114cqi 4.045cqi; gap: 1.288cqi; } .bl-painel .hp-laptop:not(.nu) .hp-barra i { width: 1.563cqi; height: 1.563cqi; } .bl-painel .hp-laptop:not(.nu) .hp-barra span { margin-left: 2.389cqi; font-size: 2.299cqi; } .bl-painel .hp-laptop:not(.nu) .hp-corpo { padding: 3.125cqi 4.045cqi; gap: 2.758cqi; } .bl-painel .hp-laptop:not(.nu) .hp-ola { font-size: 3.77cqi; } .bl-painel .hp-laptop:not(.nu) .hp-cartas { gap: 2.389cqi; } .bl-painel .hp-laptop:not(.nu) .hp-carta { padding: 2.482cqi; min-height: 0; border-radius: 2.024cqi; } .bl-painel .hp-laptop:not(.nu) .hp-carta b { font-size: 2.667cqi; } .bl-painel .hp-laptop:not(.nu) .hp-carta small { margin-top: 1.011cqi; font-size: 2.299cqi; } .bl-painel .hp-laptop:not(.nu) .hp-linha { gap: 1.471cqi; margin-top: 0; } .bl-painel .hp-laptop:not(.nu) .hp-item { padding: 1.746cqi; font-size: 2.16cqi; border-radius: 1.654cqi; } .bl-painel .hp-laptop:not(.nu) .hp-item b { font-size: 2.253cqi; } /* ---- A TELA REAL DENTRO DO LAPTOP (HB, 24/08: "duas telas pra vc brincar") Ate aqui a tela era SEMPRE o painel em HTML, e isso era decisao escrita: HTML nao borra em 2x, edita por texto e envelhece junto com o produto. O print real ganha em UMA coisa que o HTML nao alcanca: ele mostra o SOFTWARE que a pessoa veio aprender. Numa pagina de curso de Exocad, ver o Exocad e argumento; ver o painel do aluno e promessa. Entao nao e "trocar": e ganhar um SEGUNDO estado, e a pagina escolhe. 🔴 QUEM DECIDE E `data-tela`, NAO UMA CLASSE. Classe descreve aparencia; este atributo diz o que a tela ESTA MOSTRANDO, e o JS da pagina de prova le o mesmo atributo que o CSS. Foi a licao de 24/08: renomear classe pra curar o CSS derrubou um `classList.contains()` que decidia a fisica. (sem atributo) ...... o painel em HTML - O PADRAO, como sempre data-tela="curso" ... print da pagina do curso data-tela="exocad" .. print do Exocad em tela cheia O padrao continua sendo o estado SEM nada declarado: pagina nova nasce com o painel vivo, e quem quer print e que se declara. 🔴 E O CORTE NAO E DE OLHO. O buraco tem proporcao 1,494 (do `casco.json`) e os dois prints foram cortados pra 1120x750 (1,4933) pelo `preparar-tela-print.py`, que LE a proporcao do JSON. O `object-fit: cover` aqui e cinto de seguranca pra sobra de arredondamento, nao o mecanismo. */ /* 🔴 O `display: none` MORA FORA DO CONTAINER QUERY, e isso custou uma reprova (24/08). Eu tinha posto as duas coisas — esconder e revelar — dentro do `(width > 560px)`, achando que assim "nada valia no telefone". Vale o contrário: no telefone a regra que ESCONDE tambem nao valia, e as duas imagens apareciam empilhadas, soltas, sob o cartao. Regra que nao existe nao esconde nada; o estado neutro de uma e APARECER. Quem se declara por tela e a REVELACAO, nunca o repouso. */ .bl-painel .hp-laptop .hp-print { display: none; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 3px; pointer-events: none; } @container bloco (width > 560px) { .bl-painel .hp-laptop[data-tela] .hp-painel { display: none; } .bl-painel .hp-laptop[data-tela="curso"] .hp-print[data-tela="curso"], .bl-painel .hp-laptop[data-tela="exocad"] .hp-print[data-tela="exocad"] { display: block; } } /* 🔴 NO TELEFONE O PRINT NAO ENTRA, e isso e regra POR TELA - a mesma licao do BL-15 ("desvanecimento nao e sangria... no celular o mask volta"). La em cima a moldura inteira ja sai (o casco ocupava mais tela que o conteudo que ele emoldura), e o que sobra e um cartao de ~272px. Um print de 1120px espremido em 272 nao mostra o Exocad: mostra um borrao esverdeado. O painel em HTML, esse sim, reflui e continua legivel - por isso ele volta a ser o unico estado la embaixo, mesmo com `data-tela` declarado. As regras acima moram DENTRO do `(width > 560px)` de proposito: assim nao existe empate pra desfazer aqui embaixo. Ganhar por AUSENCIA de regra e mais barato que ganhar por especificidade - e nao depende da ordem do arquivo. */ /* ============================================================================ BL-15 — HERO DE CONVITE (cartao com figura sangrando) Nasceu 24/08/2026. Estreia: a Vic e o atendimento no WhatsApp. O DESENHO: um cartao arredondado, texto e CTA a ESQUERDA, pessoa a DIREITA sangrando pela borda de cima. Fundo do cartao com a trama de pixels vivos e o rastro do PLAY invertido. QUANDO USAR ESTE E NAO O BL-03 (hero de figura): . BL-03 hero de PAGINA - abre a pagina, a figura e o assunto. . BL-15 hero de CONVITE - fecha uma secao ou chama pra uma acao. Cabe no meio ou no pe da pagina, e o texto e curto: uma promessa e um botao. E o bloco de "fale com a gente". 🔴 VEU DA ESQUERDA, NAO O CENTRADO (armadilha 16 da casa): veu centrado nao protege hero de DUAS COLUNAS - ele clareia justo onde o texto mora. Aqui o `.veu.esquerda` escurece o lado do texto e deixa o lado da arte livre. 🔴 A FIGURA SANGRA POR CIMA, NAO POR BAIXO. Cortar a pessoa na altura do queixo com a borda do cartao le como erro; cortar na cintura le como enquadramento. Por isso `align-self: end` e o topo dela passando do cartao. 🔴 O CARTAO TEM FUNDO PROPRIO. Nao herda o fundo da pagina: a trama viva precisa de uma caixa com `overflow:hidden`, senao os quadrados vazam pelo canto redondo (o mesmo motivo de todo padrao viver dentro de `.camada`). 🔴 MAS O `overflow:hidden` SAIU DO CARTAO (24/08, 2a rodada) - e essa e a mudanca que muda o desenho. O HB, com a referencia na mao: *"eu quero que o topo da cabeca dela fique pra fora do solido, em alpha no BG do site"*. Com o corte no cartao, "sangrar por cima" era so uma margem negativa que a propria borda cortava de volta: a figura NUNCA saia. E nao da pra tirar o corte e pronto - sem ele a trama vaza pelos cantos redondos. Entao o corte desceu um nivel: quem recorta agora e a `.cv-caixa`, uma caixa absoluta que hospeda SO os fundos (trama, play, veu, chao) e herda o raio do cartao. O conteudo ficou livre. 🔑 A regra geral, que vale pra qualquer bloco: **corte o FUNDO, nunca o bloco**, quando alguma coisa precisar atravessar a borda. Cortar o bloco inteiro e barato ate o dia em que a arte tiver de sair. */ .bl-convite { position: relative; border-radius: var(--raio-convite, 28px); background: linear-gradient(104deg, #0A1B27 0%, #0C2333 46%, #10344A 100%); isolation: isolate; /* o espaco que a cabeca ocupa FORA do cartao. Sem isto ela sobe por cima do que estiver acima na pagina - sangria sem reserva e invasao. 🔴 A SANGRIA E PROPORCIONAL A FAIXA, e nao um numero fixo: a figura tem a altura do cartao MAIS isto, entao numa faixa baixa a mesma sangria de 72px que servia num cartao de 608 daria uma cabeca fora de escala. Baixou junto com a faixa. */ margin-top: var(--cv-sangria, 56px); } /* 🔴 E O CARTAO PERDEU A CLASSE `.fundo` NO HTML. Tirar `overflow` daqui nao bastou: `.fundo` (a classe generica da casa, `fundos.css` linha 13) traz `overflow: hidden` junto, e era ELA que estava cortando - a sonda mediu `overflow: hidden` no cartao depois de eu ter removido a propriedade daqui, e foi assim que apareceu. Classe generica carrega mais do que o nome diz; quando um bloco passa a ter regra propria pra alguma coisa, ele para de poder herdar o pacote inteiro. O que a `.fundo` dava e o `.bl-convite` ja tinha: `position: relative` e fundo proprio. Lição para o resto da fábrica: **antes de "eu removi e não pegou", procure quem mais declara a mesma propriedade** — grep, não teoria. */ /* a caixa dos fundos: e ela que corta, e so ela. */ /* ---- A CENA (o cenario original da foto, de volta atras dela) ---------- Nasceu 25/08/2026. O HB: *"como uma camada de fundo, voce conseguiria trazer de volta o cenario original nas costas da Vic? mas tem que ser em fusao com o background. Entao temos que preservar a Vic isolada na camada de cima."* 🔴 ELA MORA DENTRO DA `.cv-caixa`, E ISSO E O DESENHO, nao detalhe de implementacao: e a `.cv-caixa` que recorta. Assim a cena PARA na borda do cartao e so a cabeca da Vic continua saindo por cima. Se ela fosse irma da `.arte`, sangraria junto - e cenario sangrando pra fora do cartao le como foto mal colada, nao como fundo. 🔴 O ALINHAMENTO NAO E DE OLHO. O recorte da Vic foi cortado na CAIXA DO ALFA (x=1225 y=15, 599x778 dentro de uma original de 1983x793), entao o quadro dele NAO e o quadro da foto. Os quatro numeros abaixo saem do `ferramentas/cenario-vic.py`, que refaz o recorte com o mesmo modelo e os mesmos limiares e PROVA o encaixe comparando com o PNG que ja esta na peca: deu **0,00/255 de diferenca** nos pixels solidos. E a mesma foto, no mesmo lugar. 🔴 E CADA RAZAO E CONTRA O EIXO CERTO. A `.cv-cena` tem a MESMA caixa da `.arte` (altura do cartao + sangria, ancorada no pe, `aspect-ratio` da figura). Dentro dela, a cena se posiciona em % DESSA caixa - `--cena-larg` e `--cena-dir` contra a largura, `--cena-baixo` contra a altura. Medir contra a largura do CARTAO faria o cenario andar sozinho a cada mudanca de proporcao (`token-css-com-porcentagem-troca-de-eixo`). */ /* ---- A CENA (o cenario original da foto, de volta atras dela) ---------- Nasceu 25/08/2026. 🔴 O DESENHO, na palavra do HB: *"na parte direita da tela, use o fundo do lab. Na parte esquerda, elimine o fundo. A Vic e o elemento de transicao."* Tres frases, e a terceira e a que manda: quem separa os dois lados e a SILHUETA DELA, nao uma borda do layout. 🔴 EU ERREI ISSO UMA VEZ, e vale ficar escrito. Ele pediu "so atras da Vic" e eu recortei na CAIXA dela (`overflow: hidden` no quadro). O lado esquerdo ficou limpo - e o lado DIREITO morreu junto, porque a caixa dela acaba a 95,2%% do cartao e o lab tinha de seguir ate a borda. Cortar na caixa nao e cortar na pessoa: a caixa e um retangulo, a pessoa e uma diagonal. 🔴 E A DIAGONAL E MEDIDA, NAO ESTIMADA. A borda esquerda da silhueta, lida no alfa do PNG linha a linha e ajustada por minimos quadrados, e `x = -0,266*y + 984,5` (px de cartao): **74,6%% da largura no topo, 65,9%% no pe**. O degrade da mascara e PERPENDICULAR a essa reta - por isso o angulo quebrado. As duas pontas da reta caem na mesma posicao do degrade (951,5), que e a conferencia de que o angulo esta certo. 🔴 A MARGEM VAI PRO LADO CERTO, e eu calculei pro lado errado na primeira vez. O ajuste tem residuo dos dois lados; o que faz cena vazar e a reta ficar a ESQUERDA da silhueta - ou seja, o pior ponto e `res.max()` (23px), nao `res.min()`. A rampa comeca 26px DENTRO dela e leva 118px pra abrir: cabe folgado no corpo (a parte mais estreita, no topo, tem 271px). Assim a transicao acontece SOBRE ela - que era o pedido. */ /* 🔴 A TERCEIRA MASCARA (a SILHUETA NEGATIVA da Vic) SAIU EM 25/08 - e ela ERA a "sombra da Vic" que o HB apontou tres vezes. O raciocinio dela era bom: `1 - alfa` faz a cena nao pintar onde ela esta, matando o tom pastel entre os fios. So que suprimir a cena NA FORMA DELA deixa aparecer, exatamente no contorno, o degrade mais escuro do cartao - ou seja, ela projetava a propria silhueta em sombra. Eu tinha tirado a `.penumbra` antes e nao vi o defeito, porque a penumbra escondia esta. 🔑 Provado ligando e desligando camada por camada e comparando o recorte do CABELO contra a referencia do HB, lado a lado (`_cabelo-ab.js`): so o caso "sem a negativa" fica igual ao dele. As outras duas mascaras (o corte diagonal e o desvanecimento do pe) FICAM - sao elas que seguram a cena longe da coluna de texto. 🔴 E o pastel nao volta porque a cura dele nao era esta mascara: era o MODELO de recorte (`birefnet-portrait` com os buracos tapados). Isto aqui era remedio de um mal ja curado por outro lado - e o remedio tinha efeito colateral. O PNG segue em `obras/vic/vic-negativa.png` e o base64 no backup `blocos.css.bak-20260825-antes-tirar-negativa`, se precisar voltar. */ .bl-convite .cv-cena { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* 🔴 `mask-repeat: no-repeat` EXPLICITO: ele nasce `repeat` e ja ladrilhou esta mesma mascara uma vez, transformando desvanecimento em faixa. */ /* 🔴 TRES MASCARAS, E A TERCEIRA E A VIC (25/08, 2a rodada). O HB: *"continua a mesma porcaria de fundo pastel entre os cabelos"* - e ele estava certo desde a primeira vez que apontou. O pastel NUNCA foi defeito do recorte: era a CENA que eu mesmo pus atras dela **passando pelos vaos do cabelo**, que e semitransparente por natureza. Medido ligando e desligando a camada, so nos pixels de alfa parcial da figura: diferenca media **12,58**, pior pixel **58**, e **48,9%% deles mudam mais de 5**. Onde ela e solida: **0,02**. 🔴 E EU TINHA "REFUTADO" ISSO com um recorte so, que por azar caiu num ponto onde a mascara da cena nem chega - e dei 0,00 como prova. Negativa com uma amostra nao e negativa; foi o que me fez gastar tres remedios no lugar errado (descontaminar cor, teto de brilho, puxar pro vizinho). 🔑 A cura e de uma linha de conceito: **a cena nao pinta onde ela esta**. A mascara `vic-negativa.png` e `1 - alfa` PROPORCIONAL, com uma tira opaca a direita (102px no PNG = os 64px de folga entre a caixa dela e a borda do cartao) pra a "parte direita" continuar viva. 🔴 ELA VOLTOU A SER PROPORCIONAL (`1 - alfa`), e o caminho ate aqui vale escrito. Primeiro ela era `1 - alfa`: a cena passava pela franja do cabelo e virava o **tom pastel**. Entao virou CORTE (zero acima de alfa 0,15, ainda erodido 2px): o pastel morreu e nasceu outra coisa - uma **faixa azul contornando o cabelo**, porque na franja (alfa entre 0,15 e 0,5) ela mal aparece e a cena estava morta, sobrando o cartao. Corte abrupto na silhueta vira CONTORNO. 🔑 Nenhum dos dois extremos servia porque o problema nao era a mascara: era **o que estava atras da franja**. Nem parede pastel, nem azul chapado - o que tem de estar ali e a propria cena ESCURECIDA. Isso e a `.penumbra` logo abaixo. Com ela, a mascara pode voltar a ser proporcional (que e o composite correto) sem trazer o pastel de volta. `mask-size: auto calc(100% + sangria)` amarra a altura na caixa dela e a largura sai da proporcao: 701/778 x 488 = 439,7 = 375,7 + 64. Um numero so, e ele fecha. 🔴 E ELA VAI EMBUTIDA (data:), NAO POR `url()` DE ARQUIVO. Mascara por url() em `file://` e BLOQUEADA pelo Chrome - o arquivo existe, o caminho esta certo, e a requisicao volta `net::ERR_FAILED`. O sintoma nao e um erro visivel: a camada inteira some, como se a mascara fosse zero. Como o catalogo e as provas abrem por arquivo, uma mascara que so funciona no servidor e uma mascara que nao funciona. 🔴 E ELA E ERODIDA EM 2px. Resolucao cheia sozinha nao bastou (4,08 de media, 18,6%% dos pixels ainda mudando - pior que a metade da resolucao, 3,40): quem reabre os vaos nao e a resolucao do arquivo, e o NAVEGADOR REAMOSTRANDO a mascara pra caber na camada. A reamostragem suaviza o corte 0/1 e devolve valores parciais justo nos vaos de 1 a 2px. A cura e dar folga a zona de corte - um filtro de minimo de 2px. Medido: sem erosao ... 4,08 de media, 18,6%% dos px mudando 1px .......... 0,51 | 3,2%% **2px ........ 0,04 | 0,3%%** <- e a cena na direita quase nao sente (10,82 contra 11,04) 3px .......... 0,01 | 0,1%% (comeca a comer de graca) 🔑 Mascara que vai ser REDIMENSIONADA precisa de folga no corte. Borda exata num arquivo que sera reamostrado nao chega exata do outro lado. O PNG continua gravado em `obras/vic/vic-negativa.png` como fonte: quem regerar a Vic regera ele e recola aqui (o `tirar-pastel-vic.py` grava). */ -webkit-mask-image: linear-gradient(var(--cena-giro, 104.9deg), transparent 70.49%, #000 79.00%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.22) var(--cena-pe, 22%), #000 calc(var(--cena-pe, 22%) + 16%), #000 94%, transparent 100%); mask-image: linear-gradient(var(--cena-giro, 104.9deg), transparent 70.49%, #000 79.00%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.22) var(--cena-pe, 22%), #000 calc(var(--cena-pe, 22%) + 16%), #000 94%, transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%, 100% 100%; mask-size: 100% 100%, 100% 100%; -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; -webkit-mask-composite: source-in; mask-composite: intersect; } /* A tinta da casa por cima da cena - e o que costura ela no degrade do cartao. Ela mora AQUI (e nao no quadro) de proposito: assim a mascara acima vale pros dois juntos, e a tinta nao pinta onde a cena nao existe. */ .bl-convite .cv-cena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(104deg, rgba(10,27,39,.92) 0%, rgba(12,35,51,.72) 46%, rgba(16,52,74,.58) 100%); mix-blend-mode: multiply; opacity: var(--cena-tinta, .5); } /* 🔴 A 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UMBRA - a cena escurece em volta dela, e e isto que resolve a franja. O HB, 25/08: *"vai conseguir resolver essa sombra tosca?"* - e a "sombra" era o cartao aparecendo numa faixa em volta do cabelo, porque eu matava a cena com corte seco na silhueta. Aqui o raciocinio inverte: em vez de decidir SE a cena aparece atras da franja, decide-se O QUE aparece. A silhueta dela borrada (30px) mascara uma camada com o MESMO degrade do cartao: colado nela a cena vira o proprio cartao, e a poucos px ja e a cena inteira. A franja do cabelo passa a se fundir num escuro continuo - sem faixa, sem pastel. Fisicamente tambem se sustenta: pessoa na frente de um fundo ocupa a luz dele. */ .bl-convite .cv-cena .penumbra { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(104deg, #0A1B27 0%, #0C2333 46%, #10344A 100%); -webkit-mask-image: url("data:image/png;base64,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"); mask-image: url("data:image/png;base64,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"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: auto calc(100% + var(--cv-sangria, 56px)); mask-size: auto calc(100% + var(--cv-sangria, 56px)); -webkit-mask-position: right bottom; mask-position: right bottom; } /* 🔴 O QUADRO E SO O ALINHAMENTO - ele nao recorta nada. Repete a geometria da `.arte`, e e por isso que a cena cai exatamente atras dela. Os numeros saem do `ferramentas/cenario-vic.py`, que refaz o recorte com o mesmo modelo e PROVA o encaixe contra o PNG que ja esta na peca: **0,00/255 de diferenca** nos pixels solidos. */ .bl-convite .cv-cena .quadro { --cena-proporcao: 599 / 778; /* a caixa do recorte da Vic */ --cena-larg: 3.3105; /* largura da cena, em larguras dessa caixa */ --cena-dir: 0.2654; /* o quanto ela passa da direita da caixa */ --cena-baixo: 0; /* o quanto ela passa por baixo */ position: absolute; right: var(--e6); bottom: 0; height: calc(100% + var(--cv-sangria, 56px)); aspect-ratio: var(--cena-proporcao); } /* 🔴 CADA RAZAO CONTRA O EIXO CERTO: `--cena-larg` e `--cena-dir` sao % da LARGURA do quadro, `--cena-baixo` e % da ALTURA. E `width` em %, nunca `cover`: recorte automatico perderia o alinhamento que o script provou. */ .bl-convite .cv-cena .quadro img { position: absolute; right: calc(var(--cena-dir) * -100%); bottom: calc(var(--cena-baixo) * -100%); width: calc(var(--cena-larg) * 100%); height: auto; display: block; filter: saturate(var(--cena-cor, .5)) brightness(var(--cena-luz, .8)) contrast(1.04); } .bl-convite > .cv-caixa { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; } /* 🔴 ELE E UMA FAIXA, NAO UM CARTAO ALTO (HB, 25/08: *"deixar a faixa mais larga e mais baixa... eu tinha te mandado a referencia com uma faixa bem estreita"*). Medido antes: 1080x608, proporcao **1,78** - quase um quadrado deitado, ocupando meia tela de altura. A referencia dele e faixa de verdade, perto de **3:1**. Tres coisas empurravam a altura pra cima, e as tres eram minhas: . `padding: var(--e7)` (96px) em cima E embaixo - 192px so de respiro; . `min-height: 420px`, um piso que ja nao servia pro texto que existe; . a coluna estreita, que fazia o titulo quebrar em 3 linhas. A LARGURA E QUEM RESOLVE AS TRES: bloco mais largo = coluna mais larga = titulo em 2 linhas = menos altura, sem apertar letra nenhuma. Foi por isso que "mais larga" e "mais baixa" vieram no mesmo pedido - e uma faz a outra. O piso continua existindo (senao a faixa colapsa numa pagina de texto curto), so que baixo. */ .bl-convite > .conteudo { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(320px, 1.15fr) .85fr; align-items: center; gap: var(--e5); padding: var(--e4) var(--e6); min-height: var(--cv-altura-min, 300px); } /* ---- a coluna de texto ---- */ /* 🔴 ERA O `46ch` QUE SEGURAVA A ALTURA, e nao a grade. Com o bloco em 1320 a coluna recebia ~700px e mesmo assim o texto ficava em **513** - o teto de 46ch e que mandava. Resultado: o titulo em **3 linhas** (145px) num bloco que sobrava largura, e a faixa alta por causa disso. A regua de legibilidade continua valendo onde ela existe pra valer: no PARAGRAFO, que ja tem `max-width: var(--linha-max)` proprio. Titulo curto nao cansa a leitura - o que cansa e linha longa de texto corrido. Sao dois limites diferentes e estavam colados num so. */ .bl-convite .diz { max-width: 64ch; } /* 🔴 O RISCO E IRMAO DO ROTULO, NAO `::before` DELE - e isso e regra de AUDITABILIDADE, nao de gosto. `auditar-contraste` escolhe elementos-folha e mede o pixel mais claro DENTRO da caixa deles, com o texto apagado. Um `::before` ciano vive nessa caixa e NAO e texto: sobrevive a foto de fundo e vira "o fundo" da medida. Resultado na primeira prova: 1,00:1 REPROVA num rotulo que na verdade esta em 9,41:1 - a decoracao medindo a si mesma. Mesma familia do tracejado que enganou a sonda no BL-14. A cura e tirar o enfeite da CAIXA do texto, nunca afrouxar a regua pra ele caber. */ .bl-convite .rotulo-linha { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--e2); } .bl-convite .rotulo-linha .risco { width: 26px; height: 2px; flex: none; background: var(--ciano); border-radius: 2px; } .bl-convite .rotulo { font-family: var(--f-texto); font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ciano); /* 9,41:1 - pode ser texto */ margin: 0; } /* 🔴 O TETO DO TITULO E DO BLOCO, e ele sobe aqui. A casa define `h2 { max-width: 20ch }` no `tokens.css` - regra boa e deliberada: titulo longo em coluna estreita vira parede. So que ELA era a ultima coisa segurando a altura desta faixa. Com o bloco em 1320 e a coluna em 658, o titulo continuava quebrando em **3 linhas** dentro de 523px, porque 20ch e 20ch em qualquer largura. Numa FAIXA a conta e outra: sobra horizontal e falta vertical, que e o contrario de uma pagina de leitura. 28ch poe este titulo em 2 linhas e devolve ~48px de altura - sem encostar em tamanho de letra, que e linha vermelha (o publico e 45+). E o teto continua existindo: sem nenhum, o titulo iria de ponta a ponta da coluna e ficaria pior que em 3 linhas. */ /* ---- a palavra da marca, em degrade ---- */ /* 🔴 AZUL -> ROXO, QUE E A MARCA - MAS NAO NO ROXO DO `--grad-marca`. A identidade e "azul TPDPlay -> roxo Exocad", e o degrade tem de LER como roxo; o que nao pode e terminar no `#473A6D`, que como LETRA sobre o cartao escuro da **1,81:1** (por isso a regra "o degrade de marca nao aceita texto"). Medi os candidatos como preenchimento de letra sobre rgb(7,23,34): #473A6D roxo Exocad ....... 1,81:1 REPROVA #6B43EF roxo do meio ...... 3,18:1 passa mal #A277F9 o roxo da CASA .... 5,67:1 ok <- este O `#A277F9` ja e roxo desta casa (linha de selecao do BL-01 e o fio da aresta deste cartao), entao nao e cor inventada pra escapar da regra: e a mesma familia, na claridade que a letra exige. 🔑 A regra nao era "tira o roxo", era "nao termina NAQUELE roxo". Eu tinha lido a primeira e entregue um degrade so azul, sem dizer o porque - o HB cobrou, com razao. 🔴 E isto cega o `auditar-contraste`: com `background-clip: text` a cor declarada e `transparent`. Quem mede e o `_contraste-degrade.js/.py`, no pixel do glifo. 🔴 E ISSO CEGA O `auditar-contraste`: com `color: transparent` ele leria a cor DECLARADA e daria um numero sem sentido. Por isso esta palavra se mede por sonda propria (`_contraste-degrade.py`), no pixel do glifo - o mesmo motivo pelo qual `opacity` engana a regua. */ .bl-convite h2 .grad { background: var(--cv-grad-titulo, linear-gradient(96deg, #2CC4FF 0%, #008AD4 46%, #A277F9 100%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .bl-convite h2 { font-family: var(--f-impacto); font-weight: 600; font-size: var(--t-h2); line-height: var(--lh-titulo); letter-spacing: var(--tr-titulo); color: var(--tinta); /* 18,92:1 */ max-width: var(--cv-titulo-max, 28ch); margin: 0 0 var(--e3); } .bl-convite p { font-family: var(--f-texto); font-size: var(--t-corpo-g); line-height: var(--lh-corpo); letter-spacing: var(--tr-corpo); color: var(--texto); /* 13,60:1 */ margin: 0 0 var(--e5); max-width: var(--linha-max); } .bl-convite .acoes { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; } /* ---- os creditos, ao lado dela ---- */ /* 🔴 ELES MORAM DENTRO DA `.arte`, E ISSO E O DESENHO. O pedido e "ao lado dela" - e a largura da figura nao e um numero: ela nasce da ALTURA (`height:100%`, `width:auto`), entao muda com o cartao. Creditos ancorados numa medida da PAGINA ficariam colados nela numa tela e perdidos na outra. Presos a `.arte` com `right:100%`, acompanham a borda esquerda dela de graca, em qualquer tela. 🔑 E vale a licao que ja esta escrita mais abaixo, no `.cv-cena`: camada que existe POR CAUSA de outra tem de saber o dia em que a outra muda de natureza. No celular a `.arte` volta pro fluxo - por isso ha regra explicita la embaixo, e nao um `right:100%` calculando no vazio. */ .bl-convite .cv-creditos { /* 🔴 ELES VIVEM NO PE DO CARTAO, E ISSO FOI MEDIDO, NAO ESCOLHIDO. Na altura do texto NAO CABE: a folga entre a coluna de texto e a figura vai de 99px (1920) a 24px (1280), e a linha "Assistente virtual do TPDPlay" precisa de 241px - em TODAS as telas dava colisao. Abaixados pro pe, eles passam por baixo do texto (que acaba 80px acima do pe) e seguem ao lado dela, que e o pedido. Se um dia o texto crescer pra baixo, esta conta muda: o que protege aqui e a distancia VERTICAL, nao a horizontal. */ position: absolute; right: 100%; bottom: var(--e2); /* 🔴 `width: max-content` NAO E ENFEITE. Com `right:100%` e `left:auto`, a largura disponivel pro encolhimento (shrink-to-fit) e ZERO - a caixa nasce colada na borda esquerda da figura e nao tem pra onde crescer. Sem isto o bloco cai em MIN-CONTENT: medi 85,2px de largura e ~102px de altura, ou seja "Assistente virtual do TPDPlay" empilhado palavra por palavra. Nao da erro, nao some: so fica feio e mais alto que o previsto. */ width: max-content; margin: 0 var(--e3) 0 0; display: flex; flex-direction: column; gap: 2px; text-align: right; max-width: none; } .bl-convite .cv-creditos b { font-family: var(--f-impacto); font-weight: 600; /* 🔴 O PEDIDO FOI "a funcao ficou grande demais em relacao ao nome" - e a cura foi SUBIR O NOME, nao baixar o cargo. O cargo ja esta em 14px, que e o PISO da casa (`--t-rotulo`): 12-13px e proibido, o publico e 45+ com dificuldade visual. Quando a razao entre duas coisas esta errada e a menor nao pode encolher, quem se mexe e a maior. Razao: 1,29 -> 1,57. */ font-size: 22px; line-height: 1.2; color: var(--tinta); letter-spacing: var(--tr-corpo); } /* o cargo em rotulo: mesma familia do `.rotulo` do bloco, pra ler como credito (nome + funcao) e nao como uma segunda frase do texto. */ .bl-convite .cv-creditos span { font-family: var(--f-texto); font-size: var(--t-rotulo); /* 🔴 NAO USA `--secundario` AQUI, E ISSO E MEDIDA. O `--secundario` e o PISO do texto (7,45:1) *sobre o fundo escuro da pagina* - e estes creditos caem em cima do PLAY SOLIDO, que e azul claro. Medido no pixel renderizado: 4,09:1, REPROVA. Sobre o mesmo azul o `--texto` da 7,48:1 - medido, nao estimado: o meu chute tinha sido 10,7. 🔑 A hierarquia (nome > cargo) nao se perde: ela esta no TAMANHO (18 vs 14), na caixa alta e no espacamento - nao na cor. Tabela de contraste teorica para de valer no instante em que entra um fundo. */ /* 🔴 13px E ABAIXO DO PISO DA CASA (`--t-rotulo` = 14px, "nunca 12-13px"). Decisao do HB em 25/08, pedida duas vezes e com o limite ja na mesa. Fica escrito aqui pra ninguem "consertar" isso achando que foi descuido - e pra que, se um dia o publico reclamar de letra pequena, se saiba onde olhar. */ font-size: 13px; line-height: 1.35; color: var(--texto); letter-spacing: .02em; text-transform: uppercase; } /* ---- as pecas de vidro: os canais e o player ---- */ /* 🔴 TUDO EM % DO CARTAO, NUNCA EM px. As duas se posicionam CONTRA a figura (os baloes a esquerda dela, o player cruzando o celular), e a figura nao tem largura fixa: ela nasce da ALTURA do cartao. Em px elas acertariam numa tela e escorregariam na outra - e escorregar aqui nao da erro, da "o player saiu de cima do celular". 🔑 O % de `top`/`left` de um filho absoluto mede a caixa de PADDING do pai, que aqui e o cartao inteiro. Por isso os numeros abaixo se leem direto como "tantos por cento do cartao". 🔴 E NADA DE `filter` NELAS: o brilho ja esta pintado no alfa do PNG. Foi `drop-shadow` sobre alfa fino que sujou o contorno do cabelo em 25/08. */ .bl-convite .cv-canais, .bl-convite .cv-player { position: absolute; z-index: 3; pointer-events: none; height: auto; display: block; /* 🔴 A transparencia e LEVE de proposito: o brilho destas pecas mora no alfa do PNG, entao baixar opacidade tira luz junto - passar da mao aqui nao deixa a peca "mais integrada", deixa apagada. Parafuso proprio pra poder ir e voltar sem mexer em mais nada. 🔑 Efeito colateral bom: o halo escuro do player (medido, cor media rgb(7,46,68), que ESCURECE o que esta atras) tambem enfraquece junto. */ opacity: var(--cv-vidro-alfa, .9); } .bl-convite .cv-canais { /* escada rodada em 25/08 (`_escada-baloes.js`): 58,5 ficava solto, 63 ja encosta o balaozinho no celular, 65 monta na mao dela. Fui a 61, o HB achou longe demais pro outro lado, e o ponto ficou no MEIO do caminho: 59,75 = metade do salto de 58,5 -> 61. */ left: var(--cv-canais-x, 59.75%); top: var(--cv-canais-y, 12%); width: var(--cv-canais-l, 11.5%); /* 🔴 OS BALOES PEDEM MAIS TRANSPARENCIA QUE O PLAYER PRA PARECEREM IGUAIS. Com o mesmo .9 nos dois, o HB viu no player e nao viu neles - e nao e impressao: o player cobre a mao e o jaleco (fundo CLARO, onde qualquer alfa aparece), os baloes flutuam sobre o cartao escuro (onde alfa em peca luminosa quase nao muda nada). Mesma opacidade, efeito diferente, porque quem decide o efeito e o que esta ATRAS. */ opacity: var(--cv-canais-alfa, .78); } /* 🔴 O PLAYER CRUZA O CELULAR - ele nao encosta nele. Na primeira tentativa ele comecava a 79%, que e exatamente onde o aparelho ACABA: ficava colado na lateral, como um cartao solto ao lado da mao, e nao como um audio tocando NAQUELE telefone. A leitura muda inteira com 7 pontos percentuais. 🔴 E OS NUMEROS DE HOJE NAO SAIRAM DO OLHO - eu ja tinha errado duas vezes assim, tateando contra a lembranca de um print comprimido. Eles sairam de CASAMENTO DE TEMPLATE do proprio PNG contra a referencia do HB (`ferramentas/_casar-referencia.py`, erro medio 12,2): left 80,7 / top 41,6 / largura 17,6, em %% do cartao. O erro real era o TOPO - 5,4 pontos baixo demais - e nao o lado, que eu tinha "corrigido" pro lado errado. 🔑 Quando existe o arquivo da referencia, medir contra ELE custa um minuto e acaba com a discussao; olhar o print no chat e chute com cara de ajuste. */ .bl-convite .cv-player { left: var(--cv-player-x, 80.7%); top: var(--cv-player-y, 41.6%); width: var(--cv-player-l, 17.6%); } /* ---- o disclaimer, no pe esquerdo ---- */ /* 🔴 ELE E ABSOLUTO DENTRO DA `.conteudo`, e o `left` NAO E ZERO. Para um filho absoluto o bloco que o contem e a caixa de PADDING do pai - e a `.conteudo` tem `padding: var(--e4) var(--e6)`. Com `left: 0` a nota encostaria na aresta do cartao, desalinhada de todo o resto da coluna; com `var(--e6)` ela cai na mesma vertical do rotulo, do titulo e do texto. 🔴 E ELE FICA EM 14px, que e o PISO (`--t-rotulo`). "Bem pequeno" tem um fundo nesta casa: o publico e 45+ com dificuldade visual, e letra miuda de rodape e exatamente onde a regra costuma ser furada. */ .bl-convite .cv-nota { position: absolute; left: var(--e6); bottom: var(--e3); margin: 0; max-width: none; font-family: var(--f-texto); font-size: 13px; /* idem: abaixo do piso, a pedido */ line-height: 1.35; color: var(--secundario); letter-spacing: var(--tr-corpo); } /* 🔴 ENTRE 900 E 1280 O DISCLAIMER SAI DO CANTO, E ISSO FOI MEDIDO. Ele e os creditos dividem o pe do cartao, um em cada ponta; quando o cartao encolhe as duas pontas se encontram. Medido: folga de 325px em 1920, 125px em 1280 e **-154px em 1100** - sobreposicao de verdade, com o nome dela por cima da nota. Nesta faixa ele desce pro fluxo, numa linha propria abaixo do texto: continua embaixo e a esquerda, so nao mais grudado na aresta. 🔑 `grid-column: 1` e obrigatorio: solto, o auto-flow o jogaria na SEGUNDA coluna - a que existe pra reservar o lugar da figura. */ @media (max-width: 1280px) { /* e os creditos viram pro OUTRO lado da figura. Pendurados a esquerda dela eles avancam 233px pra dentro da coluna de texto, e a partir daqui isso encontra a nota: medido, -224px de folga em 1100. Virados, ocupam a propria faixa da figura. */ .bl-convite .cv-creditos { right: auto; left: 0; margin: 0 0 0 var(--e2); text-align: left; } .bl-convite .cv-nota { /* `justify-self: start` NAO E ALINHAMENTO, E TAMANHO DE CAIXA: como item de grade a nota ocuparia a coluna INTEIRA (~700px de caixa pra ~250px de texto) e continuaria "colidindo" com os creditos sem um pixel de tinta encostar. Encolhida, a caixa passa a valer o que se ve. */ position: static; grid-column: 1; justify-self: start; margin-top: var(--e3); } } /* ---- o fio roxo que desenha a aresta esquerda ---- */ /* 🔴 O CARTAO NAO TEM BORDA: no lado direito a cena e o degrade ja o desenham, mas a esquerda e escuro sobre escuro e a aresta simplesmente nao existe. Este fio a devolve - e MORRE antes da metade pra nao virar moldura: quem tem de segurar o olho la e a foto, nao um contorno. 🔴 A mascara e que faz o degrade, nao a cor: um `border-color` com alfa apagaria o fio inteiro por igual. Aqui ele nasce solido na aresta e some a 58% da largura - "pouco mais da metade", medido no proprio token. 🔴 `z-index: 3` porque a `.arte` e a `.conteudo` vivem em 2: fio de aresta por baixo do conteudo nao e aresta, e risco. */ .bl-convite::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border: 1px solid var(--cv-fio, #A277F9); border-radius: inherit; -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.9) 26%, transparent 58%); mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.9) 26%, transparent 58%); } /* ---- a coluna da arte ---- */ /* 🔴 A FIGURA SAIU DO FLUXO, E SEM ISSO ELA NUNCA SAIRIA DO CARTAO. Enquanto ela era uma celula da grade, valia um circulo vicioso: a figura cresce -> a linha da grade cresce -> o cartao cresce junto -> ela continua cabendo dentro. Margem negativa nao quebra isso; ela so muda de onde a caixa e medida, e o `align-self: end` alinhava o FIM, que ja estava no lugar. Medido antes de trocar: o topo da figura ficava **50,7px ABAIXO** do topo do cartao, com todas as margens negativas aplicadas e nenhum erro. 🔑 Quem tem de atravessar a borda nao pode ser quem define a borda. Agora a figura e absoluta, ancorada no PE do cartao, e a altura dela e declarada: a do cartao MAIS a sangria. Ou seja, o quanto ela sai e um numero que se le no CSS e se confere no pixel - nao o resto de uma conta de margens. E a coluna vazia da grade continua existindo: e ela que segura o texto longe da figura. Reservar espaco e trabalho da grade; sair da borda e trabalho da figura. */ /* 🔴 A FIGURA APARECE INTEIRA. NADA DE `object-fit: cover` AQUI (HB, 24/08: *"vc cortou os bracos dela sem motivo"*). Eu tinha estreitado a caixa dela pra 410px e deixado o `cover` cortar o que sobrasse - a intencao era resolver uma COLISAO: com a largura livre, a foto (599x778) precisa de ~523px pra ficar mais alta que o cartao, e ai o ombro dela chegava perto da terceira linha do paragrafo. O erro nao foi a conta, foi a TROCA: pra ganhar um respiro de texto eu amputei os bracos de uma pessoa - e bracos, nesta foto, sao o assunto (ela esta segurando o celular e apontando pra tela; e isso que diz "atendimento no WhatsApp"). Recorte de foto e o ULTIMO parafuso a se girar, nao o primeiro, e nunca sem o HB ver. A colisao continua aberta e vai ser tratada por outro lado - largura da coluna, tamanho do texto, posicao da figura. O que nao volta e o corte. */ .bl-convite > .arte { position: absolute; z-index: 2; right: var(--e6); bottom: 0; height: calc(100% + var(--cv-sangria, 56px)); pointer-events: none; /* a figura nao rouba clique do CTA */ } .bl-convite > .arte img { height: 100%; width: auto; display: block; /* 🔴 CORTE RETO, NAO DESVANECIMENTO. A primeira versao apagava o pe dela com `mask-image` e o resultado lia como "sumindo no ar", nao como enquadramento - a figura ficava flutuando. Quem corta e a BORDA do cartao: corte reto na cintura le como foto, e e o que a referencia do HB faz. (Desde a 2a rodada quem corta e a `.cv-caixa`, nao o cartao - o cartao deixou de ter `overflow` pra a cabeca poder sair.) Sem aura: aura e pra PECA (armadilha 32 - cavidade bucal atras de um rosto e absurdo). */ /* 🔴 A SOMBRA SAIU (25/08, e ela estava aqui desde antes de hoje). O HB apontou "desastre no alpha do cabelo" e o defeito nao era o alfa: era este `drop-shadow`. Ele segue o ALFA, entao **cada fio de cabelo projeta sombra** - e 48px de borrao em volta de fio de cabelo viram um veu escuro grudado no contorno, que suja o azul e apaga os quadradinhos da trama perto dela. Medido, com e sem, na regiao do cabelo: **39,1% dos pixels mudam mais de 4**. 🔑 A regra: `drop-shadow` em recorte com alfa fino (cabelo, folhagem, fumaca) nao le como sombra - le como sujeira de recorte. Quem tem de apoiar a figura e uma forma PROPRIA (aqui a `.chao`, que ja existe e ja faz isso), nao a silhueta dela borrada. Se um dia precisar voltar, o parafuso esta aqui: `--cv-sombra`. */ filter: var(--cv-sombra, none); } /* ---- o pe do cartao, onde a figura toca ---- */ .bl-convite .chao { position: absolute; z-index: 1; pointer-events: none; left: 50%; bottom: -6%; transform: translateX(-50%); width: 62%; height: 26%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(44,196,255,.20) 0%, rgba(44,196,255,.07) 42%, transparent 72%); } /* ---- telas menores --------------------------------------------------- 🔴 NADA DE `flex-wrap` (armadilha 24): ou fileira, ou coluna. Abaixo de 900 a arte vai pro topo e o texto embaixo, centralizado - e a figura para de sangrar, porque sem coluna ao lado o corte perde o motivo. */ /* 🔴 O PONTO DE EMPILHAR SUBIU DE 900 PRA 1024 (25/08), e nao foi gosto: com creditos ao lado dela E disclaimer no pe esquerdo, a faixa de duas colunas deixou de caber antes do que cabia. Medido: em 1100 sobram 49px entre a nota e os creditos; em 960 faltam 116px - o nome dela em cima da nota. A partir daqui o cartao empilha (figura em cima, texto embaixo), que e um caminho ja provado, em vez de espremer tres coisas numa linha que encolheu. O numero saiu de VARRER a faixa, nao de escolher um redondo: 1160 sobra 146px, 1100 sobra 49px, 1060 ja falta 16px. O corte fica em 1120. 🔑 Quando entra peca nova numa faixa, o ponto de quebra e' PARTE da peca: o layout que cabia com dois elementos nao cabe com quatro. */ @media (max-width: 1120px) { .bl-convite > .conteudo { grid-template-columns: 1fr; padding: var(--e5) var(--e4) 0; gap: var(--e4); min-height: 0; text-align: center; } .bl-convite .diz { max-width: none; margin: 0 auto; } .bl-convite p { margin-left: auto; margin-right: auto; } .bl-convite .acoes { justify-content: center; } /* 🔴 NO CELULAR NAO HA SANGRIA: a figura vira a primeira coisa do cartao, centrada, e nao existe "sair por cima" de nada. A reserva do topo sai junto - reserva sem sangria e so um buraco. */ .bl-convite { margin-top: 0; } /* 🔴 NO CELULAR ELA VOLTA PRO FLUXO. Nao ha coluna ao lado, entao nao ha de que sair - e figura absoluta numa coluna unica passaria POR CIMA do texto. Ela e a primeira coisa do cartao no HTML, e e por isso que aparece em cima sem precisar de `order`. */ .bl-convite > .arte { position: static; height: auto; width: 100%; max-width: 320px; margin: 0 auto; display: block; } .bl-convite > .arte img { height: auto; width: 100%; } /* 🔴 AQUI O DESVANECIMENTO VOLTA - e so aqui. No desktop quem corta a figura e a BORDA do cartao, e corte reto le como enquadramento. No celular ela nao encosta em borda nenhuma: fica no meio do cartao e o corte reto vira recorte mal feito pairando no ar. Mesma peca, dois motivos diferentes - por isso a regra e por TELA, nao global. */ .bl-convite .arte img { -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 99%); mask-image: linear-gradient(to bottom, #000 68%, transparent 99%); } .bl-convite .rotulo-linha { justify-content: center; } /* 🔴 AQUI ELES SAEM DE PERTO DELA E VIRAM LEGENDA. No celular a `.arte` e estatica: um `right:100%` passaria a medir o CARTAO (o primeiro ancestral posicionado) e jogaria os creditos pra fora da tela, calado. Estaticos, eles caem logo abaixo da figura, centrados como o resto do cartao. */ .bl-convite .cv-creditos { position: static; margin: var(--e2) auto 0; text-align: center; align-items: center; } /* no telefone a nota volta pro fluxo, no fim do cartao e centrada como o resto - "canto inferior esquerdo" nao existe numa coluna unica. */ .bl-convite .cv-nota { position: static; margin: var(--e3) auto 0; text-align: center; } /* e o fio some: numa coluna unica ele cortaria o cartao no meio da altura, nao na aresta. Aresta que so existe numa direcao nao sobrevive a virada de layout - a mesma licao do `.cv-cena`. */ .bl-convite::after { display: none; } /* 🔴 A CENA SAI NO CELULAR, e nao e economia de peso: e que ela deixa de fazer sentido. O quadro da cena repete a geometria da `.arte` do DESKTOP (absoluta, ancorada no pe, a direita) - e aqui a figura volta pro fluxo, centrada e com teto de 320px. O cenario ficaria ancorado num lugar onde ninguem mais esta: deixaria de ser "o que ha atras dela" e viraria uma foto borrada no canto. 🔑 A regra que vale pra fabrica: camada que existe POR CAUSA de outra some junto quando a outra muda de natureza. Alinhamento nao sobrevive a mudanca de layout so porque o CSS ainda calcula. */ .bl-convite .cv-cena { display: none; } /* 🔴 E AS DUAS PECAS DE VIDRO SAEM PELO MESMO MOTIVO DA CENA: elas existem POR CAUSA da figura no layout de duas colunas - o player CRUZA o celular, os baloes flutuam a ESQUERDA dela. Aqui a figura volta pro fluxo, centrada e com teto de 320px: o player descolava e ficava boiando sozinho na direita, e os baloes caiam em cima do jaleco. Conferido no render, nao deduzido. Camada que existe por causa de outra some junto. */ .bl-convite .cv-canais, .bl-convite .cv-player { display: none; } /* 🔴 E O DISCLAIMER CLAREIA AQUI, e isto e MEDIDA. O cartao empilhado e alto, e o degrade (104deg, que termina em #10344A) poe o fim CLARO exatamente no pe - onde a nota mora. Medido no telefone, com o mesmo recuo de amostra da regua da casa: **2,82:1 no Galaxy S9+** e 4,74:1 no Pixel 7, contra 7,33:1 no desktop. O `--secundario` e o piso do texto sobre fundo ESCURO; aqui o fundo deixou de ser escuro. 🔑 Legibilidade ganha de discricao - a nota fica um tom mais forte so onde ela precisa, nao na peca inteira. */ .bl-convite .cv-nota { color: var(--tinta); } /* mesmo caso no cargo: empilhado ele cai sobre o pe DESVANECIDO da foto (o jaleco branco por baixo), e o `--texto` desce a 5,23:1 no Galaxy S9+. A hierarquia nome/cargo nao depende da cor - ela esta nos 22px contra 14 e na caixa alta. */ .bl-convite .cv-creditos span { color: var(--tinta); } }