/* ════════════════════════════════════════════════════════════════════════════ SOMA · maquete.css — a cidade da assistência, na seção 04 Substitui o slider das pontas. Quatro PNG recortados empilhados em camadas de profundidade, três deles clicáveis, e um painel que responde ao clique com os cards de cada frente. DEPENDE DE styles.css cor, tipografia, easing soma-editorial.css --e-* (espaço), --s-* (sombra) e a revelação de cena page-home.css .home-sec / .home-wrap / .pontas-rotulo / .pontas-linha maquete.js o clique, o teclado e a paralaxe POR QUE ESTE ARQUIVO EXISTE E NÃO ENTROU NO page-home.css A maquete tem geometria própria (um sistema de coordenadas em % sobre a caixa da placa, calibrado em seis rodadas contra o render) e uma coreografia de entrada com quatro relógios. Isso não é "mais uma seção da home" — é um componente. Fica em arquivo próprio, com prefixo próprio, aditivo. REGRAS DA CASA QUE VALEM AQUI · Nenhuma cor literal: tudo sai de token, e translucidez sai de color-mix(). · Só transform, opacity, clip-path e filter se movem. · prefers-reduced-motion desliga tudo e a composição final fica desenhada. · Alvo de toque mínimo de 44x44 px, inclusive quando a peça é menor que isso. ════════════════════════════════════════════════════════════════════════════ */ /* ══ 0 · O SISTEMA DE COORDENADAS ════════════════════════════════════════════ A placa é a régua. No arquivo 1x ela mede 1200 x 479 px, e TODA posição de peça é percentual sobre essa caixa: `--x` e `--w` sobre a largura, `--y` sobre a altura. Os números vêm da calibração — não são estimativa de olho, foram medidos exigindo chão sólido embaixo de cada coluna de pixel do corpo da peça. `--pe` é onde o corpo sólido termina, em % da altura da própria peça. Não é 100 porque depois dele ainda há sombra macia no arquivo. É esse ponto que ancora o transform-origin (a peça cresce a partir do chão, não do centro) e a sombra de contato. */ .maquete { --persp: 1400px; /* lente longa: quase axonométrica, ar de maquete */ --ceu: 104px; /* o vão acima da placa por onde as peças caem */ --lupa: 1; /* aproximação da cena — só sobe no celular */ --painel-h: clamp(320px, 54svh, 500px); --assento: clamp(2px, .42vw, 5px); /* o quanto a peça passa do ponto ao pousar */ /* as quedas. A assimetria pedida mora em TRÊS eixos ao mesmo tempo — atraso, duração e distância — nunca só no atraso. Aqui está a distância. */ --q-placa: clamp(26px, 3.2vw, 54px); /* O TETO DO HOSPITAL É 86 E NÃO 98, E O MOTIVO É GEOMÉTRICO. A `.home-wrap` trava em 1440 px: daí para cima a placa continua com 726 px e o hospital com 181 px — a cena para de crescer, mas o `6vw` não parava, e a partir de ~1630 px ele batia no teto antigo de 98. Some a isso o `scale(1.05)` do quadro 0%, que com origem em `50% 98%` empurra o topo mais 0,05 × 181 × 0,98 ≈ 8,9 px: 98 + 8,9 = 107 contra os 104 px de `--ceu`. Resultado medido em 1920: o telhado do hospital DECAPITADO em 6,7 px pelo `overflow: clip` aos 1019 ms, com a peça já opaca. Em 1440 o `6vw` já dá 86,4 — o teto novo não muda nada aqui e some com o corte lá em cima. A ambulância e a clínica nascem no meio da placa e nunca alcançam o topo (medido: 110 px e 101 px de folga em 1920), por isso só este mudou. */ --q-hosp: clamp(46px, 6vw, 86px); --q-clin: clamp(34px, 4.4vw, 74px); --q-amb: clamp(52px, 6.8vw, 112px); /* a deriva da paralaxe: quanto o olho se desloca. O JS escreve --mx/--my em -1..1; a conta vira deslocamento de origem da perspectiva, e cada camada responde na proporção da sua profundidade. A peça da frente anda ~8px. */ --mx: 0; --my: 0; } /* `center` e não `start`: o painel é mais alto que o palco, e alinhados pelo topo sobrava um palmo de navy vazio embaixo da maquete — a seção abria torta, e justamente no estado inicial, que é o pior caso (hospital, dez cards). Centrado, as duas colunas se equilibram em qualquer bloco. */ .maquete-cena { align-items: center; display: grid; gap: var(--e-6); /* 1,35 e não 1,5: o painel precisa de largura para caber DUAS colunas de card com foto legível. Abaixo de ~520px de painel a grade dos dez cards cai para uma coluna e a rolagem interna dobra de tamanho. */ grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); } /* ══ 1 · O PALCO ═════════════════════════════════════════════════════════════ Três caixas encaixadas, cada uma com um trabalho só: .maquete-palco dá o céu por onde as peças caem e corta as beiradas .maquete-vidro é a caixa da placa; no celular fica maior que o palco .maquete-mundo é o container de perspectiva — o olho da cena O corte acontece na borda do PADDING, então o `--ceu` é altura de verdade: as peças caem dentro dele sem serem decepadas. */ .maquete-palco { overflow: clip; /* ── A MARGEM DE CORTE ──────────────────────────────────────────────────── O eixo VERTICAL ganhou folga quando as linhas de topo e base foram corrigidas; o eixo INLINE não ganhou nenhuma. A caixa de conteúdo do palco tem exatamente a largura da `.maquete-vidro` — as duas em x=312 com 703,140625px em 1920 — então o `overflow: clip` ceifava as duas `drop-shadow` da `.maquete-placa` rente à borda lateral. As sombras desfocam 18px e 72px: alcançam ~80px para os lados e batiam no corte com alfa ainda vivo. Medido por diferença de capturas (página normal MENOS `.maquete-vidro{visibility:hidden}`, média de 504 linhas da faixa de corte): a contribuição da maquete era exatamente 0,000 na coluna 311 e saltava para −0,87 G / −1,16 B na coluna 312 — corte, não rampa; pico de 4 níveis de 8 bits na linha 4794, 378 linhas com degrau ≥ 1 nível. Do outro lado o mesmo: −0,96 G / −1,18 B na última coluna pintada (1014), zero na seguinte. Com esta margem o degrau cai para +0,10 G / +0,08 B na esquerda e +0,03 G / +0,06 B na direita — abaixo de um décimo de nível. Só a forma dos quatro lados existe no motor: `-left`, `-right`, `-inline` e `-block-end` respondem `false` a `CSS.supports`. Soltar os quatro lados afrouxa também o céu por onde as peças caem — conferido em captura, no estado assentado nada mais aparece fora do palco. */ overflow-clip-margin: 80px; /* ── O PÉ TEM 120px E NÃO OS 8 DE `--e-2` ───────────────────────────────── A placa projeta duas sombras (ver `.maquete-placa`): uma curta de alcance 28px e uma longa de 116px — `0 44px 72px`, deslocamento mais desfoque. Com os 8px de `--e-2`, a sombra longa bateria no `overflow: clip` 108px antes de acabar, e o corte devolveria a aresta. CORREÇÃO DE UM REGISTRO ANTERIOR: este número foi posto aqui acreditando que o corte do palco ERA a linha dura reportada. Não era. Medido por diferença de capturas, naquele momento a tinta da maquete acabava 119px ACIMA do corte — este pé estava inerte. Quem ceifava a sombra era a máscara da `img` (a explicação está em `.maquete-placa`). O pé continua necessário, mas por ordem: com a sombra devolvida à caixa de fora ela alcança 5069 e o corte fica em 5073 — quatro pixels de folga. Com os 8px de antes, voltaria a ser decepada. Ou seja: os 120px só passaram a ter função DEPOIS do conserto de verdade. `overflow-clip-margin` resolveria sem mexer em altura, mas conferido no motor: só a forma dos quatro lados existe — `overflow-clip-margin-bottom` e `-block-end` respondem `false` a `CSS.supports`. E soltar os quatro lados soltaria o céu por onde as peças caem, que é a razão de o corte existir. Os 112px a mais não ficam vazios: é onde a sombra pinta. Para reverter, é este número — mas reverter devolve o corte. */ padding-block: var(--ceu) 120px; /* ── E O MESMO DEFEITO ESTAVA NO EIXO INLINE ────────────────────────────── O pé acima resolveu a vertical e deixou a horizontal intacta: a caixa de conteúdo do palco tem EXATAMENTE a largura do `.maquete-vidro` — as duas 703,14px começando em x=312 —, porque só `padding-block` foi mexido. As sombras têm desfoque de 18 e 72px, alcançam ~72px para os lados, e batiam no `overflow: clip` com alfa ainda vivo. Medido no composto, degrau de UMA coluna, média de 268 linhas da placa: esquerda x 312 dG −4,25 dB −5,35 (453 linhas com |degrau|≥1) direita x 1015 dG +3,18 dB +3,67 (425 linhas) Isolado por diferença: zero absoluto na coluna anterior, salto na coluna 312. Corte, não rampa. Prova causal: `overflow: visible` no palco derruba para −0,72/+1,06, e `filter: none` na placa derruba igual — qualquer um dos dois mata, o que confirma que é a sombra sendo ceifada pelo corte. `overflow-clip-margin` afrouxa o corte sem mexer em uma linha de layout. Medido: dB −5,35 → −0,99 na esquerda, +3,67 → +1,11 na direita. De quebra o degrau da base cai de dG 1,54 para 0,30. RESSALVA: solta os quatro lados, inclusive o topo — as peças passam a ficar visíveis ~80px acima do palco durante a queda. No estado assentado nada muda. Conferido: só o atalho existe no motor (`-left`, `-right`, `-inline` e `-block-end` respondem `false` a `CSS.supports`), então não dá para soltar só a horizontal. A alternativa medida — `padding-inline: 80px; margin-inline: -80px` — dá resultado melhor (−0,52 / +0,64) e mantém a geometria da placa em 1920/1440/1024, mas a 390 encolhe a placa de 483,59 para 434px e exigiria guarda de media query. */ overflow-clip-margin: 80px; position: relative; } /* ── A ATMOSFERA ───────────────────────────────────────────────────────────── Sem isto a maquete é uma laje branca colada sobre cor chapada: a borda encontra o navy em corte seco e a peça inteira lê como recorte, não como objeto no espaço. Três camadas de nada resolvem, e nenhuma delas custa um byte de imagem. `::before` a poça de luz — o modelo está sobre uma mesa iluminada de cima, e a mesa devolve luz em volta dele `::after` a vinheta — as beiradas do palco caem para o navy, que é o que faz o olho ir ao centro em vez de ao corte drop-shadow a sombra que a placa projeta no chão escuro É a mesma gramática de `#a-soma`: lá a fotografia afunda no navy por véu, aqui o modelo emerge dele por luz. As duas seções passam a conversar. */ .maquete-palco::before { content: ''; inset: 0; pointer-events: none; position: absolute; } /* ── O DITHER ──────────────────────────────────────────────────────────────── Esta poça é ainda mais pobre em níveis que a da consultoria. Medido reconstruindo o composto em canvas sobre o navy do `html`, no raio vertical: canal verde 28 → 10 ou seja 18 NÍVEIS de 8 bits rampa 118 px faixa lisa mais larga 6 px Dezoito níveis para 118px. No raio dá 6px por degrau; tangencialmente, no topo e na base achatados da elipse, o mesmo contorno vira uma reta de centenas de pixels — as duas «linhas duras» que se viam acima e abaixo da placa, e que não vinham da placa: o alfa do `placa.avif` servido tem salto máximo de 5,3 em 255 entre linhas vizinhas. Conferido e DESCARTADO antes de chegar aqui: a sombra longa da placa (`drop-shadow(0 44px 72px)`, alcance 116px) é de fato decepada pelo `overflow: clip` do palco, que só oferece os 8px de `--e-2`. Mas ela é navy 50% sobre navy, e na altura do corte esta poça já morreu 30px antes — não há luz por baixo para ela escurecer. O pedaço decepado é invisível. Mexer na máscara da placa por causa disso seria conserto de defeito que ninguém vê. O ruído é o mesmo da `.cons-cena::before` em `page-home.css`, e o porquê de cada constante está escrito lá — em resumo: cor variável com alfa fixo (ruído no alfa só clareia sobre campo escuro), `sRGB` obrigatório porque filtro SVG é linearRGB por padrão, `stitch` para o ladrilho não costurar. Medido aqui: lift médio +0,14 nível, desvio ±2. A máscara apara o ruído na borda da caixa. É literalmente a advertência que está escrita logo abaixo, no bloco da vinheta que saiu: qualquer coisa opaca neste `::before` volta a desenhar o retângulo do palco. Opaca até 72% — onde o gradiente já acabou —, transparente em 100%. O gradiente não muda. */ .maquete-palco::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.03 0 0 0 0 .20 0 0 0 0 .27 0 0 0 0 0 0 0 0 .055'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E"), radial-gradient(58% 42% at 50% 62%, color-mix(in srgb, var(--c-teal) 11%, transparent) 0%, color-mix(in srgb, var(--c-blue) 7%, transparent) 38%, transparent 72%); background-size: 140px 140px, auto; mask-image: radial-gradient(58% 42% at 50% 62%, #000 0 72%, transparent 100%); z-index: 0; } /* ── A VINHETA SAIU ───────────────────────────────────────────────────────── Ela já tinha sido três coisas erradas. Primeiro um `multiply` que virava caixa preta de bordas duras. Depois um degradê em `--d-bg-2`, que só funcionava enquanto a seção tinha aquele tom chapado atrás. Por último, um radial de navy em alfa baixo — e o comentário que morava aqui dizia, com todas as letras, que "qualquer cor opaca aqui voltaria a desenhar o retângulo do palco". Foi exatamente o que ela fez. O motivo é uma regra de gradiente que é fácil esquecer: o ÚLTIMO STOP DE UM RADIAL NÃO PARA NA ELIPSE. Ele preenche todo o resto da caixa. Escrito `…navy 46% em 100%`, aquele 100% é a borda da elipse — e os quatro cantos do retângulo, que ficam FORA dela, recebiam navy a 46% chapado, morrendo a seco na borda da caixa. Medido: caixa de 890×459, canto em `color(srgb .023 .075 .137 / .46)` contra o campo aberto do lado de fora. E o pedido não tinha conserto por ajuste, porque a vinheta escurece MAIS justamente os cantos — que é onde não existe maquete nenhuma, só campo. Ela estava escurecendo o fundo da página num retângulo para resolver um corte que a placa já não tem: o recorte alfa é um losango, a máscara horizontal já trata as pontas, e os dois `drop-shadow` seguem o contorno real. Fica só a poça de luz (`::before`), que termina em `transparent 72%` e por isso não desenha caixa nenhuma. */ .maquete-vidro { aspect-ratio: 1200 / 479; margin-left: calc((100% - 100% * var(--lupa)) / 2); position: relative; width: calc(100% * var(--lupa)); } /* A perspectiva mora aqui. Mover a ORIGEM da perspectiva — e não girar coisa alguma — é o que dá paralaxe honesta: as camadas ao fundo quase não andam, as da frente andam mais, e nenhum PNG é cisalhado. Os assets são raster com luz e sombra já cozidas no pixel; girar qualquer um deles denunciaria o truque. */ .maquete-mundo { inset: 0; perspective: var(--persp); /* 105px e 70px de curso do olho: medido na tela, isso dá ~8px de deriva na ambulância (a camada da frente), ~5px na clínica e ~3px no hospital. Mais que isso e a cena passa de "tem profundidade" a "está balançando". */ perspective-origin: calc(50% + var(--mx) * 105px) calc(50% + var(--my) * 70px); position: absolute; /* A CÂMERA NÃO ANDA COM A ESCOLHA, e isso foi uma reversão medida. Chegou a andar: escolher uma peça aproximava e deslocava a cena na direção dela. Ficava bonito parado e péssimo em uso — o deslocamento movia as OUTRAS duas peças até 80 px. Medido: o centro da ambulância ia de x=160 com ela escolhida para x=240 com o hospital escolhido. Quem clicava numa peça via a seguinte fugir do lugar, e o alvo passava a parecer que não responde. Alvo que se mexe é alvo que não funciona, e nenhuma elegância de câmera paga isso. A escolha continua legível sem mover um pixel de nada: a peça acende, as outras dessaturam e saem de foco, a pílula fica teal e o painel troca. */ transition: none; } /* Cada profundidade é um PLANO do tamanho da placa inteira, não uma peça solta. Isso importa: a projeção amplia o plano por 1/k em torno da origem, e o `scale(k)` encolhe o mesmo plano em torno do mesmo ponto — os dois se anulam exatamente, em toda a superfície. Resultado: parado, a composição fica idêntica ao plano; em movimento, cada plano deriva na medida da sua altura. Sem isso a calibração de seis rodadas iria embora em cinco pixels. */ .maquete-plano { inset: 0; /* Os quatro planos são do tamanho da placa e se empilham inteiros. Sem isto o plano da ambulância — que é o de cima — engoliria TODO clique da cena, e o hospital nunca seria alcançado pelo ponteiro. O clique volta a existir peça por peça, logo abaixo. */ pointer-events: none; position: absolute; transform: translateZ(var(--z, 0px)) scale(var(--k, 1)); } /* AS QUATRO CAMADAS, EM QUATRO LINHAS. Geometria, profundidade e relógio ficam no PLANO e não na peça, porque a sombra de contato é irmã da peça, não filha dela — e propriedade herdada não anda de lado. Um lugar só por camada. --z / --k profundidade e a compensação de escala que anula a projeção --x --y --w posição e largura sobre a caixa da placa, da calibração --ar --pe proporção do arquivo e onde o corpo sólido encosta no chão --sx --sy --sw centro e largura da elipse de contato --queda --dur --atraso a descida: distância, duração e hora de sair */ .maquete-plano[data-camada="placa"] { --z: 0px; --k: 1; } .maquete-plano[data-camada="hospital"] { --z: 30px; --k: .9785714; --x: 58.17%; --y: -2.71%; --w: 34%; --ar: 847 / 621; --pe: 98%; --sx: 75.17%; --sy: 58.6%; --sw: 34%; --queda: var(--q-hosp); --dur: 780ms; --atraso: 900ms; } .maquete-plano[data-camada="clinica"] { --z: 52px; --k: .9628571; --x: 35.92%; --y: 25.26%; --w: 19.34%; --ar: 668 / 430; --pe: 97.3%; --sx: 45.59%; --sy: 55.8%; --sw: 19%; --queda: var(--q-clin); --dur: 720ms; --atraso: 1040ms; } .maquete-plano[data-camada="ambulancia"] { --z: 76px; --k: .9457143; --x: 15.25%; --y: 40.29%; --w: 9.5%; --ar: 526 / 343; --pe: 93.2%; --sx: 20%; --sy: 54.9%; --sw: 9%; --queda: var(--q-amb); --dur: 840ms; --atraso: 990ms; } /* ══ 2 · AS QUATRO CAMADAS ═══════════════════════════════════════════════════ Ordem de pintura fundo→frente: placa, hospital, clínica, ambulância. Em isométrica a profundidade é o y de tela do apoio no chão — hospital 231, clínica 237, ambulância 245 —, e é essa a ordem. As três não se sobrepõem paradas; a ordem passa a valer quando uma cresce no hover ou na descida. */ /* ── AS SOMBRAS DA PLACA MORAM AQUI, NA CAIXA, E NÃO NA `img` ──────────────── Era a linha dura reportada, e a causa não é nenhuma das que se supôs antes. EM CHROMIUM, A PRESENÇA DE `mask-*` NUM ELEMENTO PRENDE A SAÍDA DELE À BORDER-BOX. E `filter` é aplicado ANTES de `mask` na ordem de pintura. A `img` abaixo tem máscara; logo os dois `drop-shadow` que moravam no filtro dela eram guilhotinados na borda inferior da imagem — com ~0,52 de alfa ainda vivo. Medido por diferença de capturas (página normal menos página com `.maquete-vidro { visibility: hidden }`), média nas colunas x 295–997: linha 4952 −0,29 R −3,76 G −4,61 B em 685 colunas linha 4953 −0,31 −2,05 −2,29 em 688 colunas linha 4954 0,00 0,00 0,00 em 0 colunas Zero absoluto na linha seguinte. Degrau de ~4,6 níveis no azul, em 688 de 702 colunas, numa linha só, na largura exata do palco. Essa é a linha. Não era `mask-clip` (medido: `no-clip` desce o corte UMA linha e deixa −0,97 de degrau), não era `mask-repeat`, não era `mask-size`. Na caixa de fora o recorte não acontece, porque ela não tem máscara. E a ordem passa a ser melhor do que era: a `img` é rasterizada, tonalizada e mascarada, e só então o pai gera as sombras — que passam a seguir a silhueta JÁ ESFUMADA em vez do retângulo. A ressalva de `filter` contra `perspective` (ver o bloco das peças) não se aplica: `.maquete-placa` é DESCENDENTE de `.maquete-mundo`, que é quem tem a `perspective`, não ancestral dela. Medido depois do conserto: a sombra pinta contínua de 4953 até 5073, caindo de −4,8 B para −0,40 B. A única aresta que sobra é o `overflow: clip` do palco, com degrau final de −0,38 G / −0,40 B — abaixo do quantum de 8 bits. Redução de 11× no degrau. */ .maquete-placa { filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--d-piso) 55%, transparent)) drop-shadow(0 44px 72px color-mix(in srgb, var(--d-piso) 50%, transparent)); inset: 0; position: absolute; } /* A PONTA ESQUERDA DA PLACA NÃO EXISTE. Conferido no arquivo: na coluna 0 do PNG ainda há 99 px de placa sólida, e o número CRESCE para a direita (104, 110, 113…) — ou seja, o vértice esquerdo ficou fora do quadro no render. Na direita o mesmo perfil converge (35, 32, 28): lá o canto está inteiro. Resultado sem tratamento: um talho vertical de ~60 px no meio do navy, que lê como imagem mal cortada e não como maquete. O esfumado devolve a leitura de "o modelo sai de quadro" — que é o que a câmera faria. Os 8% param bem antes da ambulância, que começa em 15,25%. */ .maquete-placa img { display: block; /* SÓ O TOM MORA AQUI. As duas sombras subiram para `.maquete-placa`, a caixa de fora — o porquê está escrito lá, e é a correção da linha dura. Esta regra tem `filter` próprio e por isso NÃO herda o de `.maquete-peca img`: a declaração inteira seria substituída. Os mesmos três valores precisam estar escritos aqui, ou a placa ficaria clara e as três peças escuras — o modelo partido em dois sóis, que é pior que o defeito original. */ filter: brightness(.74) contrast(1.06) saturate(.92); height: 100%; /* Esquerda: o vértice não existe no arquivo (ver acima) — o esfumado devolve a leitura de "o modelo sai de quadro". Direita: o vértice existe, mas a câmera empurra a cena até 30px além do palco ao escolher a ambulância, e ali o `overflow: clip` cravava um talho vertical. Esfumar os dois lados faz o modelo sempre SAIR de quadro em vez de ser cortado por ele. ── E FALTAVA O EIXO VERTICAL ───────────────────────────────────────────── A máscara era `to right`: constante em Y, portanto tratava esquerda e direita e deixava a borda de CIMA da placa em corte seco contra o campo. É a segunda «linha dura» reportada, e é o defeito que o cabeçalho da atmosfera já descrevia («a borda encontra o navy em corte seco e a peça inteira lê como recorte, não como objeto no espaço») — descrito para a placa inteira, corrigido só nos lados, e agravado quando a vinheta saiu. A segunda camada esfuma 26px no topo, e só no topo. Ela FUNCIONOU e é o que matou a linha de cima — conferido revertendo-a no motor: a contagem de colunas com tinta na borda superior salta de 334 para 531 e 647 em duas linhas, ou seja, volta a haver degrau. Com ela, a contribuição da maquete no topo começa em 11 colunas e sobe por ~26px sem descontinuidade. ── DUAS COISAS QUE ESTAVAM ESCRITAS AQUI E ERAM FALSAS ─────────────────── Dizia-se que o `mask-repeat: repeat` implícito era LOAD-BEARING, por ladrilhar a rampa para baixo e manter a sombra viva fora da border-box. **Não era.** Reproduzido o estado anterior no motor, a sombra morria na MESMA linha. E `mask-size` maior que a caixa **não estende área de pintura** — os 130px que moravam aqui não cobriam sombra nenhuma. A razão verdadeira é outra e está na caixa de fora: em Chromium, ter máscara prende a saída do elemento à border-box, e `filter` roda ANTES de `mask`. Por isso as sombras saíram daqui. `no-repeat` fica porque um eixo vertical com `repeat` de fato re-esfumaria a cada ladrilho; `mask-size` volta a `100% 100%`, que é o padrão honesto agora que não há sombra para cobrir. `mask-composite: intersect` tem suporte, conferido no motor. */ mask-composite: intersect; /* ── A RAMPA HORIZONTAL É SMOOTHSTEP, NÃO LINEAR ────────────────────────── A rampa linear chegava em opaco e PARAVA: nas paradas de 8% e 95,5% a derivada do alfa caía de 1/W para zero de uma coluna para a outra. A luminância composta herdava a quina — medido na contribuição isolada da placa, a inclinação passava de 1,578 para 0,457 nível/coluna em 8% e de −0,355 para −0,805 em 95,5% — e o olho lê descontinuidade de derivada como aresta: duas faixas verticais, uma em cada extremidade. Prova causal: com a rampa achatada (`#000 0, #000 100%`) a quebra vai a −0,13 e −0,01. E não era falta de níveis — a rampa anda 1,07 nível/coluna em média (máx 2,15; só 13 de 60 colunas abaixo de 0,5), não há platô. Alargar a rampa quase não ajuda: a magnitude obedece a I(parada)/W e a placa fica mais clara onde a parada se mudou. O que resolve é tirar a quina — o alfa sobe em smoothstep (3t²−2t³), que chega em 1 com derivada zero. Mesma geometria de antes (0→8% e 95,5%→100%), 17 paradas por lado. Medido: amplitude de banda (desvio da corda, r=4) 2,31 → 0,86 nível na esquerda e 1,00 → 0,55 na direita. */ mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.0112) .5%, rgba(0,0,0,.043) 1%, rgba(0,0,0,.0923) 1.5%, rgba(0,0,0,.1563) 2%, rgba(0,0,0,.2319) 2.5%, rgba(0,0,0,.3164) 3%, rgba(0,0,0,.4067) 3.5%, rgba(0,0,0,.5) 4%, rgba(0,0,0,.5933) 4.5%, rgba(0,0,0,.6836) 5%, rgba(0,0,0,.7681) 5.5%, rgba(0,0,0,.8438) 6%, rgba(0,0,0,.9077) 6.5%, rgba(0,0,0,.957) 7%, rgba(0,0,0,.9888) 7.5%, #000 8%, #000 95.5%, rgba(0,0,0,.9888) 95.781%, rgba(0,0,0,.957) 96.063%, rgba(0,0,0,.9077) 96.344%, rgba(0,0,0,.8438) 96.625%, rgba(0,0,0,.7681) 96.906%, rgba(0,0,0,.6836) 97.188%, rgba(0,0,0,.5933) 97.469%, rgba(0,0,0,.5) 97.75%, rgba(0,0,0,.4067) 98.031%, rgba(0,0,0,.3164) 98.313%, rgba(0,0,0,.2319) 98.594%, rgba(0,0,0,.1563) 98.875%, rgba(0,0,0,.0923) 99.156%, rgba(0,0,0,.043) 99.438%, rgba(0,0,0,.0112) 99.719%, rgba(0,0,0,0) 100%), linear-gradient(to bottom, transparent 0, #000 26px, #000 100%); mask-repeat: no-repeat; mask-size: 100% 100%; object-fit: contain; width: 100%; } .maquete-peca { aspect-ratio: var(--ar); display: block; left: var(--x); pointer-events: auto; position: absolute; top: var(--y); transform-origin: 50% var(--pe); width: var(--w); -webkit-tap-highlight-color: transparent; } /* O ALVO DE TOQUE. A ambulância tem 9,5% da largura da placa: num celular isso é meia dúzia de pixels de sprite. A área clicável não pode depender do tamanho do desenho — este retângulo invisível garante 44x44 sempre, centrado na peça, sem mexer em nada do que se vê. */ /* O ALVO DE TOQUE, e por que ele é maior que 44 no celular. Medido em 390: a caixa da ambulância tem 45x30 e o alvo efetivo dava 34px de largura — o `max(100%, 44px)` empatava com a própria peça e a vizinhança comia as pontas. A menor peça na menor tela é justamente o pior caso, e é nele que a régua vale. `--alvo` sobe para 56 no celular; no desktop os 44 bastam, porque lá a ambulância já tem 68px. */ .maquete-peca::before { content: ''; height: max(100%, var(--alvo, 44px)); left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: max(100%, var(--alvo, 44px)); } /* ── O MODELO É ILUMINADO PELO SOL DA PÁGINA ──────────────────────────────── Medido nos arquivos, com o alfa descontado: placa.webp média 219,221,225 98% dos pixels acima de 170 hospital.webp média 167,176,177 60% clínica.webp média 162,168,162 54% ambulância.webp média 169,153,162 58% O campo por trás é `rgb(3,10,22)`. Uma placa de 219 sobre um piso de 12 é uma razão de dezoito para um — mais contraste do que existe entre qualquer duas coisas na página inteira. Não era percepção: o modelo REALMENTE vinha de outra cena, e por isso lia como ativo de banco colado sobre o navy. A temperatura, ao contrário do que eu esperava, não era o problema: as quatro peças estão entre −10 e +6 de diferença entre vermelho e azul, ou seja, praticamente neutras. Corrigir matiz aqui não teria efeito, porque quase não há matiz para girar. O que estava fora era LUZ. `brightness(.74)` põe a placa em ~162 de média, na mesma família das fotografias do mosaico em repouso (que descansam em `.84` sobre imagens já escuras). O contraste sobe um fio para o volume não achatar junto, e a saturação desce um fio porque menos luz com a mesma saturação puxa para o cinza esverdeado do render. Vai na IMAGEM e não num ancestral: `filter` acima da `perspective` achata o 3D em alguns motores — a mesma razão pela qual as sombras da placa moram aqui embaixo e não na moldura. */ .maquete-peca img { display: block; filter: brightness(.74) contrast(1.06) saturate(.92); height: 100%; object-fit: contain; pointer-events: none; width: 100%; } /* O corpo existe separado da peça por um motivo prático: a DESCIDA anima a peça e a SELEÇÃO anima o corpo. Se as duas disputassem o mesmo `transform`, a peça escolhida daria um salto no instante em que a coreografia terminasse. */ .maquete-corpo { display: block; height: 100%; transform-origin: 50% var(--pe); transition: transform var(--m-medio) var(--ease-out), filter var(--m-medio) var(--ease-out); width: 100%; } /* ══ 3 · A SOMBRA DE CONTATO ═════════════════════════════════════════════════ É o que faz a peça CAIR em vez de APARECER. Fica fora da peça de propósito: no ar a peça sobe, a sombra não — ela só cresce e desmancha. Uma sombra que subisse junto seria um adesivo colado no pé do prédio. */ .maquete-sombra { aspect-ratio: 3.4 / 1; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--c-navy) 92%, transparent) 0%, color-mix(in srgb, var(--c-navy) 38%, transparent) 46%, transparent 72%); filter: blur(6px); left: var(--sx); opacity: .26; pointer-events: none; position: absolute; top: var(--sy); transform: translate(-50%, -50%); width: var(--sw); } /* ══ 4 · A ETIQUETA ══════════════════════════════════════════════════════════ Sempre visível, nunca tooltip. Duas razões: sem ela ninguém descobre que a maquete é clicável, e no toque não existe hover para revelar nada. Mora dentro do link, então clicar no nome é clicar na peça. */ /* ── O RÓTULO DA PEÇA ──────────────────────────────────────────────────────── Era uma pastilha de navy chapado com o mono em peso 500 e .16em de espaço: lida sobre a maquete branca, virava um adesivo colado no modelo. Pesada demais para o que é — o nome de um objeto na cena, não um botão. Passa a ser a mesma régua do resto da página: mono em peso 400, 10,5 px, .14em, caixa alta. E a pastilha vira VIDRO, com a mesma gramática do painel ao lado — desfoque do que está atrás e um fio de luz de um pixel. Sobre a laje branca ela escurece o suficiente para o texto assentar; sobre o navy ela some no campo. A mesma peça funciona nos dois fundos porque não pinta uma cor: filtra a que já está lá. O texto ganhou peso de leitura ao PERDER peso de tipo — é o contraste com o branco da maquete que faz a leitura, não a gordura da letra. */ /* ── A PASTILHA DE VIDRO SAI, ENTRA O BOTÃO ────────────────────────────────── Efeito do acervo: Uiverse.io, autor `adamgiebl`, "new-bird-34" (licença MIT). No catálogo interno: "Botão com ícone relevo · Botões · HTML e CSS", em `15-Componentes-externos/uiverse/01-botoes/`. A MECÂNICA. Uma chapa com o nome à esquerda e uma pastilha clara encaixada na direita, com a seta dentro. No hover a pastilha ABRE — a largura dela vai a quase a da chapa inteira — e a seta anda um fio para a frente. No clique a pastilha encolhe 5%. `overflow: hidden` na chapa é o que faz a abertura ler como uma gaveta correndo por dentro, e não como um bloco crescendo. A COR. Troca de família, um para um: o roxo `#A370F0` vira a chapa de ação da casa (`--g-cta`), e os dois tons escuros que o original usa nas sombras — `#714da6` no relevo interno e `#7b52b9` na sombra da pastilha e na seta — viram `--c-teal-d`. Branco continua branco, mas é o `--d-ink` da paleta. Nenhuma medida do desenho mudou: `.9em` de canto, `2.8em` de altura, `2.2em` de pastilha, `.7em` de canto nela, `1.6em`/`-.6em` no relevo, `.3s`. A SETA É A DA CASA. O original traz um glifo cheio do Material; a página já desenha a dela em traço — `M5 12h14M13 5l7 7-7 7`, 2,5 de espessura, ponta arredondada — e ela aparece no "Entrar", no "Falar com a SOMA" e nos cards. Trazer um segundo desenho de seta para a mesma tela é criar dialeto. `content-box` é declarado na unha porque a página é `border-box`: com ela, os `2.8em` de altura passariam a INCLUIR os `.35em` de folga, sobrando 2,1em de caixa para uma pastilha de 2,2em — e a pastilha nasceria cortada em cima e embaixo pelo `overflow`. O original foi escrito em `content-box`, e é nessa conta que os números dele fecham. `--btn-size` é o único número de fora: 17px do original faz "Ambulância" medir ~200px de chapa contra ~230px entre uma peça e a vizinha, e as três se encostariam. Tudo o mais é `em`, então basta esta medida para o componente inteiro escalar junto. */ /* ── E O AJUSTE DE ESCALA: DELICADO, NÃO MENOR ─────────────────────────────── O componente foi desenhado para ser o botão principal de uma tela. Aqui ele é uma etiqueta pousada sobre uma maquete, e três delas na mesma cena: o mesmo desenho, na mesma força, vira três blocos disputando a atenção com o modelo. O que encolhe é a FOLGA, não a letra. O corpo do texto fica onde estava e diminuem a altura (2,8 → 2,25em), as duas folgas laterais (1,2 → .85em e 3,3 → 2,7em), a folga interna (.35 → .26em), a pastilha (2,2 → 1,75em) e o canto (.9 → .7em). O botão perde volume e mantém legibilidade — é o oposto de reduzir o `font-size`, que faria as três coisas ao contrário. O RELEVO AFINA. `.1em .1em .6em .2em` é sombra de botão grande: numa pastilha de 1,75em ela vira uma mancha do tamanho da própria pastilha. Fica a metade do desfoque e um sexto da propagação, e entra um fio de luz de 1px no alto da chapa — o mesmo `inset 0 1px 0` que o `.btn-primary` da casa usa. É esse fio que faz a chapa ler como superfície e não como retângulo pintado. */ /* ── O FIO ──────────────────────────────────────────────────────────────────── O que pesava não era a chapa: era o ANEL DE TURQUESA entre ela e a pastilha branca. Medido: pastilha de 1,75em dentro de uma caixa de 2,77em deixa 0,51em de sobra em volta — meia quadratura de moldura, 18% da altura do botão. É a proporção do original, e num botão principal de tela cheia ela é justa; numa etiqueta de 15px vira borda grossa, e borda grossa é o oposto de delicado. Agora existe UMA medida, `--fio`, e ela é o anel: a pastilha tem exatamente a altura da caixa de conteúdo, então a sobra em cima, embaixo e à direita é o `padding`, e nada mais. 0,18em — 2,7px no tamanho cheio. De 18% para 7%. E OS CANTOS FICAM CONCÊNTRICOS. Duas curvas separadas por um fio constante só correm paralelas se a de dentro medir a de fora MENOS o fio; com raios soltos elas se aproximam nas quinas e o anel engorda justamente onde o olho mede espessura. `calc(.68em - var(--fio))` é a conta, e é ela que faz a pastilha parecer encaixada em vez de apoiada. */ /* ── POR QUE A CHAPA DEIXOU DE SER TEAL ────────────────────────────────────── Medido na laje, sob cada botão, com o filtro da maquete já aplicado (`brightness(.74) contrast(1.06) saturate(.92)`): #a4a7a4 na ambulância, #a3a4a7 na clínica, #a1a8a5 no hospital — um cinza médio dessaturado, com luminância relativa de 0,371 a 0,383. E `--c-teal` mede **0,381**. É o MESMO valor tonal da laje. A chapa e o fundo dela não se separavam por claro e escuro: só por croma. Em escala de cinza o botão sumia, e é por isso que a cena lia apagada mesmo com o teal aceso — o olho lê hierarquia por luminância antes de ler cor. O gradiente não salvava: `#02D4DC` dá 1,32:1 contra a laje e `#02888F` dá 1,76:1. A pastilha branca, 2,3:1. Nenhum desses pares constrói figura sobre fundo. A CHAPA É BRANCO-GELO, E ELA NÃO SE RESOLVE POR CONTRASTE. Branco sobre aquela laje mede 2,32:1 — pouco para figura sobre fundo, e essa conta não muda com ajuste de tom: qualquer branco crível fica na mesma faixa. O que separa uma superfície clara de outra clara não é contraste, é ELEVAÇÃO. Então a chapa ganha o vocabulário de um objeto pousado: um fio de contorno em navy a 14%, uma sombra projetada curta e baixa, e o brilho de um pixel no alto. Ela deixa de ser uma mancha do mesmo valor da laje e passa a ser um cartão em cima dela. O PAR DE DENTRO CARREGA O CONTRASTE que a chapa não tem. Texto em `--c-navy` sobre o gelo dá 17:1; a pastilha em navy sobre a chapa, o mesmo; e a seta em `--c-teal` dentro da pastilha, 7,65:1. O teal fica onde rende: o único ponto de cor da peça. E A ABA ABERTA INVERTE PARA NAVY. A pastilha corre até o fim e o botão vira uma barra escura com a seta teal, cercada pelo fio de gelo que sobra do `padding` — 7,6:1 contra a laje. O estado escolhido passa a ser o MAIS definido dos três, que é como deve ser. */ .maquete-rotulo { --btn-size: clamp(11px, 1.2vw, 15px); --fio: .18em; align-items: center; background: linear-gradient(160deg, #FFFFFF 0%, var(--d-ink) 52%, color-mix(in srgb, var(--d-ink) 90%, var(--c-navy) 10%) 100%); border: none; border-radius: .68em; box-sizing: content-box; box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px color-mix(in srgb, var(--c-navy) 14%, transparent), 0 .14em .5em -.1em color-mix(in srgb, var(--c-navy) 42%, transparent); color: var(--c-navy); display: flex; font-family: var(--f-rotulo); font-size: var(--btn-size); font-weight: 500; height: 1.9em; left: 50%; letter-spacing: .05em; margin-top: var(--e-2); overflow: hidden; padding: var(--fio); padding-left: .8em; padding-right: 2.5em; position: absolute; top: 100%; transform: translateX(-50%); white-space: nowrap; } .rotulo-icone { align-items: center; background: var(--c-navy); border-radius: calc(.68em - var(--fio)); /* a sombra encolhe junto: um halo em volta de uma pastilha que agora encosta na borda invadiria o fio e o engrossaria de novo. Fica só o mínimo, e no próprio navy — sobre o gelo ele lê como assentamento, não como mancha */ box-shadow: 0 .04em .18em color-mix(in srgb, var(--c-navy) 32%, transparent); display: flex; height: 1.9em; justify-content: center; position: absolute; right: var(--fio); transition: all .3s; width: 1.9em; } .rotulo-icone svg { color: var(--c-teal); transition: transform .3s; width: .72em; } /* A ABA ABERTA FICA COMO SE O CURSOR ESTIVESSE EM CIMA: a pastilha corre até o fim e sobra só a seta. Estado e gesto passam a ser o mesmo desenho, e é isso que se quis — o bloco no ar é o que está aberto, e o hover é a promessa de abrir o próximo. Quem separa os dois é o tempo: o hover volta quando o mouse sai, a aba aberta fica. */ .maquete-peca:hover .rotulo-icone, .maquete-peca:focus-visible .rotulo-icone, .maquete-peca.is-ativa .rotulo-icone { width: calc(100% - var(--fio) * 2); } .maquete-peca:hover .rotulo-icone svg, .maquete-peca:focus-visible .rotulo-icone svg, .maquete-peca.is-ativa .rotulo-icone svg { transform: translateX(.08em); } .maquete-peca:active .rotulo-icone { transform: scale(.95); } /* ── a peça escolhida se destaca, e as outras recuam ────────────────────────── A ênfase é `.ja-pousou`, NÃO `.esta-ligado`. A diferença não é preciosismo: `.esta-ligado` entra no carregamento, então o bloco inicial já vinha escolhido ANTES da coreografia — e a cena que o dono pediu descia com duas das três peças cinzas e encolhidas. O reveal entregava dois cadáveres. Agora as três caem acesas e no tamanho, e a ênfase assenta depois do último pouso, com a transição de meio segundo que já estava no `.maquete-corpo`. Quem diz qual bloco está aberto durante a queda é a pílula teal, que basta. */ /* O `blur` de meio pixel é o que fecha a conta da câmera: quem não foi escolhido sai do plano de foco. Meio pixel é pouco de ler e muito de sentir — um borrão de verdade viraria efeito, e o que se quer aqui é profundidade de campo, que ninguém nota e todo mundo percebe. */ .maquete.ja-pousou .maquete-peca:not(.is-ativa) .maquete-corpo { filter: saturate(.4) brightness(.74) blur(.5px); transform: scale(.965); } .maquete.ja-pousou .maquete-peca.is-ativa .maquete-corpo { transform: scale(1.03); } /* a sombra da peça escolhida abre um pouco: ela subiu, então projeta mais */ .maquete.ja-pousou .maquete-peca.is-ativa + .maquete-sombra, .maquete.ja-pousou .is-ativa ~ .maquete-sombra { opacity: .95; } .maquete.ja-pousou .maquete-peca:not(.is-ativa):hover .maquete-corpo { filter: saturate(.8) brightness(.92); transform: scale(.99); } /* A aba aberta é a animação no fim do curso: cópia cheia em 100%, sem o fio do cursor. O fio marca o gesto de quem está passando o mouse; o estado é o teal inteiro. Assim hover e seleção não competem — um é o caminho, o outro é o destino. */ /* A ênfase da aba aberta mora na regra da pastilha, lá em cima, junto com o hover: as duas são o mesmo desenho de propósito. Aqui sobra só o que o estado pede a mais que o gesto — meio ponto de peso na chapa, para a aba escolhida não recuar quando o mouse estiver em outra. */ .maquete-peca.is-ativa .maquete-rotulo { box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px color-mix(in srgb, var(--c-navy) 24%, transparent), 0 .18em .6em -.1em color-mix(in srgb, var(--c-navy) 55%, transparent); } /* O ANEL DE FOCO. Vive na etiqueta: a peça é um recorte irregular, e um contorno retangular em volta dela apontaria para o vazio em vez do objeto. Vem DEPOIS do bloco `.is-ativa` de propósito — as duas regras têm a mesma especificidade, e é esta que precisa vencer no `box-shadow`. POR QUE DUAS CORES. O anel pousa sobre o piso CLARO da placa (luminância medida 0,65–0,82). Um anel só de `--c-teal-2` mede 1,0:1 ali: a diferença é apenas de croma, some em escala de cinza e reprova o WCAG 1.4.11. O navy resolve com folga (~12:1) sobre a placa; o teal por fora garante o mesmo se o anel algum dia cair sobre o fundo escuro. Um dos dois sempre aparece. */ .maquete-peca:focus-visible { outline: none; } .maquete-peca:focus-visible .maquete-rotulo { /* o `box-shadow` do foco SUBSTITUI o relevo interno da chapa, e é de propósito: um anel e um relevo na mesma propriedade brigariam, e por meio segundo o foco é mais importante que o volume */ box-shadow: 0 0 0 5px var(--c-teal-2); outline: 2px solid var(--c-navy); outline-offset: 3px; } /* ══ 5 · A COREOGRAFIA DE ENTRADA ════════════════════════════════════════════ Dispara pelo módulo editorial: `data-soma-onda` no palco, `.is-tocando` posta pelo IntersectionObserver e pelo botão "Animar". Quem sabe a hora de cada peça é este CSS, em `animation-delay` — o JS só liga e desliga a classe. A ORDEM QUE O DONO PEDIU 1. a placa desce sozinha e pousa; 2. as três peças descem com leve assimetria — nem juntas, nem em fila; 3. cada uma assenta curto, com o exagero mínimo de quem tem peso. A placa sai em 180 ms e pousa em 940. As peças NÃO têm passo fixo: hospital em 900, clínica em 1040 (+140) e ambulância em 990 (+90) — o desencontro é o ponto. E a duração muda junto (780 · 720 · 840), de modo que a ordem de pouso não repete a ordem de partida. Fim da cena em ~1,83 s, bem dentro dos 8,8 s que o módulo editorial segura a classe. */ @keyframes maquete-placa-pousa { 0% { animation-timing-function: cubic-bezier(.4, 0, .7, .6); opacity: 0; transform: translate3d(0, calc(var(--q-placa) * -1), 0) scale(1.035); } 14% { animation-timing-function: var(--ease-out); opacity: 1; } 100% { opacity: 1; transform: none; } } @keyframes maquete-pousa { 0% { animation-timing-function: cubic-bezier(.42, 0, .74, .56); /* queda: acelera */ opacity: 0; transform: translate3d(0, calc(var(--queda) * -1), 0) scale(1.05); } 12% { animation-timing-function: cubic-bezier(.42, 0, .74, .56); opacity: 1; } /* o toque no chão: passa alguns pixels do ponto de repouso */ 70% { animation-timing-function: cubic-bezier(.33, 0, .18, 1); transform: translate3d(0, var(--assento), 0) scale(1); } 86% { transform: translate3d(0, calc(var(--assento) * -.4), 0); } 100% { opacity: 1; transform: none; } } /* A sombra conta a mesma história pelo avesso: grande e desmanchada enquanto a peça está no ar, curta e fechada no instante do impacto, e assentada depois. */ @keyframes maquete-assenta { 0% { filter: blur(20px); opacity: 0; transform: translate(-50%, -50%) scale(2.5); } 10% { opacity: .34; } 70% { filter: blur(4px); opacity: .50; transform: translate(-50%, -50%) scale(.86); } 86% { filter: blur(9px); opacity: .28; transform: translate(-50%, -50%) scale(1.1); } 100% { filter: blur(6px); opacity: .26; transform: translate(-50%, -50%) scale(1); } } /* a etiqueta só chega depois do pouso — no ar ela ficaria pairando no navy */ @keyframes maquete-etiqueta { 0%, 62% { opacity: 0; } 100% { opacity: 1; } } .is-tocando .maquete-placa img { animation: maquete-placa-pousa var(--m-lento) 180ms both; will-change: opacity, transform; } .is-tocando .maquete-peca { animation: maquete-pousa var(--dur) var(--atraso) both; will-change: opacity, transform; } .is-tocando .maquete-sombra { animation: maquete-assenta var(--dur) var(--atraso) both; will-change: filter, opacity, transform; } .is-tocando .maquete-rotulo { animation: maquete-etiqueta var(--dur) var(--atraso) both; } /* ══ 6 · O PAINEL ════════════════════════════════════════════════════════════ Fundo sólido, um degrau mais escuro que a seção: lê como painel encaixado, e o cabeçalho grudento pode ter o mesmo fundo sem meia-tinta translúcida. */ /* O PAINEL NÃO É MAIS UM CARD. Ele tinha fundo, borda, sombra e canto — e dentro dele havia OUTRO card com fundo, borda e canto. Card dentro de card é moldura em cima de moldura, e o olho conta duas peças onde há uma. Agora ele é só o lugar onde o card mora. Quem tem corpo é o bloco. */ .maquete-painel { background: none; border: 0; /* A margem existia para alinhar o topo do painel ao topo da PLACA, saltando o `--ceu` que o palco reserva para a queda. Com a cena centrada ela passou a empurrar o painel 104px para baixo do próprio centro — os dois eixos brigando. Quem alinha agora é o `align-items: center` da cena, e o vão da queda deixa de contar: ele é ar acima da placa, não conteúdo. */ overflow: visible; } /* SEM JAVASCRIPT os três blocos ficam visíveis, empilhados e sem rolagem interna: a seção continua sendo texto e foto que qualquer um lê. O `.esta-ligado` é posto pelo maquete.js e só então o painel passa a mostrar um bloco por vez. */ .maquete.esta-ligado .maquete-bloco { display: none; } /* A ROLAGEM INTERNA ACABOU, e é a mudança que mais muda a leitura. Antes o bloco tinha altura fixa e os dez cards do hospital viviam atrás de uma rolagem que escondia 70% deles. Com um card por vez o bloco tem a altura do card: nada fica atrás de nada, e as setas dizem quanto ainda há. */ /* ── O VIDRO ───────────────────────────────────────────────────────────────── O bloco aberto É o card, e é ele que carrega o glassmorphism: fundo branco quase transparente, borda de luz de um pixel e desfoque do que está atrás. Sobre o campo navy contínuo da página, o `backdrop-filter` pega as poças de cor do fundo e as espalha — é daí que vem a sensação de vidro, não de um retângulo cinza. `isolation: isolate` porque o desfoque de fundo precisa de um contexto de empilhamento próprio; sem ele o filtro pega camadas erradas em alguns motores. */ .maquete.esta-ligado .maquete-bloco.is-aberto { animation: maquete-troca var(--m-medio) var(--ease-out) both; background: color-mix(in srgb, var(--d-ink) 7%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid color-mix(in srgb, var(--d-ink) 20%, transparent); border-radius: var(--e-4); display: block; isolation: isolate; overflow: hidden; position: relative; transition: border-color var(--m-rapido) var(--ease-out), box-shadow var(--m-rapido) var(--ease-out); } /* o brilho do hover é TEAL, não o âmbar da referência: a luz da casa é essa */ @media (hover: hover) { .maquete.esta-ligado .maquete-bloco.is-aberto:hover { border-color: color-mix(in srgb, var(--c-teal) 44%, transparent); box-shadow: 0 0 22px 1px color-mix(in srgb, var(--c-teal) 22%, transparent); } } .maquete.esta-ligado .maquete-bloco.is-aberto:focus-visible { outline: 2px solid var(--c-teal-2); outline-offset: -2px; } @keyframes maquete-troca { from { opacity: 0; transform: translate3d(14px, 0, 0); } to { opacity: 1; transform: none; } } .maquete-bloco + .maquete-bloco { border-top: 1px solid var(--d-line); } /* ── A CABEÇA SAIU ────────────────────────────────────────────────────────── O bloco tinha um cabeçalho — rótulo em mono e uma linha de contexto — ocupando o topo do vidro, com a fotografia começando abaixo dele. Era a última moldura sobrando: o vidro É o card, e um card com faixa de título em cima da foto volta a ler como ficha dentro de ficha. A fotografia agora preenche o vidro inteiro, de borda a borda, e o único texto é a dor da frente — deitada sobre a imagem, no pé, onde já estava. O NOME DA ESTRUTURA NÃO SE PERDEU: saiu do desenho e entrou no `aria-label` do bloco. Quem chega pelo link da peça 3D continua sabendo em que estrutura entrou; o que sumiu foi o letreiro, não a informação. */ /* ══ 7 · OS CARDS — a fotografia e a dor reconhecida ═════════════════════════ `auto-fit` e não `auto-fill`: com um card só (o bloco da ambulância) a coluna colapsa e o card ocupa a largura inteira, em vez de sobrar buraco ao lado. Com dez (o bloco do hospital) vira grade de duas colunas assim que couber — que é o que impede a lista de virar um rolo de mil pixels. */ /* ── O CARROSSEL: UM CARD POR VEZ ──────────────────────────────────────────── Aqui havia uma grade de cards pequenos — foto de 92px ao lado de duas linhas — e os dez do hospital viravam uma lista com rolagem interna. Card pequeno com rosto de 92px não mostra ninguém, e o argumento da seção é justamente o rosto e a dor de cada frente. Agora é UM card por vez, com a foto grande, e setas para andar. Sem JavaScript os cards continuam empilhados e legíveis — o `.esta-ligado` é que liga o carrossel, e é o JS que o põe. A trilha é flex com cada card em `0 0 100%`, deslocada por `--i`. Não há `scroll-snap` de propósito: o passo é do botão e da seta do teclado, e rolagem lateral por gesto brigaria com a rolagem vertical da página no celular. */ .maquete-cards { padding: 0 var(--e-5) var(--e-5); } /* sem JS: pilha simples, um embaixo do outro */ .maquete-cards { display: grid; gap: var(--e-4); } .maquete.esta-ligado .maquete-cards { display: flex; gap: 0; padding: 0; transform: translateX(calc(var(--i, 0) * -100%)); transition: transform var(--m-medio) var(--ease-out); } .maquete.esta-ligado .maquete-card { flex: 0 0 100%; min-width: 0; } /* A janela que recorta a trilha — a trilha em si é mais larga que o painel. `position: relative` porque as setas moram AQUI dentro: é contra esta caixa que elas se centram, e ela é exatamente a altura da fotografia. Sem padding: dentro do vidro a foto sangra até a borda do card. */ .maquete.esta-ligado .maquete-vitrine { overflow: clip; padding: 0; position: relative; } /* ── O CARD: A FOTOGRAFIA É O CARD ─────────────────────────────────────────── Antes era uma faixa 16:10 e, embaixo dela, um bloco de texto — dois retângulos empilhados dentro de um terceiro. Lia como ficha, não como peça. Agora a foto ocupa o card inteiro e o texto mora SOBRE ela, no pé, deitado num véu que escurece só o rodapé. O retrato volta ao 4:5, que é o recorte em que as tomadas foram feitas — a faixa 16:10 existia para o texto caber embaixo, e esse motivo acabou. A LEGIBILIDADE NÃO DEPENDE DA FOTO. O véu é um degradê próprio, não um filtro na imagem: qualquer tomada — clara, escura, com céu no fundo — recebe o mesmo assento sob o texto. Sem ele o card ficaria refém da foto do dia. */ /* O CARD PERDEU A MOLDURA. Ele não é mais uma peça dentro de outra: é a fotografia e o texto, dentro do vidro que é o bloco. Sem borda, sem canto e sem fundo próprio — o canto quem faz é o `overflow: hidden` do vidro. */ .maquete-card { display: grid; isolation: isolate; margin: 0; padding: 0; position: relative; } /* ALTURA FIXA, LARGURA CHEIA — e NÃO `aspect-ratio` com teto. O retrato em pé é a intenção, mas em 4:5 o card dava 482×602 num painel de 531, e o bloco inteiro ficava com 796px contra 398 da maquete ao lado. Dobro da altura do vizinho é seção torta. A correção óbvia — `aspect-ratio: 4/5` mais `max-height` — está errada e foi medida: o navegador preserva a razão encolhendo a LARGURA, não a razão. O quadro virou 352 de largo dentro de um card de 482, com 130px de vazio à direita. Aqui a altura é o que manda e a largura é sempre 100%. A proporção do card passa a sair da largura do painel, e o `object-fit: cover` cuida do recorte. A foto ocupa o card inteiro em qualquer largura, que é o que importa. */ .maquete-card-foto { grid-area: 1 / 1; height: clamp(300px, 44svh, 440px); margin: 0; overflow: hidden; width: 100%; } .maquete-card-foto img { display: block; height: 100%; object-fit: cover; object-position: center 26%; /* o rosto mora no terço de cima */ transform-origin: 50% 30%; transition: transform var(--m-cena) var(--ease-out); width: 100%; } /* Duas tomadas pedem âncora explícita: o cirurgião mora na direita do quadro (o foco cirúrgico ocupa a esquerda) e a farmacêutica, no alto. Cortadas pelo centro, as duas perdem a pessoa. */ .maquete-card-foto[data-foco="direita"] img { object-position: right 26%; } .maquete-card-foto[data-foco="topo"] img { object-position: center top; } /* O VÉU. Dois terços de nada e um terço de navy: o texto assenta sem a fotografia perder o corpo. */ .maquete-card::after { background: linear-gradient(180deg, transparent 34%, color-mix(in srgb, var(--c-navy) 46%, transparent) 58%, color-mix(in srgb, var(--c-navy) 88%, transparent) 82%, var(--c-navy) 100%); content: ''; grid-area: 1 / 1; pointer-events: none; z-index: 1; } .maquete-card-corpo { align-self: end; grid-area: 1 / 1; min-width: 0; padding: var(--e-6) var(--e-5) var(--e-5); z-index: 2; } /* A TIPOGRAFIA DA DOR MUDOU, e o motivo é de uso, não de gosto. A linha estava em Fraunces itálico — que é a assinatura da marca em ÊNFASE DE TÍTULO, não em frase factual. "A casa que não fecha em nenhum dia do ano" é informação: em itálico display, sobre fotografia e em corpo de cartão, ela empapa e perde a leitura. Volta para a Inter, com peso e entrelinha curtos — a mesma voz do resto da página. O itálico continua onde é dele, nos títulos das seções. */ .maquete-card-corpo .pontas-rotulo { color: var(--c-teal-2); display: block; font-family: var(--f-rotulo); font-size: var(--t-mono); letter-spacing: .2em; text-transform: uppercase; font-weight: 500; } .maquete-card-corpo .pontas-linha { color: var(--d-ink); font-family: var(--f-sans, inherit); font-size: var(--t-lg); font-style: normal; font-weight: 500; letter-spacing: -.015em; line-height: 1.24; margin-top: var(--e-2); text-wrap: balance; } /* O EFEITO. Quando o card entra, a fotografia assenta de um zoom curto enquanto o texto sobe — os dois no mesmo relógio, que é o que faz a chegada ler como um gesto e não como dois elementos aparecendo. No ponteiro, o mesmo par responde de leve: a imagem se aproxima e a linha sobe um fio. */ .maquete.esta-ligado .maquete-bloco.is-aberto .maquete-card-foto img { animation: maquete-foto-assenta var(--m-lento) var(--ease-out) both; } .maquete.esta-ligado .maquete-bloco.is-aberto .maquete-card-corpo { animation: maquete-texto-sobe var(--m-lento) .12s var(--ease-out) both; } @keyframes maquete-foto-assenta { from { transform: scale(1.09); } to { transform: scale(1); } } @keyframes maquete-texto-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (hover: hover) { .maquete-card:hover .maquete-card-foto img { transform: scale(1.05); } .maquete-card:hover .maquete-card-corpo .pontas-linha { transform: translateY(-2px); } .maquete-card-corpo .pontas-linha { transition: transform var(--m-medio) var(--ease-out); } } /* ── AS SETAS, DENTRO DO CARD ──────────────────────────────────────────────── Elas moravam numa barra abaixo do card — mais uma faixa, mais uma divisão. Agora ficam nas LATERAIS, por cima da fotografia, verticalmente centradas: quem quer passar não desce o olho, ele já está onde a mão vai. Discretas em repouso e firmes ao alcance: 44px de alvo (a régua da casa), corpo de vidro como o card, e só um fio de borda. O contraste vem do `backdrop-filter` — sobre foto clara elas escurecem, sobre foto escura elas clareiam, e em nenhum dos dois casos somem. Nascem do JS: sem ele não há trilha para andar, e seta que não anda é botão morto. */ .maquete-passos { pointer-events: none; /* a barra é só o trilho; quem clica é a seta */ position: absolute; inset: 0; z-index: 4; } .maquete-seta { align-items: center; background: color-mix(in srgb, var(--c-navy) 34%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--d-ink) 22%, transparent); border-radius: 999px; color: var(--d-ink); cursor: pointer; display: flex; height: 44px; justify-content: center; opacity: .62; pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); transition: opacity var(--m-rapido) var(--ease-out), border-color var(--m-rapido) var(--ease-out), background-color var(--m-rapido) var(--ease-out); width: 44px; } .maquete-seta[data-passo="-1"] { left: var(--e-3); } .maquete-seta[data-passo="1"] { right: var(--e-3); } .maquete-seta:hover, .maquete-seta:focus-visible { background: color-mix(in srgb, var(--c-navy) 58%, transparent); border-color: color-mix(in srgb, var(--c-teal) 52%, transparent); opacity: 1; } /* Ponta da lista: some do caminho do teclado e apaga, mas continua ocupando o lugar — sem isso a seta restante pularia de lado a cada extremo. */ .maquete-seta[disabled] { cursor: default; opacity: .18; } /* O CONTADOR mora no pé do card, junto do texto — é informação da peça, não controle. Fica na mesma coluna da dor, alinhado à direita para não disputar a leitura com ela. */ .maquete-conta { color: color-mix(in srgb, var(--d-ink) 62%, transparent); font-family: var(--f-rotulo); font-size: var(--t-mono); letter-spacing: .1em; pointer-events: none; position: absolute; right: var(--e-5); text-transform: uppercase; top: var(--e-5); z-index: 4; font-variant-numeric: tabular-nums; font-weight: 500; } .maquete-conta b { color: var(--d-ink); font-weight: 500; } /* `.pontas-rotulo` e `.pontas-linha` são as classes do slider que saiu — a voz continua sendo a mesma. Só o corpo muda: aqui a frase mora num card de duas colunas, não numa legenda de foto em 16:9. */ /* a coluna de texto do card tem ~130px: com os 0,2em do slider, "Pronto atendimento" e "Diagnóstico por imagem" quebravam em duas linhas de rótulo */ .maquete-card .pontas-rotulo { font-size: var(--t-rot); letter-spacing: .11em; } .maquete-card .pontas-linha { display: block; font-size: var(--t-lg); line-height: 1.28; margin-top: var(--e-1); } /* Bloco de um card só: a foto sobe para o topo e ganha a largura inteira. É o caso da ambulância, e é preferível a um card gordo com uma miniatura perdida no canto esquerdo. */ /* ── O CARD SOZINHO É UM CARD COMO OS OUTROS ──────────────────────────────── Aqui havia três regras que davam ao bloco da ambulância — o único com um card só — uma faixa 16:9 com teto de 232 px e o texto EMBAIXO da foto. Elas faziam sentido quando o card era foto em cima e texto embaixo. Esse layout acabou: a fotografia passou a preencher o card inteiro e o texto a deitar sobre ela. As regras ficaram, e o resultado medido foi um card de 232 px ao lado de vizinhos de 396 — a ambulância parecia uma nota de rodapé das outras duas estruturas, quando é a primeira delas na ordem do cuidado. Não há mais exceção. Um card é um card. */ /* ══ 8 · RESPONSIVO ══════════════════════════════════════════════════════════ 390 · 768 · 1100 · 1440. Abaixo de 1180 o painel desce para baixo da maquete; abaixo de 560 a cena é aproximada e as beiradas da placa saem de quadro — uma maquete legível vale mais que uma placa inteira ilegível. O CORTE É 1180 E NÃO 1024, E O MOTIVO FOI MEDIDO. Em duas colunas a partir de 1024 o painel fica com ~400px: a grade dos cards cai para uma coluna só e o bloco do hospital passa a esconder 1.145 px de 1.631 atrás de rolagem interna — 70% do conteúdo, no bloco que é o argumento da seção. Empilhado, o painel ocupa a largura toda, a grade volta a três colunas e o mesmo conteúdo cabe. Um notebook de 1366 com a janela pela metade senta exatamente nessa faixa. */ @media (max-width: 1179px) { .maquete-cena { grid-template-columns: minmax(0, 1fr); } .maquete { --ceu: 96px; } .maquete-painel { margin-top: 0; } } @media (max-width: 719px) { .maquete { --alvo: 56px; --ceu: 84px; --lupa: 1.15; --painel-h: clamp(300px, 62svh, 460px); } /* A MAQUETE SANGRA ATÉ A BORDA no celular. É o que devolve à cena os 40px que a goteira comeria, e é também o gesto certo: um mapa de ponta a ponta lê como cena, não como cartão. O painel continua dentro da goteira, com a moldura arredondada — quem sangra é a cena, não a leitura. */ .maquete-palco { margin-inline: calc(var(--e-goteira) * -1); } /* o respiro do empilhamento sem JS; com o carrossel ligado o padding é zero e a fotografia sangra até a borda do vidro */ .maquete-cards { padding: 0 var(--e-4) calc(var(--e-4) + 24px); } } /* Acima de 1,25 de lupa a AMBULÂNCIA sai de quadro: as três peças ocupam de 15% a 92% da largura da placa, e o que passa disso corta a ponta esquerda. O teto da aproximação não é gosto, é essa conta. */ @media (max-width: 430px) { .maquete { --lupa: 1.24; --ceu: 72px; } /* NO ESTREITO A CHAPA SAI DA TELA. A peça da ambulância mora perto da borda esquerda e o botão é centrado nela: chapa mais larga, mais coisa para fora. Como o componente inteiro é `em`, um número resolve — e a folga da direita encolhe junto, porque `3.3em` de vão para a pastilha é generoso num botão de 17px e exagerado num de 9. */ .maquete-rotulo { --btn-size: clamp(8.5px, 2.6vw, 11px); padding-left: .7em; padding-right: 2.4em; } } /* ══ 9 · SEM MOVIMENTO ═══════════════════════════════════════════════════════ Não é degradação: é a mesma cena, montada e parada. O módulo editorial nunca põe `.is-tocando` neste caso, então a composição final já é o estado padrão — aqui só se apaga o resto (a troca do painel, a seleção, a paralaxe). O painel continua funcionando: clicar troca o bloco, sem transição nenhuma. */ @media (prefers-reduced-motion: reduce) { /* `.rotulo-icone` entrou nesta lista porque o componente de origem não trazia estado estático — a ficha dele avisa. Sem transição, a gaveta não corre: a pastilha já aparece aberta no hover, o que preserva a resposta ao gesto e apaga só o movimento. */ .maquete-corpo, .maquete-rotulo, .rotulo-icone, .rotulo-icone svg, .maquete-sombra, .maquete-placa img, .maquete-peca, .maquete.esta-ligado .maquete-bloco.is-aberto { animation: none !important; transition: none !important; } .maquete-mundo { perspective-origin: 50% 50%; } .maquete.ja-pousou .maquete-peca:not(.is-ativa) .maquete-corpo { /* sem `blur`: profundidade de campo é efeito de câmera, e aqui não há câmera */ filter: saturate(.55); transform: none; } .maquete.ja-pousou .maquete-peca.is-ativa .maquete-corpo { transform: none; } } /* ══ 10 · ALTO CONTRASTE ═════════════════════════════════════════════════════ No modo de alto contraste do sistema o navegador descarta o gradiente da pílula e zera o fundo da aba aberta: as três etiquetas renderizam iguais — pílula branca, texto e borda na mesma cor — e ninguém enxerga qual bloco está aberto. As cores de seleção do próprio sistema são a única distinção que o modo respeita, e é por isso que aqui elas são autorizadas na mão. */ /* Com o botão a conta é a mesma, e a pastilha do ícone entra nela: o modo descarta o gradiente da chapa, a sombra do relevo e a sombra da pastilha, e sobra tudo na mesma cor de sistema — chapa, pastilha e seta indistinguíveis. Aqui a chapa volta a ter contorno de sistema para não sumir no `Canvas`, a pastilha inverte, e a aba aberta usa as cores de seleção, que é a única distinção que o modo respeita. */ @media (forced-colors: active) { .maquete-rotulo { border: 1px solid CanvasText; color: CanvasText; forced-color-adjust: none; } .rotulo-icone { background: CanvasText; } .rotulo-icone svg { color: Canvas; } .maquete-peca.is-ativa .maquete-rotulo { background: Highlight; color: HighlightText; forced-color-adjust: none; } } /* ════════════════════════════════════════════════════════════════════════════ ★ § 11 · ESTE BLOCO VAI EM `maquete.css`, NÃO AQUI ★ — ETAPA 4 `maquete.css` carrega DEPOIS de `page-home.css`, então `.maquete-card .pontas-linha` (0,2,0) venceria qualquer coisa escrita acima. O conserto tem de morar na folha dele. E há código morto a remover junto. DUAS regras vestem o mesmo elemento: maquete.css:901 `.maquete-card-corpo .pontas-linha` line-height: 1.24 maquete.css:1015 `.maquete-card .pontas-linha` line-height: 1.28 Conferido no HTML (index.html:623-633): o `

` é filho de `.maquete-card-corpo`, que é filho de `.maquete-card` — as duas casam, as duas pesam (0,2,0), e a de baixo vence por ordem. A medição confirma: as 13 peças chegaram à tela com 26,6px, que é 20,8 × 1,28. O `1.24` da linha 901 nunca pintou nada. `.pontas-linha` é frase curta e afirmativa dentro de um cartão — «O plantão que começa antes do hospital.» Mesmo papel e mesmo corpo do `.orb-placa-titulo`: passa a ter a mesma entrelinha, 26,0px nos dois. 1 · APAGAR a declaração `line-height: 1.24` de maquete.css:901. É regra morta. 2 · SUBSTITUIR o `line-height: 1.28` de maquete.css:1015 por: */ .maquete-card .pontas-linha { line-height: var(--r-cartao); }