/* Versicolor® · Antevisão Versicolor® (dono: frente F7). DIRECAO-v2 §4.5, a revisão do cliente de 15-Out-2026 e o pedido do Daniel de 16-Out ("muito texto; mais animação e 3D"). Abertura com o passeio 3D em fotogramas ligado ao scroll (preso meio ecrã no PC, a única secção presa), "Decidir antes de construir." com a planta de Porto Salvo em 3D e um render por entrada (2.ª ronda: o júri pediu prova de realismo), a sequência PLANTA, 3D, EXECUÇÃO, RESULTADO com a fusão de luz do motor (data-fundir), o comparador com a troca de par em fusão, os projetos em antevisão e o fim. As peças 3D e o seu CSS de base são do motor (base.css, bloco "3D"); aqui só a composição da página. As revelações (imagens das entradas, o projeto sobre a planta) são máscaras em transform: só o compositor trabalha. Sem JS e com movimento reduzido: imagens paradas e todo o texto à vista. */ /* ------------------------------------------------------------------ abertura: o passeio 3D ligado ao scroll */ /* overflow clip e não hidden: hidden fazia da secção um contentor de scroll e o palco do passeio deixava de ficar preso */ .ant-ab { height: auto; min-height: 0; overflow: clip; } .ant-ab::after { content: none; } /* o véu vai dentro do palco, preso com a imagem */ .ant-ab__media { position: relative; z-index: 0; } .ant-ab .seq3d__palco, html.js .ant-ab .seq3d.sequencia--presa:not(.seq3d--parada) .seq3d__palco { aspect-ratio: auto; width: 100%; height: 100svh; min-height: 560px; margin: 0; background: var(--noite); } html.js .ant-ab .seq3d.sequencia--presa:not(.seq3d--parada) > .seq3d__fixo { padding-top: 0; display: block; } .ant-ab__veu { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(11, 11, 12, .62) 0%, rgba(11, 11, 12, .18) 38%, rgba(11, 11, 12, 0) 60%), linear-gradient(to bottom, rgba(11, 11, 12, .35), rgba(11, 11, 12, 0) 22%); } /* a casa acende-se depois da frase (o mesmo tempo da abertura do sistema): um véu negro que se apaga em 2,4 s */ .ant-ab__veu::before { content: ''; position: absolute; inset: 0; background: var(--noite); opacity: 0; } .ant-ab .seq3d__fio { z-index: 3; } .ant-ab .ant-ab__3d { top: auto; bottom: 20px; left: var(--margem); } .ant-ab__legenda { position: absolute; z-index: 3; left: calc(var(--margem) + 46px); bottom: 27px; pointer-events: none; font: 500 var(--t-rotulo)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 241, 236, .72); } /* a frase do cliente fica no primeiro ecrã e sobe com o scroll, enquanto o passeio anda preso por trás */ .ant-ab__primeiro { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 100svh; min-height: 560px; pointer-events: none; } .ant-ab__rotulo { margin: 22px 0 0; } .ant-ab__frase { max-width: none; } /* abaixo de 390 px, "tornamos o futuro visível." partia em duas linhas: o título do cliente fica nas duas dele */ @media (max-width: 389px) { .ant-ab__frase { font-size: calc(var(--t-abertura) * .9); } } @media (max-width: 767px) { .ant-ab .abertura__texto { bottom: 84px; } .ant-ab .ant-ab__3d { bottom: 22px; } .ant-ab__legenda { bottom: 29px; } } /* a frase entra com o primeiro ecrã, sem esperar pelo JavaScript (LCP com a rede lenta): as linhas sobem da máscara em .8 s (a segunda .08 s depois), o rótulo sobe 20 px em .6 s e parte de opacidade .01 (conta para o LCP) */ @keyframes ant-ab-linha { from { transform: translate3d(0, 110%, 0); } } @keyframes ant-ab-subir { from { opacity: .01; transform: translate3d(0, 20px, 0); } } @keyframes ant-ab-luz { from { opacity: .97; } to { opacity: 0; } } @media (prefers-reduced-motion: no-preference) { .js:not(.sem-mov) .ant-ab__frase .l > span { animation: ant-ab-linha .8s cubic-bezier(.165, .84, .44, 1) both; } .js:not(.sem-mov) .ant-ab__frase .l + .l > span { animation-delay: .08s; } .js:not(.sem-mov) .ant-ab__rotulo { animation: ant-ab-subir .6s cubic-bezier(.25, .46, .45, .94) .3s both; } .js:not(.sem-mov) .ant-ab__veu::before { animation: ant-ab-luz 2.4s cubic-bezier(.65, 0, .35, 1) .55s both; } } /* ------------------------------------------------------------------ "Ler mais": o resto do texto do cliente no sítio O botão e o abrir são os do site todo (M15 do base.css e do core.js); aqui só a voz do texto */ .ant-dec__principal p + p { margin-top: .75em; } .ant-dec__primeira { color: var(--tinta); } /* ------------------------------------------------------------------ "Decidir antes de construir." e a planta em 3D */ .ant-dec__grelha { row-gap: 30px; align-items: start; } .ant-dec__lado { display: grid; gap: 22px; align-content: start; min-width: 0; } .ant-dec__titulo { max-width: 12ch; margin: 0; } .ant-dec__principal { margin: 0; max-width: 33rem; } .ant-dec__itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .ant-dec__item { display: grid; gap: 6px; } .ant-dec__rot { margin: 0; font: inherit; } .ant-dec__ir { position: relative; display: inline-flex; align-items: baseline; gap: 12px; min-height: 44px; padding: 12px 0 0; text-align: left; font: 500 var(--t-rotulo)/1.35 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); transition: color .4s var(--ease); } /* o número é do cliente (01 | ESPAÇOS) e decorativo: vem do data-n, como os numerais do sistema */ .ant-dec__ir::before { content: attr(data-n); flex: none; font: 500 12px/1 var(--sans); letter-spacing: .1em; color: var(--acento); } .ant-dec__item.is-ativo .ant-dec__ir { color: var(--tinta); } .ant-dec__ir:focus-visible { outline: 2px solid var(--luz); outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .ant-dec__ir:hover { color: var(--tinta); } } .ant-dec__texto { margin: 0; font-size: 16px; line-height: 1.5; color: var(--tinta-3); max-width: 34ch; text-wrap: pretty; } .ant-dec__palco { min-width: 0; } /* o palco: a planta em 3D por baixo e as imagens das entradas por cima, todas no mesmo sítio */ .ant-dec__cena { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--noite); } .ant-dec__cena > .planta3d { position: absolute; inset: 0; } .ant-dec__cena .planta3d__palco { aspect-ratio: auto; height: 100%; border-radius: 0; } .ant-dec__vista { position: absolute; inset: 0; z-index: 2; margin: 0; overflow: hidden; } .ant-dec__vista[data-vista="2"] { z-index: 3; } .ant-dec__mascara, .ant-dec__img { position: absolute; inset: 0; overflow: hidden; } .ant-dec__img { background: var(--noite); } .ant-dec__img picture, .ant-dec__img img { display: block; width: 100%; height: 100%; } .ant-dec__img img { object-fit: cover; } /* a faixa de luz: anda com a borda da máscara (a mesma transformação) e só se vê enquanto passa (.e-passa). Por dentro, um rasto quente sobre a imagem que chega; na borda, um fio claro; por fora, o clarão sobre o que sai */ .ant-dec__fio { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: linear-gradient(90deg, rgba(205, 164, 96, 0) calc(100% - 220px), rgba(205, 164, 96, .22) calc(100% - 70px), rgba(244, 214, 160, .75) calc(100% - 6px), rgba(255, 246, 228, 1) 100%); transition: opacity .45s var(--ease); } .ant-dec__fio::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 90px; background: linear-gradient(90deg, rgba(244, 214, 160, .5), rgba(205, 164, 96, .12) 40%, rgba(205, 164, 96, 0)); } .ant-dec__vista--tel { display: none; } /* as imagens das entradas só se pedem quando o palco se aproxima (o antevisao.js põe .ant-imgs); sem JS, logo */ .js .ant-dec__cena:not(.ant-imgs) .ant-dec__img img { display: none; } /* com JS: a máscara e a imagem andam em sentidos contrários (a imagem fica parada enquanto a borda passa) */ html.js .ant-dec__vista { visibility: hidden; transition: visibility 0s linear 1.1s; } html.js .ant-dec__vista.is-on { visibility: visible; transition: visibility 0s; } html.js .ant-dec__mascara, html.js .ant-dec__fio { transform: translate3d(-100%, 0, 0); } html.js .ant-dec__img { transform: translate3d(100%, 0, 0); } html.js .ant-dec__mascara, html.js .ant-dec__img { transition: transform 1.1s var(--ease-io); } html.js .ant-dec__fio { transition: transform 1.1s var(--ease-io), opacity .45s var(--ease); } html.js .ant-dec__vista.is-on .ant-dec__mascara, html.js .ant-dec__vista.is-on .ant-dec__img, html.js .ant-dec__vista.is-on .ant-dec__fio { transform: none; } html.js .ant-dec__vista.e-passa .ant-dec__fio { opacity: 1; transition: transform 1.1s var(--ease-io), opacity .15s var(--ease); } html.sem-mov .ant-dec__vista, html.sem-mov .ant-dec__mascara, html.sem-mov .ant-dec__img, html.sem-mov .ant-dec__fio { transition: none; } @media (prefers-reduced-motion: reduce) { html.js .ant-dec__vista, html.js .ant-dec__mascara, html.js .ant-dec__img, html.js .ant-dec__fio { transition: none; } } /* sem JS: a planta e as duas imagens à vista, paradas */ html:not(.js) .ant-dec__cena { aspect-ratio: auto; overflow: visible; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: none; } html:not(.js) .ant-dec__cena > .planta3d { position: relative; grid-column: 1 / -1; } html:not(.js) .ant-dec__cena .planta3d__palco { aspect-ratio: 16 / 10; height: auto; } html:not(.js) .ant-dec__vista { position: relative; aspect-ratio: 4 / 3; } /* o rótulo de uma imagem tapada por outra (a planta por baixo de um render, um render por baixo do seguinte) sai quando a de cima acaba de passar: o rótulo 3D nunca falta no palco */ html.js .ant-dec__cena:has(.ant-dec__vista.is-on:not(.ant-dec__vista--tel)) .planta3d__rotulo, html.js .ant-dec__vista:has(~ .ant-dec__vista.is-on) .vc3d-rotulo { visibility: hidden; transition: visibility 0s linear 1.1s; } /* com JS e movimento: as três entradas são os botões da planta e só o texto da ativa está à vista; os três textos ocupam a mesma célula, para a altura não mudar quando a entrada muda */ .ant-dec__itens.ant-vivo { grid-template-columns: minmax(0, 1fr); gap: 0; } .ant-vivo .ant-dec__item { display: contents; } .ant-vivo .ant-dec__rot { grid-column: 1; border-top: 1px solid var(--linha); } .ant-vivo .ant-dec__item:nth-child(1) .ant-dec__rot { grid-row: 1; } .ant-vivo .ant-dec__item:nth-child(2) .ant-dec__rot { grid-row: 2; } .ant-vivo .ant-dec__item:nth-child(3) .ant-dec__rot { grid-row: 3; } .ant-vivo .ant-dec__ir { width: 100%; padding: 15px 0; } .ant-vivo .ant-dec__ir::after { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--acento); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease); } .ant-vivo .is-ativo .ant-dec__ir::after { transform: scaleX(1); } .ant-vivo .ant-dec__texto { grid-row: 4; grid-column: 1; margin-top: 10px; opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; } .ant-vivo .is-ativo .ant-dec__texto { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease) .2s, transform .7s var(--ease) .2s, visibility 0s; } @media (max-width: 1023px) { /* telemóvel e tablet: a planta logo a seguir ao texto, as três entradas por baixo dela (mudam com a planta) */ .ant-dec__lado { display: contents; } .ant-dec__titulo, .ant-dec__principal, .ant-dec__palco, .ant-dec__itens { grid-column: 1 / -1; } .ant-dec__titulo { grid-row: 1; } .ant-dec__principal { grid-row: 2; margin-top: -12px; } .ant-dec__palco { grid-row: 3; margin-top: -6px; } .ant-dec__itens { grid-row: 4; margin-top: -14px; } } @media (max-width: 767px) { /* telemóvel: as três entradas numa fila, o texto da ativa por baixo delas */ .ant-dec__itens.ant-vivo { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; } .ant-vivo .ant-dec__item:nth-child(n) .ant-dec__rot { grid-row: 1; } .ant-vivo .ant-dec__item:nth-child(2) .ant-dec__rot { grid-column: 2; } .ant-vivo .ant-dec__item:nth-child(3) .ant-dec__rot { grid-column: 3; } .ant-vivo .ant-dec__ir { flex-direction: column; gap: 6px; padding: 14px 0 6px; font-size: 10.5px; letter-spacing: .13em; } .ant-vivo .ant-dec__texto { grid-row: 2; grid-column: 1 / -1; margin-top: 6px; } /* os números das três entradas à vista e só o nome da ativa (o nome de cada uma está no aria-label do botão) */ .ant-vivo .ant-dec__item:not(.is-ativo) .ant-dec__nome { visibility: hidden; } /* telemóvel: sem three.js; a 01 é a vista 3D do rés do chão, sempre por baixo. Palco quadrado: o palco, as três entradas e o texto cabem juntos no ecrã */ .ant-dec__cena { aspect-ratio: 1 / 1; } .ant-dec__cena > .planta3d { display: none; } .ant-dec__vista--tel { display: block; z-index: 1; } html.js .ant-dec__vista--tel { visibility: visible; } html.js .ant-dec__vista--tel .ant-dec__mascara, html.js .ant-dec__vista--tel .ant-dec__img { transform: none; transition: none; } .ant-dec__vista--tel .ant-dec__fio { display: none; } html:not(.js) .ant-dec__vista--tel { grid-column: 1 / -1; aspect-ratio: 3 / 2; } } @media (min-width: 1024px) { .ant-dec__lado { grid-column: 1 / 5; align-self: stretch; grid-template-rows: auto auto 1fr; } .ant-dec__itens { align-self: end; } /* o palco estica até ao fim da coluna do texto (antes acabava um terço de ecrã mais cedo e a metade direita ficava vazia); nunca mais baixo do que 16:10 */ .ant-dec__palco { grid-column: 5 / -1; align-self: stretch; container-type: inline-size; } html.js .ant-dec__cena { aspect-ratio: auto; height: 100%; min-height: 62.5cqw; } } /* ------------------------------------------------------------------ sequência: planta, 3D, execução, resultado */ .ant-seq { --ant-fundo: #0F0A07; } .ant-seq__grelha { row-gap: 26px; align-items: start; } .ant-seq__cabeca { display: grid; gap: 16px; align-content: start; min-width: 0; } .ant-seq__titulo { max-width: 11ch; margin: 0; } .ant-seq__ir { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 22px; } .ant-ir { position: relative; display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 14px 0 12px; font: 500 var(--t-rotulo)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); transition: color .4s var(--ease); } .ant-ir::before { content: attr(data-n); flex: none; color: var(--acento); } .ant-ir::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--acento); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); } .ant-ir[aria-pressed="true"] { color: var(--tinta); } .ant-ir[aria-pressed="true"]::after { transform: scaleX(1); } .ant-ir:focus-visible { outline: 2px solid var(--luz); outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .ant-ir:hover { color: var(--tinta); } } .ant-seq__onde { margin: 0; min-height: 1.3em; font: 500 var(--t-rotulo)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); } /* chave da planta: o traço claro é a casa como estava, o traço de luz é o projeto (só enquanto a planta está à vista) */ .ant-chave { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: -6px 0 0; font: 400 12px/1.3 var(--sans); color: var(--tinta-3); transition: opacity .5s var(--ease), visibility 0s; } .ant-seq[data-estado]:not([data-estado="0"]) .ant-chave { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; } .ant-chave__item { display: inline-flex; align-items: center; gap: 10px; } .ant-chave__item::before { content: ''; width: 22px; height: 1px; background: rgba(217, 212, 202, .55); } .ant-chave__item--nova::before { background: var(--luz); height: 1.5px; } /* o palco da fusão (motor 3D): quatro camadas no mesmo enquadramento */ .ant-fundir { --ar: 3 / 2; min-width: 0; } .ant-fundir .fundir__palco { background: var(--ant-fundo); } .ant-fundir .fundir__camada { background: var(--ant-fundo); } .ant-fundir__fio { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 1px; background: rgba(243, 241, 236, .14); pointer-events: none; } .ant-fundir__fio i { position: absolute; inset: 0; background: var(--luz); transform-origin: 0 50%; transform: scaleX(var(--p, .25)); transition: transform 1.1s var(--ease-io); } html:not(.js) .ant-fundir__fio { display: none; } /* as fotografias da sequência só se pedem quando a secção se aproxima (o antevisao.js põe .ant-imgs); até lá fica a cor de cada imagem. Sem JS, mostram-se logo */ .js .ant-seq:not(.ant-imgs) .fundir__camada img { display: none; } @media (max-width: 767px) { .ant-fundir { --ar: 1 / 1; } /* telemóvel: os quatro estados são quatro traços por cima do palco (o nome está no rótulo do palco e no aria-label de cada botão); o espaço também se diz no palco */ .ant-seq__ir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 6px; } .ant-ir { width: 100%; padding: 0; } .ant-ir::before, .ant-ir__nome { display: none; } .ant-ir::after { bottom: 21px; height: 2px; transform: none; background: rgba(243, 241, 236, .2); transition: background-color .5s var(--ease); } .ant-ir[aria-pressed="true"]::after { transform: none; background: var(--luz); } .ant-seq__onde { display: none; } /* a chave das cores da planta fica para o PC e o tablet (no telemóvel, o rótulo do palco diz "Planta") */ .ant-chave { display: none; } } /* telemóveis baixos (Safari com as barras, navegadores do Instagram e do WhatsApp): palcos um pouco mais baixos */ @media (max-width: 767px) and (max-height: 720px) { .ant-dec__cena { aspect-ratio: 5 / 4; } } @media (min-width: 1024px) { .ant-seq__cabeca { grid-column: 1 / 5; align-self: stretch; grid-template-rows: auto auto 1fr auto auto; } .ant-seq__ir { flex-direction: column; flex-wrap: nowrap; gap: 0; align-self: end; grid-row: 3; } .ant-seq__ir li { border-top: 1px solid var(--linha); } .ant-ir { width: 100%; padding: 16px 0 15px; } .ant-ir::after { top: -1px; bottom: auto; } .ant-seq__onde { grid-row: 4; } .ant-chave { grid-row: 5; margin-top: 0; } .ant-fundir { grid-column: 5 / -1; } } /* sem JS: as quatro camadas em grelha (base.css), cada uma com o seu rótulo; os botões não teriam para onde ir */ html:not(.js) .ant-seq__ir, html:not(.js) .ant-seq__onde { display: none; } @media (min-width: 1024px) { html:not(.js) .ant-fundir .fundir__palco { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ------------------------------------------------------------------ a planta da sequência, em duas imagens */ /* tools/antevisao-plantas.py: as duas no enquadramento do render 3D (o mesmo foco, 40% 50%). O projeto (a primeira, a que a fusão lê) fica por cima da casa como estava */ .ant-planta { position: absolute; inset: 0; overflow: hidden; background: var(--ant-fundo); } .ant-planta > picture { position: absolute; inset: 0; display: block; overflow: hidden; } .ant-planta > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ant-planta__projeto { z-index: 1; } .ant-planta__luz { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: linear-gradient(90deg, rgba(205, 164, 96, 0) calc(100% - 180px), rgba(205, 164, 96, .13) calc(100% - 60px), rgba(244, 214, 160, .5) calc(100% - 5px), rgba(255, 246, 228, .95) 100%); } .ant-planta__luz::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 70px; background: linear-gradient(90deg, rgba(244, 214, 160, .28), rgba(205, 164, 96, .06) 40%, rgba(205, 164, 96, 0)); } html:not(.js) .ant-camada--planta { min-height: 0; } /* com movimento: quando o palco está a um terço à vista, a casa como estava aparece e o projeto acende da esquerda para a direita atrás da faixa de luz (a máscara e a imagem em sentidos contrários: só transformações) */ @keyframes ant-pl-luz { 0% { transform: translate3d(-100%, 0, 0); opacity: 0; } 8% { opacity: 1; } 86% { opacity: 1; } 100% { transform: none; opacity: 0; } } @media (prefers-reduced-motion: no-preference) { .js:not(.sem-mov) .ant-planta__antes { transition: opacity .6s var(--ease); } .js:not(.sem-mov) .ant-planta:not(.viva) .ant-planta__antes { opacity: 0; } .js:not(.sem-mov) .ant-planta__projeto, .js:not(.sem-mov) .ant-planta__projeto img { transition: transform 1.5s var(--ease-io) .45s; } .js:not(.sem-mov) .ant-planta:not(.viva) .ant-planta__projeto { transform: translate3d(-100%, 0, 0); } .js:not(.sem-mov) .ant-planta:not(.viva) .ant-planta__projeto img { transform: translate3d(100%, 0, 0); } .js:not(.sem-mov) .ant-planta.viva .ant-planta__luz { animation: ant-pl-luz 1.5s var(--ease-io) .45s both; } } /* ------------------------------------------------------------------ comparador com seletor de pares */ .ant-cmp__grelha { row-gap: 22px; align-items: start; } .ant-cmp__palco { grid-column: 1 / -1; grid-row: 2; position: relative; } .ant-cmp__lado { grid-column: 1 / -1; grid-row: 1; display: grid; gap: 16px; align-content: start; min-width: 0; } .ant-cmp__titulo { max-width: 12ch; } .ant-cmp__intro { color: var(--tinta-3); max-width: 40ch; font-size: 15px; line-height: 1.5; } .ant-sel__painel { position: relative; } .ant-sel__painel[hidden] { display: none; } .ant-par--cortina .comparar__palco { aspect-ratio: 3 / 2; } .ant-par--cortina [data-camada] img { object-position: var(--foco-movel, 50% 50%); } .ant-par--lado { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; aspect-ratio: 3 / 2; } .ant-par__lado { position: relative; margin: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); } .ant-par__quadro { position: relative; overflow: hidden; background: var(--superficie); min-height: 0; } .ant-par__quadro > picture, .ant-par__quadro img { width: 100%; height: 100%; } .ant-par__quadro img { object-fit: cover; } .ant-par__rot { position: absolute; z-index: 3; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 9px; font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--osso); background: rgba(11, 11, 12, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; } .ant-par__ponto { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--osso); } .ant-par__ponto--real { background: var(--luz); border-color: var(--luz); } /* o antes de outro ponto de vista: pequeno, no canto, sem tapar a linha */ .ant-par__antes { position: absolute; z-index: 4; left: 12px; bottom: 12px; width: clamp(96px, 16%, 176px); margin: 0; border: 1px solid rgba(243, 241, 236, .5); background: var(--noite); } .ant-par__antes picture, .ant-par__antes img { display: block; width: 100%; height: auto; } .ant-par__antes figcaption { padding: 6px 8px; font-size: 10px; letter-spacing: .12em; line-height: 1.3; } .ant-cmp__notas { min-height: 0; } .ant-sel__nota { display: grid; gap: 8px; } .ant-sel__nota[hidden] { display: none; } .ant-sel__legenda { font: 300 clamp(19px, 1.5vw, 22px)/1.28 var(--serif); letter-spacing: -.005em; color: var(--tinta); max-width: 30ch; text-wrap: pretty; } .ant-sel__modo { display: inline-flex; align-items: center; gap: 10px; font: 500 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); } /* um quadrado partido pela linha (mesmo ponto de vista) ou dois quadrados (lado a lado) */ .ant-sel__modo-ico { position: relative; flex: none; width: 18px; height: 12px; } .ant-sel__modo-ico--cortina { border: 1px solid currentColor; } .ant-sel__modo-ico--cortina::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--luz); } .ant-sel__modo-ico--lado::before, .ant-sel__modo-ico--lado::after { content: ''; position: absolute; top: 0; bottom: 0; width: 8px; border: 1px solid currentColor; } .ant-sel__modo-ico--lado::before { left: 0; } .ant-sel__modo-ico--lado::after { right: 0; } .ant-sel { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(var(--margem) * -1); padding: 2px var(--margem) 4px; scroll-padding-inline: var(--margem); } .ant-sel::-webkit-scrollbar { display: none; } /* separadores só com o espaço: a obra diz-se na nota do par ativo */ .ant-sel__item { flex: 0 0 auto; scroll-snap-align: start; display: grid; align-content: center; min-height: 48px; text-align: left; padding: 8px 16px; border: 1px solid var(--linha); color: var(--tinta-2); transition: border-color .3s var(--ease), color .3s var(--ease); } .ant-sel__nome { font: 300 17px/1.15 var(--serif); color: var(--tinta-3); white-space: nowrap; transition: color .3s var(--ease); } .ant-sel__item[aria-selected="true"] { border-color: var(--luz); color: var(--tinta); } .ant-sel__item[aria-selected="true"] .ant-sel__nome { color: var(--tinta); } .ant-sel__item:focus-visible { outline: 2px solid var(--luz); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .ant-sel__item:hover { border-color: var(--linha-forte); } .ant-sel__item:hover .ant-sel__nome { color: var(--tinta); } } .ant-sel__antes { font-size: 13px; line-height: 1.45; color: var(--tinta-3); max-width: 36ch; } /* telemóvel: o modo do par diz-se pelo ícone (role img, aria-label); o texto fica para o PC e o tablet */ @media (max-width: 767px) { .ant-sel__modo-txt { display: none; } .ant-sel__modo-ico { width: 22px; height: 14px; } } /* sem JS só o primeiro par está no palco (os outros vêm em