/* =========================================================================== * hero.css — a primeira dobra da home (Tela Âncora). Fiel a direcao/base-desktop.png. * * TROCA DAS CAMADAS (hoje o hero roda com a PROVISÓRIA: um plate só, que é o * recorte da metade direita da imagem base). A troca é de MARKUP, não de JS — * a imagem tem que estar no HTML com `src` pra o preload scanner achar (LCP). * * 1. Salve `retrato-lais-poltrona.png` e `luz-de-janela.png` em assets/camadas/. * 2. No index.html: apague o do `.hero__cena-plate` inteiro e, no * lugar dele, cole as duas que estão escritas no comentário * [CAMADAS PENDENTES], no fim do arquivo (já vêm com src, width/height do * spec e o fetchpriority no retrato). Apague o comentário depois. * 3. No , troque o comentário de preload pelo . * 4. Nada de CSS muda: as regras dos dois slots já estão escritas abaixo, e o * hero.js já liga o botão A sozinho quando a luz decodifica. * ===========================================================================*/ /* --- Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100dvh; background-color: var(--chao); /* vinheta quente, só rumo ao canto inferior direito (ΔL ≈ 11/255, medida). Na imagem o creme é chapado no topo, na esquerda e no rodapé esquerdo: ancorar o degradê no canto é o que mantém isso. */ background-image: radial-gradient( 115% 110% at 100% 100%, var(--chao-sombra) 0%, #ece3d8 34%, var(--chao) 62% ); background-attachment: fixed; color: var(--tinta); font-family: var(--fonte-apoio); font-size: var(--tam-corpo); line-height: var(--entre-corpo); -webkit-font-smoothing: antialiased; overflow-x: hidden; } body[data-menu="aberto"] { overflow: hidden; } img { display: block; max-width: 100%; } a { color: inherit; } :focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; border-radius: var(--raio); } .so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Skip link ----------------------------------------------------------- */ .pular { position: fixed; top: 16px; left: var(--margem-header); z-index: 120; transform: translateY(-200%); padding: 12px 20px; background: var(--acao); color: var(--sobre-acao); font-family: var(--fonte-apoio); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-radius: var(--raio); } .pular:focus-visible { transform: translateY(0); outline: 2px solid var(--acao); outline-offset: 4px; } /* --- Header -------------------------------------------------------------- */ .cabecalho { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--h-header); transition: height var(--t-medio) var(--curva-estado), background-color var(--t-medio) var(--curva-estado), backdrop-filter var(--t-medio) var(--curva-estado); } .cabecalho--condensado { height: var(--h-header-condensado); background-color: rgba(243, 237, 227, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cabecalho__interno { display: flex; align-items: center; justify-content: space-between; height: 100%; padding-left: calc(var(--margem-header) - var(--logo-recuo)); padding-right: var(--margem-header); } /* filete mel: 3px, full-bleed, na borda de baixo do header. F1 desenha da esquerda */ .cabecalho__filete { position: absolute; left: 0; right: 0; bottom: 0; height: var(--filete-mel); /* na imagem o filete tem UMA linha em força cheia, não duas: mel claro em cima, o miolo no meio, mel médio embaixo (medido em y 94/95/96 @1586). */ /* stops calibrados contra as linhas 94/95/96 da imagem @1586: o que o navegador pinta é a MÉDIA do gradiente dentro de cada linha de pixel. */ background-image: linear-gradient( to bottom, #fffdf7 0%, #fefbf3 12%, var(--acento) 42%, var(--acento) 72%, #e2c9b1 100% ); transform-origin: left center; animation: desenhar var(--t-lento) var(--curva-mae) 0ms both; } /* --- Assinatura (logo real em máscara: a tinta troca no hover) ------------ */ .marca { display: block; flex: 0 0 auto; line-height: 0; text-decoration: none; animation: subir 400ms var(--curva-mae) 80ms both; } .marca__tinta { display: block; width: var(--logo-largura); height: var(--logo-altura); background-color: var(--tinta-max); transition: background-color var(--t-estado) var(--curva-estado), width var(--t-medio) var(--curva-estado), height var(--t-medio) var(--curva-estado); -webkit-mask-image: url("../assets/logo/assinatura-lais-tinta-800.png"); mask-image: url("../assets/logo/assinatura-lais-tinta-800.png"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; } .cabecalho--condensado .marca__tinta { width: var(--logo-largura-condensada); height: var(--logo-altura-condensada); } /* o nome fica no DOM sempre (é ele que nomeia o link pro leitor de tela) e só aparece se o PNG da máscara falhar — mask-image não avisa quando some. */ .marca__texto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .marca--texto .marca__tinta { display: none; } .marca--texto .marca__texto { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; color: var(--tinta-max); font-family: var(--fonte-apoio); font-size: 1.25rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; transition: color var(--t-estado) var(--curva-estado); } .marca:focus-visible { outline: 2px solid var(--acao); outline-offset: 6px; } .marca:active .marca__tinta, .marca:active .marca__texto { opacity: 0.72; transition-duration: 100ms; } @media (hover: hover) and (pointer: fine) { .marca:hover .marca__tinta { background-color: var(--acao); } .marca--texto:hover .marca__texto { color: var(--acao); } } /* --- Navegação ----------------------------------------------------------- */ .nav__lista { display: flex; align-items: center; gap: 40px; margin: 0; padding: 0; list-style: none; } .nav__link { position: relative; display: block; padding: 18px 0; color: var(--tinta); font-family: var(--fonte-apoio); font-size: var(--tam-nav); font-weight: 500; letter-spacing: var(--tracking-nav); line-height: 1.3; text-decoration: none; animation: subir 400ms var(--curva-mae) var(--atraso, 160ms) both; } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 1px; background-color: var(--acento); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-estado) var(--curva-estado); } .nav__link[aria-current="page"]::after { transform: scaleX(1); } .nav__link:focus-visible::after { transform: scaleX(1); } .nav__link:active { opacity: 0.72; transition: opacity 100ms linear; } @media (hover: hover) and (pointer: fine) { .nav__link:hover::after { transform: scaleX(1); } } /* cascata curta (F3): stagger 70ms entre os 4 itens */ .nav__item:nth-child(1) .nav__link { --atraso: 160ms; --indice: 0; } .nav__item:nth-child(2) .nav__link { --atraso: 230ms; --indice: 1; } .nav__item:nth-child(3) .nav__link { --atraso: 300ms; --indice: 2; } .nav__item:nth-child(4) .nav__link { --atraso: 370ms; --indice: 3; } /* --- Hambúrguer (2 traços) ----------------------------------------------- */ .hamburguer { display: none; position: relative; width: 48px; height: 48px; margin-right: -12px; padding: 0; border: 0; background: none; cursor: pointer; animation: subir 400ms var(--curva-mae) 160ms both; } .hamburguer__traco { position: absolute; left: 12px; width: 24px; height: 2px; background-color: var(--tinta); transition: transform var(--t-medio) var(--curva-estado); } .hamburguer__traco:first-child { top: 20px; } .hamburguer__traco:last-child { top: 29px; } .hamburguer[aria-expanded="true"] .hamburguer__traco:first-child { transform: translateY(4.5px) rotate(45deg); } .hamburguer[aria-expanded="true"] .hamburguer__traco:last-child { transform: translateY(-4.5px) rotate(-45deg); } /* --- Hero ---------------------------------------------------------------- */ .hero { position: relative; display: flex; align-items: center; min-height: 100dvh; padding-top: var(--h-header); overflow: hidden; } /* navegador sem dvh (Safari antigo): vh em vez de dobra cortada */ @supports not (height: 100dvh) { body { min-height: 100vh; } .hero { min-height: 100vh; } } /* O bloco de texto é centrado opticamente no vão abaixo do header: na imagem sobram 159px em cima e 149px embaixo. Os 10px de padding fazem os 5px de diferença. As margens abaixo descontam o leading de cada caixa: o que tem que bater com a imagem é tinta contra tinta, não caixa contra caixa. */ .hero__texto { position: relative; padding-top: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; padding-left: var(--margem-conteudo); padding-right: var(--margem-conteudo); } /* rótulo */ .hero__rotulo { margin: 0 0 calc(var(--r5) - 14px); /* 40px de tinta a tinta */ color: var(--tinta); font-family: var(--fonte-apoio); font-size: var(--tam-rotulo); font-weight: 400; line-height: 1.2; text-transform: uppercase; letter-spacing: var(--tracking-rotulo); animation: subir 400ms var(--curva-mae) 260ms both; } /* headline: 3 linhas com máscara de papel */ .hero__titulo { margin: 0; color: var(--tinta); font-family: var(--fonte-titulo); font-size: var(--tam-headline); /* O peso 380 (a didone da imagem tem haste de 8,50px @1440 e a Fraunces em 400 desenha 9,45px, 11% mais gorda — medido na rodada 1) agora está ASSADO no arquivo: "Fraunces 380" é a instância estática em wght 380, opsz 144, SOFT 0, WONK 0. Por isso aqui é 400 normal e sem font-variation-settings: não há mais eixo pra ajustar. */ font-weight: 400; line-height: var(--entre-headline); letter-spacing: var(--tracking-headline); /* balance no TÍTULO, nunca por span: balanceado span a span, cada linha virava um par isolado e a 320px a headline abria em 5 linhas com "que" e "quem" sozinhos. Aqui ele herda e decide olhando a headline. */ text-wrap: balance; } /* a caixa da linha é a máscara; o padding compensa ç, q e acento */ .linha { display: block; overflow: hidden; padding-top: 0.16em; /* deixa o acento do "ó" caber na máscara */ padding-bottom: 0.14em; /* deixa o rabo do "q" caber na máscara */ /* folga HORIZONTAL na máscara: a caixa da linha é fit-content do texto e sobrava 0,0 px nas linhas 1 e 2. Raster mais gordo (Fraunces variável no WebKit) decepava a última letra. A margem negativa de mesmo valor devolve a caixa ao lugar: o texto não anda um pixel. */ padding-right: 0.12em; margin-right: -0.12em; padding-left: 0.04em; margin-left: -0.04em; /* margem negativa ÚNICA por lado: duas negativas adjacentes colapsam e o ritmo de 100px vira 115px (achado da prova mecânica de 16/09) */ margin-bottom: -0.30em; } .linha:first-child { margin-top: -0.16em; } .linha:last-child { margin-bottom: -0.14em; } .linha__interna { display: block; /* `normal` em TODA largura, nunca `nowrap`: copy maior que a atual quebra dentro da linha em vez de ser decepada pelo overflow da máscara. A quebra forçada das 3 linhas da imagem não é mantida por `nowrap` — é mantida por CABER: o corpo da headline encolhe abaixo de 358px (ver --tam-headline no tokens.css), que é onde a coluna deixa de comportar "revelam quem". */ white-space: normal; animation: revelar var(--t-lento) var(--curva-mae) var(--atraso, 320ms) both; } /* a 3ª linha ("você é.") tem tracking próprio: na imagem ela mede 271,5px de tinta @1440 e o tracking da headline entregava 247px (9% estreita). */ .linha:nth-child(3) .linha__interna { letter-spacing: 0.015em; } /* máscara de linha (F5): stagger 90ms entre as 3 linhas */ .linha:nth-child(1) .linha__interna { --atraso: 320ms; } .linha:nth-child(2) .linha__interna { --atraso: 410ms; } .linha:nth-child(3) .linha__interna { --atraso: 500ms; } /* fim da F5: o JS solta a headline da camada composta (fill-mode both mantinha as 3 linhas promovidas pra sempre, com antialiasing próprio). O estado escrito aqui é o mesmo frame final da @keyframes: não pisca. */ .hero__titulo--assentado .linha__interna { animation: none !important; opacity: 1; transform: none; } /* filete divisor */ .hero__filete { display: block; width: var(--largura-divisor); max-width: 100%; height: var(--filete-divisor); margin: calc(var(--r6) - 10px) 0 0; /* 56px de tinta a tinta */ background-color: var(--apoio); transform-origin: left center; animation: desenhar 560ms var(--curva-mae) 800ms both; } /* --- Botão --------------------------------------------------------------- */ .botao { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: var(--largura-botao); height: var(--altura-botao); padding: 0 28px; border: 0; border-radius: var(--raio); background-color: var(--acao); color: var(--sobre-acao); font-family: var(--fonte-apoio); font-size: var(--tam-botao); font-weight: 500; line-height: 1; letter-spacing: var(--tracking-botao); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color var(--t-estado) var(--curva-estado), transform 120ms var(--curva-estado); } .botao::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-color: var(--acento); transform: scaleX(0); transform-origin: left center; transition: transform 240ms var(--curva-estado); } .botao:focus-visible { outline: 2px solid transparent; outline-offset: 0; box-shadow: 0 0 0 2px var(--chao), 0 0 0 4px var(--acao); } .botao:active { background-color: var(--acao-ativa); transform: translateY(1px); } .botao[aria-disabled="true"], .botao:disabled { background-color: rgba(71, 38, 26, 0.38); color: rgba(253, 250, 245, 0.72); cursor: not-allowed; } @media (hover: hover) and (pointer: fine) { .botao:hover { background-color: var(--acao-hover); } .botao:hover::after { transform: scaleX(1); } .botao[aria-disabled="true"]:hover, .botao:disabled:hover { background-color: rgba(71, 38, 26, 0.38); } .botao[aria-disabled="true"]:hover::after, .botao:disabled:hover::after { transform: scaleX(0); } } .hero__botao { margin-top: calc(var(--r6) - 3px); /* 56px de tinta a tinta */ animation: subir 400ms var(--curva-mae) 900ms both; } /* --- A cena (camada) ----------------------------------------------------- */ .hero__cena { position: absolute; top: var(--h-header); right: 0; bottom: 0; left: auto; width: var(--largura-cena); z-index: 1; pointer-events: none; /* a assinatura C cresce 1,2% a partir do canto inferior direito: sem o clip, a borda de cima da camada subia 9,76px pra dentro da faixa do header e pintava parede acima do filete mel. */ overflow: hidden; /* sem background: o plate provisório tem a borda esquerda em alpha (o dissolve medido: alpha 0 até x≈150 de 1000). Cor chapada aqui viraria um retângulo com aresta reta em x=37% — a borda que o spec proíbe. O fallback de parede mora no estado de falha, abaixo. */ } /* o (WebP só no mobile) não pode gerar caixa: sem isso ele cria uma linha vazia dentro da cena e, no mobile, empurra a altura do flex-item. */ .hero__cena > picture { display: contents; } .hero__cena-plate, .hero__retrato { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; /* COBRE a caixa, nunca letterboxa: em viewport alto (1024×1366) o `contain` deixava 701px de creme vazio no topo e dava aresta reta à foto. O ponto focal são os óculos, em ~46% / 18% da camada. Em 1440×901 a caixa e o arquivo têm quase a mesma proporção (1,1158 × 1,1173): o corte é de 1,2px e a peça não muda. */ object-fit: cover; object-position: 46% 18%; /* sem máscara no topo: na imagem a parede encosta no filete mel sem transição nenhuma; os 16px de dissolve clareavam 17 linhas (rodada 1). */ } /* Dissolve de 48px na borda esquerda, SEMPRE ligado no desktop. Por quê: quando o `cover` corta na horizontal, ele come o dissolve que o arquivo traz na borda esquerda e a foto ganha aresta reta. Tentei prender isso a um limiar de proporção (1.5/1) e o limiar mentia: o corte horizontal começa por volta de 1,57-1,66 do viewport, então entre 1,51 e 1,58 (1512×982, 1728×1117) a aresta voltava. Sempre ligado não tem buraco — e a 1440 a faixa de 48px cai em parede lisa, onde o degradê é invisível. Serve também ao estado de falha: é a caixa inteira que recebe a máscara, então a parede do fallback também dissolve em vez de virar card. */ @media (min-width: 900px) { .hero__cena { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px); mask-image: linear-gradient(to right, transparent 0, #000 48px); } } /* slot da camada de luz (caixa medida no spec: 76,23 / 18,65 / 23,77 / 41,33) */ .hero__luz { position: absolute; /* caixa medida na imagem: 76,23 / 18,65 / 23,77 / 41,33 do viewport. Dentro da caixa da cena (63% × 90,22% do viewport) isso vira: */ top: 9.83%; right: 0; width: 37.7%; height: auto; mix-blend-mode: soft-light; pointer-events: none; } /* A camada de luz é decoração: se só ELA falhar, some sozinha e a cena continua de pé (o botão A já nasce desabilitado). Nunca caixa quebrada. */ .hero__luz--falhou { display: none !important; } /* Falha de carga da camada: parede #E6DBCF + o alt escrito, como manda a coreografia. Nunca ícone quebrado, nunca skeleton cinza. A parede NÃO vira card: a máscara de 48px da `.hero__cena` (sempre ligada no desktop, sempre no topo no mobile) mascara também o background, então a borda esquerda do fallback dissolve no creme igual à foto. */ .hero__cena--falhou { background-color: var(--parede-foto); } .hero__cena--falhou .hero__cena-plate, .hero__cena--falhou .hero__retrato, .hero__cena--falhou .hero__luz { display: none; } .hero__cena-falha { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: var(--r6) var(--r4); pointer-events: auto; color: var(--tinta); font-family: var(--fonte-apoio); font-size: var(--tam-corpo); line-height: var(--entre-corpo); letter-spacing: 0.01em; text-align: center; text-wrap: balance; } /* --- Rodapé mínimo ------------------------------------------------------- */ .rodape { padding: var(--r4) var(--margem-conteudo); color: var(--tinta-fraca); font-family: var(--fonte-apoio); font-size: 0.875rem; line-height: 1.5; letter-spacing: 0.02em; } /* --- Keyframes da Fundação (F1-F7): CSS puro, zero JS -------------------- */ @keyframes desenhar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes subir { from { opacity: 0; transform: translateY(var(--entrada-curta)); } to { opacity: 1; transform: translateY(0); } } @keyframes revelar { from { opacity: 0.001; transform: translateY(calc(100% + 0.18em)); } to { opacity: 1; transform: translateY(0); } } @keyframes assentar { from { transform: scale(1.012); } to { transform: scale(1); } } @keyframes luz-assenta { from { opacity: 0.35; transform: translate(14px, -28px); } to { opacity: 1; transform: translate(0, 0); } } /* --- Assinaturas de movimento (prova de roupa; o Anthony escolhe vendo) --- */ /* C · o retrato que assenta */ [data-assinatura="c"] .hero__cena-plate, [data-assinatura="c"] .hero__retrato { transform-origin: 100% 100%; animation: assentar 900ms var(--curva-mae) 0ms both; } /* Fim do C: sem isso o `fill-mode: both` deixa a foto em camada composta pra sempre e, com `object-fit: cover`, REAMOSTRADA pra sempre (1,03% da tela diferente do estado sem assinatura). O JS marca a classe no `animationend` e rearma na troca. Só `animation` é zerada: o transform de repouso do desktop já é nenhum, e no mobile o C nem roda (o translate do busto fica). */ .hero__cena--assentada .hero__cena-plate, .hero__cena--assentada .hero__retrato { animation: none !important; } /* B · a régua: os dois filetes correm à mesma velocidade linear e cada linha da headline sobe quando a régua cruza o x onde ela termina. Os tempos vêm do JS (largura real; a régua nunca passa de 2,32 s). */ [data-assinatura="b"] .cabecalho__filete { animation: desenhar var(--b-dur-mel) linear 0ms both; } [data-assinatura="b"] .hero__filete { animation: desenhar var(--b-dur-divisor) linear var(--b-delay-divisor) both; } [data-assinatura="b"] .linha:nth-child(1) .linha__interna { animation: revelar 420ms var(--curva-mae) var(--b-delay-l1) both; } [data-assinatura="b"] .linha:nth-child(2) .linha__interna { animation: revelar 420ms var(--curva-mae) var(--b-delay-l2) both; } [data-assinatura="b"] .linha:nth-child(3) .linha__interna { animation: revelar 420ms var(--curva-mae) var(--b-delay-l3) both; } /* A · a hora da janela: só a camada de luz assenta na parede. Aguarda o arquivo luz-de-janela.png; o botão A fica desabilitado até lá. */ [data-assinatura="a"] .hero__luz { animation: luz-assenta 1400ms var(--curva-cenica) 200ms both; } /* --- Mobile e tablet (coluna única; derivado, não há imagem mobile) ------- */ @media (max-width: 899px) { /* O DRAWER SÓ EXISTE COM O hero.js VIVO. A classe `js` é a primeira coisa que o arquivo faz; se ele não carregar (404, CSP, erro de rede) ou o JS estiver desligado, nada aqui casa e vale o bloco "sem js" lá embaixo — um menu que só o JS sabe abrir nunca pode ser o estado padrão do HTML. */ .js .hamburguer { display: block; } .js .nav { position: fixed; top: var(--h-header); left: 0; right: 0; z-index: 99; background-color: var(--chao); border-bottom: var(--filete-mel) solid var(--acento); clip-path: inset(0 0 100% 0); /* visibility ENTRA na transição, senão o drawer vira hidden no primeiro frame do fechamento e o clip-path retrai pra ninguém */ transition: clip-path 280ms var(--curva-mae), visibility 0s linear 280ms; visibility: hidden; } body[data-menu="aberto"] .nav { clip-path: inset(0 0 0 0); transition: clip-path 380ms var(--curva-mae), visibility 0s linear 0s; visibility: visible; } .js .nav__lista { flex-direction: column; align-items: flex-start; gap: 0; padding: var(--r3) var(--margem-conteudo) var(--r5); } .js .nav__item { overflow: hidden; } .js .nav__link { padding: 14px 0; font-size: 1.125rem; animation: none; transform: translateY(110%); opacity: 0.001; transition: transform 420ms var(--curva-mae), opacity 420ms var(--curva-mae); } body[data-menu="aberto"] .nav__link { transform: translateY(0); opacity: 1; transition-delay: calc(180ms + var(--indice, 0) * var(--stagger)); } .js .nav__link::after { bottom: 10px; } /* --- SEM JS (desligado OU hero.js caiu): faixa estática sob o header --- O hambúrguer já nasce escondido na regra base, então aqui só o menu. */ html:not(.js) .nav { position: fixed; top: var(--h-header); left: 0; right: 0; z-index: 99; background-color: var(--chao); border-bottom: var(--filete-mel) solid var(--acento); overflow-x: auto; } html:not(.js) .nav__lista { flex-direction: row; align-items: center; gap: 20px; padding: 8px var(--margem-conteudo); } html:not(.js) .nav__link { padding: 8px 0; font-size: 0.9375rem; white-space: nowrap; } html:not(.js) .nav__link::after { bottom: 4px; } /* a faixa mede 55px: a dobra desce pra não passar por baixo dela */ html:not(.js) .hero { padding-top: calc(var(--h-header) + 56px + var(--r6)); } .hero { flex-direction: column; align-items: stretch; justify-content: flex-start; padding-top: calc(var(--h-header) + var(--r6)); } /* ordem da coreografia: rótulo, headline, filete, botão e só então o busto */ .hero__texto { order: 1; padding-top: 0; padding-inline: var(--margem-conteudo); } .hero__rotulo { margin-bottom: calc(var(--r3) - 6px); } .hero__filete { margin-top: calc(var(--r4) - 6px); } .hero__botao { margin-top: calc(var(--r4) - 2px); } .hero__cena { order: 2; position: relative; top: auto; right: auto; left: auto; width: 100%; flex: 1 1 auto; min-height: 34dvh; margin-top: var(--r5); overflow: hidden; /* a aresta de cima da caixa corta a camada no meio do cabelo: sem dissolve a foto ganha borda reta, o único jeito de a peça virar "imagem colada". A máscara vai na CAIXA (é ela que corta), não no . */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px); mask-image: linear-gradient(to bottom, transparent 0, #000 48px); } /* Busto ancorado no ROSTO, não na caixa: o ponto focal (os óculos) está em 46,3% / 20,4% da camada e é levado a 50% / 32% da caixa da cena. ATENÇÃO à ordem: `inset` é atalho de top/right/bottom/left e zera os quatro. Ele vem ANTES dos longhands, nunca depois — foi assim que a rodada 4 decapitou o busto (a foto caía no canto, cortada nos olhos). */ .hero__cena-plate, .hero__retrato { inset: auto; top: 32%; left: 50%; width: var(--escala-busto); height: auto; max-width: none; /* `fill` com a caixa na proporção exata do arquivo = zero distorção; o enquadramento é feito pelo par largura + translate, não pelo cover. */ object-fit: fill; transform: translate(-46.3%, -20.4%); } /* o busto não anima: nem load, nem scroll, nem parallax */ [data-assinatura="c"] .hero__cena-plate, [data-assinatura="c"] .hero__retrato { animation: none; } .hero__luz { display: none; } .rodape { padding-inline: var(--margem-conteudo); } } /* --- Reduced motion: o estado base do CSS É o estado final --------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cabecalho__filete, .marca, .nav__link, .hamburguer, .hero__rotulo, .linha__interna, .hero__filete, .hero__botao, .hero__cena-plate, .hero__retrato, .hero__luz { animation: none !important; } /* F8 também obedece: header e logo trocam de tamanho no mesmo frame. A COR continua transitando (é mudança de estado, não de posição). */ .cabecalho { transition: background-color var(--t-medio) var(--curva-estado); } .marca__tinta { transition: background-color var(--t-estado) var(--curva-estado); } /* filete de estado aparece já inteiro; a cor continua transitando */ .nav__link::after, .botao::after, .hamburguer__traco { transition: none !important; } .nav { transition: none !important; } @media (max-width: 899px) { /* precisa do `.js` pra vencer `.js .nav__link` em especificidade: sem isso o link do drawer ficava preso em translateY(110%)/opacity .001 */ .js .nav__link, html:not(.js) .nav__link { transform: none; opacity: 1; transition: none !important; } } } /* troca de assinatura no seletor: reinicia a Fundação pra ele ver de novo */ [data-replay] *, [data-replay] *::before, [data-replay] *::after { animation: none !important; } /* --- Seletor de assinatura (prova de roupa; sai quando ele escolher) ------ */ .prova { position: fixed; left: 16px; bottom: 16px; z-index: 110; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background-color: rgba(243, 237, 227, 0.86); border: 1px solid var(--borda); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--fonte-apoio); font-size: 0.875rem; line-height: 1.4; opacity: 0.5; transition: opacity var(--t-estado) var(--curva-estado); } .prova:focus-within { opacity: 1; } .prova[hidden] { display: none; } .prova__rotulo { color: var(--tinta-fraca); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; } .prova__botao { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--borda); border-radius: var(--raio); background: transparent; color: var(--tinta); font-family: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1; cursor: pointer; transition: background-color var(--t-estado) var(--curva-estado), color var(--t-estado) var(--curva-estado); } .prova__botao[aria-pressed="true"] { background-color: var(--acao); color: var(--sobre-acao); border-color: var(--acao); } .prova__botao:disabled { opacity: 0.45; cursor: not-allowed; } @media (hover: hover) and (pointer: fine) { .prova:hover { opacity: 1; } .prova__botao:hover:not(:disabled):not([aria-pressed="true"]) { background-color: rgba(71, 38, 26, 0.08); } } .prova__nota { max-width: 24ch; color: var(--tinta-fraca); font-size: 0.875rem; line-height: 1.4; } @media (max-width: 899px) { .prova { left: 8px; bottom: 8px; padding: 6px 8px; gap: 6px; } .prova__nota { display: none; } } @media print { .prova, .pular { display: none !important; } }