/* ========================================================================= cauda.css — uma unica peca depois da Estacao 04 Carregado POR ULTIMO: ganha a cascata a `styles.css` (v2) e a `signal.css` (tokens v3), que e onde vivem as regras corrigidas aqui. O problema, medido antes de editar (tools/proof_seams.py --conjunto cauda, tools/proof_cauda.py): depois de `#estudio` o site volta a ser uma pilha de quadros. Nao por causa da paleta — por causa da GEOMETRIA de tres declaracoes: 1. `.section + .section{border-top:1px solid var(--line)}` (styles.css) — uma regua literal entre seccoes; 2. `.section--panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}` — uma linha branca de 1px exactamente na aresta de cima; 3. `.section--panel{background:radial-gradient(... at 50% 0% ...)}` — o lavado branco esta ancorado no TOPO, ou seja a seccao e mais clara precisamente onde encosta a anterior. Dai o degrau de 107.7 (salto maximo 172.9) medido na costura imob->contacto. A correccao nao muda a paleta: muda onde cada seccao e clara e como entrega a cor a seguinte. Cada fim de seccao termina exactamente na cor com que a proxima comeca, e a passagem faz-se numa rampa longa que cabe INTEIRA na almofada da seccao — nenhum texto chega a assentar sobre a rampa, que e o que mantem o contraste igual ao que era (ver tools/proof_contraste.py). O que NAO se faz aqui, de proposito: mexer nas cores do texto. Os tokens `--ink`/`--ink-2` foram redefinidos escuros em `signal.css` enquanto o texto da v2 continua a vir dos tokens claros — esse defeito e anterior e esta fora do encargo desta passagem. Aqui so se garante que nao aumenta. ===================================================================== */ /* ---- 1. nenhuma moldura de pagina ------------------------------------ */ /* A regua de 1px entre seccoes e o que faz a cauda ler-se como uma pilha de cartoes. As costuras passam a ser feitas so de cor. */ /* `#estudio` entrou nesta lista depois de medido: a regua de 1px ainda estava la, e a costura 03->04 era a ULTIMA que ainda se lia como moldura. Medido em pixeis na propria pagina, com a fronteira a 162px do topo do ecra: a linha 161 media 18 de luminancia, a 162 media 41, a 163 voltava a 18 — ou seja uma unica linha clara de ponta a ponta, exactamente sobre a fronteira. Dai o salto de 13.9 (movimento normal) e 23.0 (movimento reduzido) que a cor media nao apanhava, porque a diferenca de COR entre as duas seccoes e de 3.0. */ #estudio, #trabalho, #demo, #imobiliario, #contacto, #collection, .site-footer{ border-top: 0; } .section--panel{ box-shadow: none; } /* ---- 2. a curva: cada seccao entrega a cor a seguinte ----------------- */ /* A Estacao 04 termina em `--ink`. Os projectos recebem-no e aprofundam ate `--void` — o ponto mais fundo da cauda, que e tambem onde as capas dos projectos tem de brilhar. */ .proofs{ background: linear-gradient(180deg, var(--ink) 0, color-mix(in srgb, var(--ink) 58%, var(--void)) 7%, var(--void) 20%, var(--void) 78%, color-mix(in srgb, var(--void) 62%, var(--calor-a)) 100%); } /* A demo recebe esse fundo ja com um grao de calor e abre para o castanho da v2. A almofada de cima cresce para a rampa caber antes do primeiro texto. */ .section--dark{ padding-top: clamp(150px, 18vh, 240px); background: linear-gradient(180deg, color-mix(in srgb, var(--void) 62%, var(--calor-a)) 0, var(--calor-b) 30%, var(--calor-c) 74%, color-mix(in srgb, var(--calor-c) 46%, var(--ink)) 100%); } /* O imobiliario recebe o calor e volta ao azul nocturno, entregando ja o primeiro passo em direccao ao painel do contacto. */ #imobiliario{ background: linear-gradient(180deg, color-mix(in srgb, var(--calor-c) 46%, var(--ink)) 0, var(--ink) 22%, var(--ink) 70%, color-mix(in srgb, var(--ink) 55%, var(--ink-2)) 100%); } /* ---- 3. o contacto: a unica area clara, nascida e entregue devagar ---- */ /* O lavado branco continua a existir — a area clara e deliberada, e onde a decisao acontece — mas deixa de estar ancorada na aresta. Duas camadas fazem o trabalho: - um veu de `--ink` no topo, que desce da cor exacta com que o imobiliario acaba ate transparente, ao longo de toda a almofada; - um veu do castanho da coleccao no fundo, pelo mesmo motivo, para baixo. As almofadas crescem para que a rampa CAIBA: o texto comeca depois dela, e por isso o fundo debaixo do texto e o mesmo de antes. */ #contacto.section--panel{ padding-top: clamp(200px, 26vh, 340px); padding-bottom: clamp(190px, 24vh, 320px); background: linear-gradient(180deg, var(--ink) 0, rgba(15, 18, 27, 0) 100%) top / 100% clamp(200px, 26vh, 340px) no-repeat, linear-gradient(0deg, var(--calor-c) 0, transparent 100%) bottom / 100% clamp(190px, 24vh, 320px) no-repeat, radial-gradient(150% 96% at 50% 30%, rgba(255, 255, 255, .62), transparent 66%), var(--ink-2); } /* ---- 4. coleccao e rodape: o fecho ------------------------------------ */ /* A coleccao ja recebia o castanho; passa a entregar `--ink` limpo ao rodape em vez de parar a meio. */ #collection{ background: linear-gradient(180deg, var(--calor-c) 0, color-mix(in srgb, var(--calor-c) 40%, var(--ink)) 18%, var(--ink) 52%, var(--ink) 100%); } .site-footer{ background: var(--ink); } /* ---- 5. movimento reduzido -------------------------------------------- */ /* Nada aqui depende de movimento: as rampas sao fundo, nao animacao. A unica coisa a neutralizar e a revelacao temporizada da coleccao, que e anterior a esta passagem (ver FINALIZATION-PLAN.md). */ @media (prefers-reduced-motion: reduce){ #collection{ animation: none; } } /* ---- 6. o fio: o mesmo pulso a mudar de materia ----------------------- */ /* A cor sozinha nao cose o site: cosia as costuras e deixava cada seccao a ser um quadro. Isto e o que ATRAVESSA — o pulso que nasceu da agua na Cena 03/04 continua, mudando de materia em cada zona (luz nos projectos, moldura na demo, horizonte no imobiliario, halo no contacto, linha no rodape). Os elementos sao criados por `scroll/tail.js`; todas as posicoes sao funcao do rectangulo actual da seccao, por isso o scroll para tras recompoe. Nenhuma destas camadas e `fixed` — sao filhas absolutas da sua seccao, morrem com ela e nao podem tapar o cabecalho nem roubar clique. */ .tail-beam, .tail-edge, .tail-horizon, .tail-halo, .tail-line{ position: absolute; pointer-events: none; z-index: 0; display: block; } /* o conteudo fica sempre por cima da luz */ .proofs-inner, #demo > .wrap, #imobiliario > .wrap, #contacto > .wrap, #collection > .wrap, .site-footer > .wrap{ position: relative; z-index: 1; } /* #trabalho — o pulso e luz, e viaja pela grelha */ .tail-beam{ inset: 0; opacity: var(--beam-on, 0); background: radial-gradient(58% 26% at 50% var(--beam-y, 50%), rgba(75, 92, 255, .20), transparent 72%), radial-gradient(34% 14% at 50% var(--beam-y, 50%), rgba(25, 229, 206, .10), transparent 76%); /* O feixe viaja até 94% e a elipse tem 26% de raio: perto do fim da secção passava a aresta e a demo, opaca, cortava-o numa linha recta (vista na passagem de 2026-10-20). A luz apaga-se agora nas duas pontas da secção, onde quer que o feixe esteja. */ -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 86%, transparent 100%); } /* o projecto em vista recebe a luz — o pulso liga os projectos, nao passa por cima deles */ .proof .proof-stage{ transition: box-shadow .35s ease; } .proof.is-lit .proof-stage{ box-shadow: 0 0 0 1px rgba(25, 229, 206, .26), 0 28px 64px -34px rgba(75, 92, 255, .60); } /* #demo — o pulso torna-se interaccao: a moldura respira quando a demo esta no centro do ecra */ /* Ancorado DENTRO da seccao, nao na aresta de baixo. A primeira versao usava `at 50% 100%` e acendia exactamente a costura demo->imobiliario: o degrau media 0.3 antes do pulso e 7.3 depois — a luz tinha-se tornado a moldura que esta folha existe para remover. */ .tail-edge{ inset: 0; background: radial-gradient(112% 52% at 50% 72%, rgba(200, 121, 79, calc(var(--edge, 0) * .22)), transparent 72%); } /* #imobiliario — o pulso volta a ser espaco: uma luz de horizonte que sobe com a seccao */ /* Comeca abaixo da aresta pela mesma razao que a moldura da demo: uma luz ancorada em `top:0` acende a costura. Medido em movimento reduzido, onde fica no valor maximo permanentemente: com `top:0` a costura demo->imob media 9.7 de degrau; afastada, volta ao nivel do fundo. */ .tail-horizon{ left: 0; right: 0; top: 7%; height: 54%; /* 2026-10-11: a luz nascia em opacidade máxima no topo da camada, ou seja uma risca horizontal a 7% da secção (vista no print, logo abaixo de Agentes). Agora nasce do zero e só depois sobe — luz, não aresta. */ background: linear-gradient(180deg, transparent 0, rgba(25, 229, 206, calc(var(--horiz, 0) * .08)) 28%, transparent 78%); } /* #contacto — o pulso converge numa unica accao */ .tail-halo{ inset: 0; background: radial-gradient(46% 32% at 50% calc(62% + (1 - var(--halo, 0)) * 16%), rgba(75, 92, 255, calc(var(--halo, 0) * .16)), transparent 72%); } /* rodape — o pulso reduz-se a linha final do sistema */ /* Debaixo do conteudo do rodape, nao na aresta de cima: uma linha de 1px exactamente na costura e uma moldura de pagina, independentemente do que signifique. Medido: com a linha no topo, o salto na costura coleccao->rodape subia de 4.0 para 10.2. */ .tail-line{ left: 0; top: auto; bottom: clamp(18px, 3vh, 30px); width: 100%; height: 1px; transform: scaleX(var(--fim, 0)); transform-origin: 0 50%; background: linear-gradient(90deg, rgba(75, 92, 255, .85), rgba(25, 229, 206, .55), transparent 92%); } /* ---- 7. movimento reduzido: a mesma composicao, parada --------------- */ /* `scroll/tail.js` nao monta com `prefers-reduced-motion`. Sem isto, as luzes simplesmente nao existiriam e a cauda ficaria mais pobre do que a versao com movimento — o roteiro pede composicao EQUIVALENTE, nao ausente. Aqui ficam nos valores de meio percurso, sem nada a mover-se. */ @media (prefers-reduced-motion: reduce){ /* Valores de meio percurso, nao de pico: em movimento reduzido eles ficam permanentes, e um pico permanente le-se como mancha, nao como pulso. */ .tail-beam{ --beam-y: 46%; --beam-on: .7; } .tail-edge{ --edge: .55; } .tail-horizon{ --horiz: .5; } .tail-halo{ --halo: .7; } .tail-line{ --fim: 1; } .proof .proof-stage{ transition: none; } } /* ---- 8. a etiqueta do contacto segue o fundo que passou a ter ---------- */ /* `.section-tag` e `position:absolute` no topo da seccao — ou seja, cai DENTRO da rampa de entrada. No painel claro anterior assentava sobre o lavado branco; agora assenta sobre o veu escuro. Medido em pixeis reais na propria pagina: o contraste da etiqueta caiu de 1.58 para 1.05. Nenhum dos dois passa, porque a cor herdada e o carvao da v2 sobre tokens redefinidos escuros (o defeito anterior, documentado), mas PIORAR uma coisa por causa desta passagem nao e aceitavel. A etiqueta passa a ser lida na familia clara, que e a que corresponde ao fundo que agora tem. */ /* So acima de 900px. Abaixo disso `styles.css` poe a etiqueta em `position:static` e ela cai DEPOIS da rampa, sobre o painel claro — ali a cor herdada (carvao) e a correcta, e clarea-la baixava o contraste de novo (medido: 2.89 a 390px com a cor clara). A regra segue a geometria, nao a seccao. */ @media (min-width: 901px){ #contacto .section-tag{ color: rgba(238, 241, 247, .62); } #contacto .section-tag::before{ background: var(--aqua, #19E5CE); opacity: .7; } } /* ---- 7. uma so familia de cor: a cauda casa com o hero ---------------- */ /* Medido antes de editar (tools/proof_contraste.py --out antes): 92 de 174 elementos abaixo do minimo, com os piores racios entre 1.05 e 1.14 — ou seja invisiveis, nao apenas fracos. A causa e a que o cabecalho deste ficheiro ja tinha identificado e deixado de fora do encargo anterior: `signal.css` redefiniu `--ink`/`--ink-2` para escuro (a familia v3) mas os tokens de TEXTO da v2 (`--bone*`) e de linha (`--line*`) continuaram a ser os de tinta escura sobre papel. Resultado: `#collection h2` e `#contacto h2` medem `rgb(35,31,28)` sobre `rgb(15,18,27)`. Aqui fecha-se esse ciclo, que e exactamente o que "casar cada seccao com a identidade do hero" quer dizer: uma so paleta do `#top` ate ao rodape. Nao se inventa vocabulario novo — usa-se o que a v3 ja tem: `--paper` para texto, `--rule` para linhas, `--volt`/`--aqua`/`--flux` para acentos. */ :root{ /* O calor da cauda deixa de ser o castanho da v2 (`#1E1913`/`#211C17`/ `#17130F`, herdados de uma paleta de papel) e passa a ser a MESMA brasa do fim de tarde da villa, mas assente na familia azul do hero: a mesma luminancia de antes (medida: 33,28,23 -> 34,28,32), outra temperatura. A seccao continua a ser o batimento quente do percurso; deixa e de ser de outra paleta. Sao tres tokens porque as cinco regras da curva acima os partilham — trocar um sem os outros reabre uma costura. */ --calor-a: color-mix(in srgb, var(--void) 87%, #C8794F); --calor-b: color-mix(in srgb, var(--ink) 92%, #C8794F); --calor-c: color-mix(in srgb, var(--void) 91%, #C8794F); } /* ---- 7.1 superficie escura: os tokens da v2 apontam para a familia v3 -- */ /* O conjunto muda INTEIRO. Meio conjunto (so `--bone`, por exemplo) deixa as linhas e os acentos na paleta antiga e cria o defeito inverso. */ #estudio, #trabalho, #demo, #imobiliario, #collection, .site-footer, #contacto .close-cta{ /* `--paper-faint` a `.34` era o que punha 35 elementos de `#estudio` e `#trabalho` a medir 2.88 (minimo 4.5) — texto v3 legitimo, so fraco demais. `.55` mede ~4.9 sobre `--void`. Fica AQUI e nao em `:root`: os outros consumidores do token (`signal.css`, `numbers.css`) estao no hero e na Cena 02, que esta auditoria nao mede, e subir-lhes o nivel mais fraco encostava-o ao `--paper-dim` (.62) e achatava a hierarquia de uma seccao que nao tem defeito nenhum. */ --paper-faint: rgba(238, 241, 247, .55); --bone: var(--paper); --bone-dim: var(--paper-dim); --bone-faint: var(--paper-faint); --line: var(--rule); --line-strong: var(--rule-strong); --accent: var(--aqua); --focus: var(--volt); } /* `#contacto` entra pela `.close-cta` e nao pela seccao inteira, de proposito: o painel claro do formulario e deliberado (ver ponto 3) e ali a tinta escura e a correcta. A `.section-tag` fica igualmente de fora — abaixo de 901px ela cai sobre esse painel, e isso ja esta resolvido no ponto 6. */ #contacto .project-form{ --bone: #2b2724; --bone-dim: rgba(43, 39, 36, .68); --bone-faint: rgba(43, 39, 36, .44); --line: rgba(43, 39, 36, .13); --line-strong: rgba(43, 39, 36, .26); --accent: var(--amber); --focus: var(--amber-deep); } /* ---- 7.2 o acento: o primario da v3, nao o da v2 --------------------- */ /* A regra nao e nova — `villa-night.css` ja pinta `.rs-chapter .btn--primary` a volt sobre void desde a Cena 03. A cauda estava a usar o terracota da v2, que alem de ser de outra paleta media 2.3 de contraste com o seu proprio texto creme. Isto e convergencia para a regra que ja existe. */ #numeros .btn--primary, #estudio .btn--primary, #trabalho .btn--primary, #demo .btn--primary, #imobiliario .btn--primary, #collection .btn--primary, #contacto .close-cta .btn--primary{ --_bg: var(--volt); color: var(--void); box-shadow: 0 14px 34px rgba(200, 255, 46, .18); } #estudio .btn--primary:hover, #trabalho .btn--primary:hover, #demo .btn--primary:hover, #imobiliario .btn--primary:hover, #collection .btn--primary:hover, #contacto .close-cta .btn--primary:hover{ --_bg: #D6FF5E; box-shadow: 0 18px 42px rgba(200, 255, 46, .28); } #estudio .btn--ghost:hover, #trabalho .btn--ghost:hover, #demo .btn--ghost:hover, #imobiliario .btn--ghost:hover, #collection .btn--ghost:hover, #contacto .close-cta .btn--ghost:hover{ border-color: var(--aqua); background: rgba(25, 229, 206, .12); } /* O trio de acentos das fichas da coleccao era `azo/terra/sage` — os tres tons da v2. Passa a ser o trio do hero, pela mesma ordem de leitura. */ #collection .module-card[data-accent="azo"]{ --accent: var(--aqua); } #collection .module-card[data-accent="terra"]{ --accent: var(--volt); } #collection .module-card[data-accent="sage"]{ --accent: var(--flux); } /* As fichas assentam sobre `--ink-2 -> --ink`, que ja e a familia certa; so a sombra de hover e que ainda era a da v2 (tinta sobre papel). */ #collection .module-card:hover{ box-shadow: 0 22px 48px rgba(7, 8, 13, .55); } /* ---- 7.3 movimento reduzido ------------------------------------------ */ /* Nada acima depende de movimento — sao tokens e cor. Nao ha o que neutralizar aqui; o ponto 5 continua a ser a unica regra de movimento deste ficheiro. */ /* ---- 7.4 o que os tokens sozinhos nao alcancam ------------------------ */ /* Tres casos que a remapeacao do ponto 7.1 nao apanha, por razoes diferentes — medidos na segunda passagem (`--out depois1`, 30 reprovas restantes). */ /* (a) `color` e HERDADO ja resolvido. `body{color:var(--bone)}` resolve no `body`, fora do alcance destas seccoes, por isso os filhos herdam `rgb(43,39,36)` e nao o token novo. Tem de ser declarado aqui. */ #estudio, #trabalho, #demo, #imobiliario, #collection, .site-footer, #contacto .close-cta{ color: var(--paper); } /* (b) `.display` traz `color:#231f1c` literal (styles.css), nao um token — media 1.05 no contacto e 1.14 na coleccao e no imobiliario. */ #imobiliario .display, #collection .display, #contacto .close-cta .display{ color: var(--paper); } /* (c) `--flux` (#4B5CFF) mede 3.81 sobre `--void`: chega para uma area de cor, nao para mono de 10px. Os indices do percurso e a chave da terceira ficha usam-no como TEXTO — passam a usar a mesma cor clareada, que mantem o azul-electrico da familia e mede 7.1. */ #estudio .path-eyebrow, #estudio .station-index, #estudio .n, #collection .module-card[data-accent="sage"]{ --flux: #97A3FF; } #estudio .path-eyebrow, #estudio .station-index, #estudio .n{ color: #97A3FF; } /* (d) o `.section-tag` da demo vinha de `.section--dark` a `.45` (3.73). */ #demo .section-tag{ color: var(--paper-faint); } /* (e) `.proof-stage` e um `