/* ============================================================ LETHAL · Tokens de design ------------------------------------------------------------ ESTE ARQUIVO E A UNICA FONTE DE COR, ESPACO, RAIO E TIPO. Nenhum outro CSS escreve #000 ou 16px direto (FUNDACAO.md 4.1). Quando o visual mudar, muda AQUI, e a mudanca atravessa o site. DE ONDE ESTES VALORES VIERAM (4 de agosto de 2026): do documento "Lethal Homepage Design System", que e uma inversao escura do sistema Modernist, mais duas decisoes do Bruno tomadas por cima dele: 1. O SITE E PRETO E BRANCO. O vermelho #EC3013 que o design system trazia como acento saiu. Nao e economia: o MARCA.md 12 diz que o preto integral e a cor da ordem, e que cor vira excecao rara e com motivo, nunca opcao de catalogo. O proprio arquivo do design system ja previa esse modo (accentMode "none"), entao isto e uma variante dele, nao uma briga com ele. 2. Variacao de preto ate perto do cinza e permitida, e e o que separa uma secao da outra sem precisar de cor. O QUE MUDOU EM RELACAO A PRIMEIRA VERSAO NEUTRA DESTE ARQUIVO: o site nasceu branco com pilula e sombra, que e o jeito padrao de qualquer site nascer. O design system pede o contrario em tres pontos, e os tres estao aqui: RAIO ZERO EM TUDO, SOMBRA NENHUMA, e regua visivel no lugar de espaco vazio. ============================================================ */ :root { /* ---- COR ---- Cinco degraus de preto e um so claro. Cada um com o papel declarado, e o papel nao se mistura. ---- */ --preto: #000000; /* preto absoluto: barra de aviso e assinatura */ --ink: #0a0a0a; /* fundo padrao da pagina */ --char: #151515; /* secao alternada, para o olho achar a costura */ --graph: #242424; /* superficie de campo e moldura */ --quadro: #141414; /* o fundo do quadro de foto, e so ele */ --paper: #f2f1ed; /* texto sobre escuro, e o fundo do UNICO bloco claro */ --paper-vivo: #ffffff; /* SO o hover do botao primario. Um degrau acima do papel, que e o unico "mais claro" que sobra num sistema sem cor. Nao serve de fundo de nada. */ /* ---- OS TONS DE CLARO SOBRE ESCURO ---- MEDIDOS, NAO ESCOLHIDOS (FUNDACAO.md 4.2). O numero ao lado e o contraste contra --ink; o pior caso do site e sobre --graph, e esta anotado quando muda a conta. ⚠️ O DESIGN SYSTEM ORIGINAL ERRA AQUI, e o erro foi medido antes de virar componente: ele usa rgba(242,241,237,.40) e .42 em micro rotulo e legenda, o que da 3,47:1 e REPROVA no piso de 4,5:1. E o mesmo defeito que o PDV carrega no app inteiro. Aqui o piso de texto e .55, e abaixo disso nenhuma letra desce. */ --paper-forte: rgba(242, 241, 237, .86); /* 12,91:1 · corpo forte */ --paper-corpo: rgba(242, 241, 237, .72); /* 9,16:1 · corpo */ --paper-apoio: rgba(242, 241, 237, .60); /* 6,57:1 · apoio e legenda */ --paper-miudo: rgba(242, 241, 237, .55); /* 5,66:1 · O PISO. Micro rotulo. */ /* Traco nao e texto, entao nao responde ao piso de 4,5:1. Mas borda que e o UNICO sinal de um controle precisa de 3:1, e por isso --fio-vivo existe separado do --fio. ⚠️ AS RAZOES ABAIXO SAO CONTRA --ink, E NEM TODA BORDA CAI SOBRE --ink. A caixa de digitar do checkout (.campo__caixa) usa --fio-vivo em cima de --graph, que e mais claro, e ali a razao MEDIDA cai para 3,94:1. Continua acima dos 3:1, mas quem for mexer em --graph ou em --fio-vivo precisa medir de novo sobre a superficie de verdade: encostar no numero desta linha e medir contra o fundo errado. */ --regua: rgba(242, 241, 237, .28); /* a regua de 2px entre secoes grandes */ --fio: rgba(242, 241, 237, .16); /* divisor fino dentro de lista e cartao */ --fio-vivo: rgba(242, 241, 237, .45); /* 4,11:1 · borda de controle */ /* ---- OS TONS DE ESCURO SOBRE CLARO ---- Valem so dentro do bloco de manifesto, que e o unico claro. */ --ink-corpo: rgba(10, 10, 10, .82); /* 11,09:1 */ --ink-apoio: rgba(10, 10, 10, .62); /* 5,42:1 · piso do lado claro */ --fio-claro: rgba(10, 10, 10, .20); --fio-claro-vivo: rgba(10, 10, 10, .55); /* 4,26:1 */ /* NAO EXISTE COR DE ERRO NEM DE SUCESSO, e isso e decisao. Num site preto e branco, "esgotado" se diz com a palavra e com o tom, nunca com vermelho: vermelho seria a cor terciaria que o Bruno tirou. Ver .selo--esgotado em componentes.css. */ /* ---- TIPOGRAFIA ---- ARCHIVO, a fonte do design system, servida do PROPRIO dominio (FUNDACAO.md 4.3: nada de Google Fonts). O @font-face e a razao de cada decisao estao na base.css; aqui fica so o nome. A pilha atras dela nao e enfeite: e o que a pessoa le enquanto o arquivo desce, e e o que fica se o download falhar. Por isso o desenho nao DEPENDE do Archivo para funcionar: quem segura o carater e caixa-alta, tracking negativo no display, tracking largo no rotulo e peso 800 restrito ao display. Com Archivo fica exato; sem ele, fica proximo. */ --fonte: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fonte-display: var(--fonte); /* A escala do design system e de artboard de 1440px fixo, e ela nao tinha especificacao de celular nenhuma. O clamp e a ponte: o valor de cima e o do documento, o de baixo foi conferido a 360px. */ --fs-campanha: clamp(3rem, 10.5vw, 6.5rem); /* 48 → 104px */ --fs-hero: clamp(2.5rem, 8.2vw, 5.375rem); /* 40 → 86px */ --fs-manifesto: clamp(1.75rem, 4.6vw, 3.625rem); /* 28 → 58px */ --fs-h1: clamp(2rem, 5.4vw, 3.5rem); /* 32 → 56px */ --fs-h2: clamp(1.5rem, 3.4vw, 2.625rem); /* 24 → 42px */ --fs-h3: 1.25rem; /* 20px. Nome de peca. */ --fs-corpo-g: 1.0625rem; /* 17px. Corpo do hero e do manifesto. */ --fs-body: 1rem; /* 16px. Piso de leitura no celular. */ --fs-sm: 0.875rem; /* 14px. O menor tamanho de texto corrido. */ /* 12px e a UNICA excecao ao piso de 14px, e ela e declarada: vale so para rotulo em caixa-alta com tracking largo, que e o que devolve a legibilidade que o tamanho tirou, e nunca para uma frase que a pessoa precisa ler para decidir alguma coisa. O design system pedia 10px aqui; 10px nao passa no celular. */ --fs-micro: 0.75rem; --lh-display: .98; --lh-titulo: 1.04; --lh-body: 1.65; --tk-display: -.03em; /* caixa-alta grande fecha, senao vira cartaz */ --tk-rotulo: .16em; /* micro rotulo abre */ --tk-botao: .12em; --tk-nome: .02em; /* nome de peca em caixa-alta */ --peso-normal: 400; --peso-medio: 500; --peso-forte: 600; /* UI e botao. Nunca 700: engorda a tela no celular. */ --peso-display: 800; /* SO o display em caixa-alta. */ /* Alinhamento optico: caixa-alta grande deixa um buraco na esquerda da coluna. O design system corrige com -.055em, e a conta e a mesma aqui. Sem isto o titulo parece recuado e o resto alinhado. */ --optico: -.055em; /* ---- ESPACO ---- A escala vertical do design system: 8/16/24/32/48/64/96/128. */ --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px; --s9: 128px; /* O alvo de toque minimo (FUNDACAO.md 10). Nao e espaco, e uma medida de dedo: 44px e o piso, e ele nao acompanha a escala nem muda com o design. Fica aqui para nenhum componente novo esquecer dele. */ --alvo: 44px; /* ---- RAIO ---- ZERO EM TUDO, SEM EXCECAO. E a regra inviolavel numero um do design system, e e o que mais separa este site de um template. A variavel existe para nao voltar canto arredondado por descuido em um componente novo. */ --raio: 0; /* ---- SOMBRA ---- NENHUMA. Nao existe token de sombra de proposito: elevacao neste sistema se faz com valor de cinza e com regua, nunca com desfoque. Se um componente pedir sombra, o componente esta errado. */ /* ---- MEDIDAS DE LAYOUT ---- */ --largura-max: 1320px; /* o container do design system */ --margem: clamp(20px, 4.6vw, 60px);/* 60px fixos no documento, fluidos aqui */ --largura-texto: 54ch; /* medida de leitura: 40 a 52ch */ --altura-topo: 72px; /* ---- MEDIDAS DE CONTROLE ---- Nasceram com o PRIMEIRO FORMULARIO do site (o checkout, 5/ago). Ate aqui o site nunca tinha pedido um dado, entao a altura de controle vivia solta dentro do .btn. ⚠️ CAMPO E BOTAO PRECISAM TER A MESMA ALTURA e NAO PODEM TER A MESMA COR. As duas metades desta frase vem do mesmo estrago: no PDV o botao Cancelar tinha o cinza dos campos, e a tela ficou ambigua nos dois sentidos (o botao lia como campo, o campo lia como botao). Num site preto isso e ainda mais facil de acontecer, porque o repertorio de superficie e menor. A altura junta e a cor separada e o que faz os dois lerem como familias diferentes na mesma linha. */ --controle-altura: 48px; /* ---- A GAVETA E AS CAMADAS ---- 420px e a medida do docs/FLUXO.md 6 para a camada do computador. No celular ela vira folha de baixo, e a altura e a que sobra: 90% da tela, para o que esta atras continuar aparecendo um pouco e a pessoa saber que nao mudou de pagina. */ --largura-gaveta: 420px; --gaveta-altura: 90vh; /* O escuro que fica ENTRE a camada e a pagina. Nao e sombra (nao existe token de sombra neste sistema): e um veu chapado, sem desfoque, e o papel dele e tirar a pagina do caminho da leitura, nao dar elevacao. */ --veu-camada: rgba(10, 10, 10, .82); /* A barra fixa do celular no checkout: o total nunca sai da tela (docs/FLUXO.md 2, regra 7). A altura mora aqui porque quem a consome sao DUAS coisas: a propria barra e o respiro que a pagina precisa ter embaixo dela, senao o ultimo campo nasce debaixo da barra. */ --barra-altura: 76px; /* O campo do som. A ALTURA NAO E ESCOLHA NOSSA: 352px e a altura que o tocador do Spotify precisa para mostrar a capa e a lista. Ela mora aqui, e nao solta dentro do componente, porque e uma medida externa e o dia em que o Spotify mudar o tocador a conta muda num lugar so. A porta fechada usa a MESMA altura do tocador de proposito: quando ela abre, nada na pagina muda de lugar (FUNDACAO.md 10). */ --som-largura: 640px; --som-altura: 352px; /* ============================================================ MOVIMENTO ------------------------------------------------------------ O sistema inteiro de movimento sai daqui, e NENHUM componente escreve 300ms nem uma curva direto (FUNDACAO.md 4.1). As regras que consomem estes valores moram todas em movimento.css, que e o dono unico do hover e da entrada. O design system pede 200 a 400ms e "nada alem disso" (secao 08 do handoff). Toda duracao abaixo esta dentro dessa faixa. O que passa dela e o SOMATORIO da cascata, que e atraso empilhado e nao duracao de uma animacao: com 4 degraus a 70ms, o ultimo comeca 210ms depois do primeiro. A curva e a mesma do --transicao: sai rapido e assenta. E o que o documento chama de "confianca silenciosa" traduzido em tempo: nada acelera no fim, nada quica, nada volta. ============================================================ */ --transicao: 220ms cubic-bezier(.2, .6, .2, 1); --mov-curva: cubic-bezier(.2, .6, .2, 1); --mov-dur: 300ms; /* a entrada de um degrau */ --mov-passo: 70ms; /* o atraso de um degrau para o seguinte */ --mov-desloca: 14px; /* o deslocamento curto PARA CIMA da entrada. So opacidade e deslocamento: nada de escala na entrada, nada de deslizar de lado. */ --preenche-dur: 320ms; /* a varredura que preenche no hover */ /* ------------------------------------------------------------ A ESPERA. A varredura do hover, que atravessa UMA vez, aqui atravessa SEM PARAR: e o mesmo gesto dizendo outra coisa. Hover diz "isto responde"; em laco diz "isto esta respondendo, ainda". Nao e uma quinta palavra do vocabulario, e a terceira em regime continuo (ver movimento.css 6). ⚠️ A DURACAO E MAIOR QUE A DO HOVER, E DE PROPOSITO. O hover responde a um gesto que acabou de acontecer e precisa ser imediato; a espera acompanha uma viagem de rede que a pessoa nao controla, e nesse tempo pressa vira ansiedade. 1,15s por travessia da 0,87Hz, bem abaixo dos 3Hz que a WCAG 2.3.1 trata como piscada, e e o unico numero deste arquivo que tem um piso de saude e nao de gosto. A LARGURA E A DA TARJA, o ativo que o MARCA.md 12 lista entre os que ficam. Um terco do botao: menos vira risco, mais vira bloco piscando. Ela mora aqui e nao no keyframe porque o @supports de degradacao le o mesmo numero. */ --espera-dur: 1150ms; --espera-faixa: 33%; /* ⚠️ A UNICA CURVA DESTE ARQUIVO QUE NAO E A `--mov-curva`, e ela e `linear` por necessidade e nao por gosto. Todas as outras animam um gesto que COMECA E TERMINA, e para esse a curva que sai rapido e assenta e a certa. A espera nao termina: ela emenda o fim no comeco enquanto a rede nao responde. Com uma curva de assentar, a faixa desacelera na saida e reaparece a toda velocidade na entrada, e a emenda vira um solavanco a cada volta. Custou uma medicao para eu ver: com a `--mov-curva`, na metade do tempo a faixa ja estava em 183px de um botao de 222px, ou seja FORA da tela, e a travessia inteira acontecia no primeiro terco do ciclo. Velocidade constante e o que torna um laco um laco. */ --espera-curva: linear; /* O conteudo cresce DENTRO do proprio quadro, ocupando o espaco negativo. O quadro nao cresce e nao empurra nada (FUNDACAO.md 10: nada de layout pulando). Por isso o valor e pequeno: 3% num quadro 4:5 e o suficiente para o olho ver que respondeu. O design system autoriza 1,02 a 1,05 na imagem de produto. */ --zoom-quadro: 1.03; --zoom-mark: 1.06; /* o mark do cabecalho e do rodape */ /* O veu que sobe sobre uma FOTO. Num site preto e branco o unico "mais claro" que existe e o papel, entao o preenchimento e ele. Sobre uma foto ele nao pode fechar, senao apaga a peca: e um veu, nao um bloco. Sobre um botao, que nao tem foto embaixo, o preenchimento vai ate o papel inteiro. */ --veu-sobe: linear-gradient(to top, rgba(242, 241, 237, .16), rgba(242, 241, 237, .02)); /* ============================================================ O VEU DA CAPA ------------------------------------------------------------ As duas camadas de escuro que ficam ENTRE a foto do hero e as letras. Elas moram aqui, e nao no paginas.css, por um motivo pratico alem da regra do 4.1: o publicar/medir-contraste.js LE estes valores para calcular o contraste. Numero que o olho ve e numero que a conta usa tem que ser o mesmo numero, no mesmo lugar. Mudou aqui, mede de novo. Por que DUAS camadas e nao uma. O texto do hero mora embaixo e a ESQUERDA. Um veu so, de baixo para cima, escurece a largura inteira igualmente: ou ele deixa a esquerda clara demais para a letra, ou apaga a direita, onde a foto e a unica coisa que tem. Separando os eixos, cada lado recebe o que precisa. Os numeros foram MEDIDOS sobre esta foto, com o texto no lugar (docs/DESIGN.md 9). Trocar a foto obriga a medir de novo: a conta e da imagem, nao do gradiente. */ /* VERTICAL. Pesado embaixo, onde a letra mora. ⚠️ AS PARADAS SAO EM PIXEL, E NAO EM PORCENTAGEM. Isso foi um erro na primeira tentativa e a medicao pegou. O bloco de texto do hero e ancorado embaixo e tem altura em PIXEL: ele mede cerca de 500px do chao ate o topo do rotulo, e essa altura quase nao muda, porque o tamanho da fonte e travado por clamp. A ALTURA DO HERO, essa sim, muda muito: 587px numa janela de 720 e 820px numa de 1100. Com parada em porcentagem o veu escorregava para cima e para baixo enquanto o texto ficava parado, e numa janela baixa o titulo saia do escuro: media 2,36:1 sobre a viga clara do teto, contra um piso de 4,5:1. Em pixel o veu acompanha a letra em qualquer janela. A leitura: 0px e o CHAO do hero. 500px e o topo do rotulo, que e o elemento mais alto do bloco. De 500 a 760 o veu abre, e dai para cima a foto e quase ela mesma. */ --veu-capa-y: linear-gradient(to top, rgba(10, 10, 10, .90) 0px, rgba(10, 10, 10, .78) 260px, rgba(10, 10, 10, .66) 500px, rgba(10, 10, 10, .30) 620px, rgba(10, 10, 10, .14) 760px); /* HORIZONTAL. Abre a direita, onde estao os rostos que vem atras, e fecha a esquerda, atras da coluna de texto. Chega a zero em 72%: dai para a direita a foto e ela mesma. Ele e mais leve do que parece necessario de proposito: quem carrega o contraste e o eixo vertical, e dois eixos pesados no mesmo canto fechariam a esquerda inteira em preto, apagando justamente o homem que a foto tem para mostrar. */ --veu-capa-x: linear-gradient(to right, rgba(10, 10, 10, .45) 0%, rgba(10, 10, 10, .30) 26%, rgba(10, 10, 10, .10) 52%, rgba(10, 10, 10, 0) 72%); /* NO CELULAR a coluna de texto ocupa a largura toda, entao veu lateral nao resolve nada e so suja a foto. La o eixo horizontal sai e o vertical assume sozinho, mais fundo, e o bloco de texto e mais alto porque o titulo quebra em tres linhas. */ --veu-capa-y-estreito: linear-gradient(to top, rgba(10, 10, 10, .93) 0px, rgba(10, 10, 10, .86) 300px, rgba(10, 10, 10, .74) 520px, rgba(10, 10, 10, .38) 640px, rgba(10, 10, 10, .18) 780px); /* ---- O TERCEIRO VEU: O TOPO (5 de agosto) ---- ⚠️ ELE NASCEU DE UMA MEDICAO, E A MEDICAO NASCEU DE UM PONTO CEGO. O `publicar/medir-contraste.js` sempre mediu o hero com a pagina no alto, e ali o cabecalho NAO encosta na foto: ele termina exatamente onde ela comeca. Acontece que o cabecalho e grudado (`position: sticky`) e continua TRANSPARENTE enquanto o hero esta na tela, entao ao rolar ele passa por cima da foto, e e ali, e so ali, que o pior caso do site inteiro acontece. Nenhuma medicao olhava para isso. O QUE FOI MEDIDO, com a rolagem em 85px, que e a primeira posicao em que o cabecalho cobre a foto (`window.__medirTopo()`): icone da sacola 2,77:1 piso 3 ❌ icone da conta 2,91:1 piso 3 ❌ PECAS 2,86:1 piso 4,5 ❌ A MARCA 2,78:1 piso 4,5 ❌ EN (inativo) 3,08:1 piso 4,5 ❌ PT (ativo) 5,84:1 piso 4,5 ✅ LETHAL 7,09:1 piso 4,5 ✅ O fundo no pior pixel era sRGB 100: a viga do teto, batida de luz, no canto de cima da foto. Passa exatamente por tras do grupo da direita. ESTE VEU RESOLVE O PISO DE 3 E NAO RESOLVE O DE 4,5, e a diferenca e de conta, nao de vontade. Levar o pior pixel de 100 para 93 ja poe os dois icones em 3:1; leva-lo aos 36 que o texto de 12px precisaria pede alfa .71 no topo, e alfa .71 apaga a viga inteira. Seria trocar a metade de cima do enquadramento por seis palavras, que e exatamente a conta que o `docs/DESIGN.md 9` ja tinha recusado uma vez, do lado de baixo da foto. Entao ele para em .20, que poe o pior pixel em 85 e os icones em torno de 3,3:1, com folga de verdade em vez de folga de sorte. O texto do cabecalho sobe junto, de 2,78 para cerca de 3,3, e CONTINUA REPROVANDO no piso dele: isso e anterior a este trabalho, esta anotado no `docs/DESIGN.md` e a saida e decisao do Bruno. A parada em 320px e onde ele encontra o veu de baixo: dali para baixo o `--veu-capa-y` ja passou de .30, e o cabecalho que rolou ate la anda sobre foto escura. */ --veu-capa-topo: linear-gradient(to bottom, rgba(10, 10, 10, .20) 0px, rgba(10, 10, 10, .18) 130px, rgba(10, 10, 10, .09) 230px, rgba(10, 10, 10, 0) 320px); /* ---- O QUARTO VEU: A BARRA (5 de agosto, a tarde) ---- ⚠️ ELE RESOLVE O QUE O DE CIMA DECLAROU IMPOSSIVEL, e a diferenca nao e de alfa: e de DONO. O veu de cima esta preso a FOTO, entao para escurecer a letra do cabecalho ele precisa escurecer tambem todo o resto da foto que passa por baixo dele em algum momento da rolagem. Foi essa conta que parou em .20: os .71 que o texto de 12px pedia apagariam a viga do teto para sempre, inclusive com a pagina no alto, quando o cabecalho nem esta la. Este esta preso a BARRA. Ele anda com ela, cobre exatamente os 72px onde existe letra, e nao toca em mais nada da fotografia. O mesmo escurecimento que era proibido preso a foto fica barato preso a barra, porque ele so existe onde precisa existir. ⚠️ COM A PAGINA NO ALTO ELE E INVISIVEL, e isso nao e sorte: ali o cabecalho termina exatamente onde a foto comeca (e por isso que a medicao antiga tinha um ponto cego), entao atras dele so ha o `--ink`. rgba(10,10,10,.62) sobre #0a0a0a e #0a0a0a. Ele so aparece quando a barra sobe na foto, que e quando ele e necessario. O QUE FOI MEDIDO, com a rolagem em 85px, o mesmo pior caso do token de cima e com ele ainda no lugar: antes depois piso icone sacola 3,08 5,00 3 ✅ icone conta 3,12 5,02 3 ✅ PECAS 2,81 ❌ 4,87 4,5 ✅ A MARCA 3,07 ❌ 5,00 4,5 ✅ EN (inativo) 3,07 ❌ 5,00 4,5 ✅ PT (ativo) 6,17 13,02 4,5 ✅ LETHAL 7,08 13,60 4,5 ✅ O pior pixel do fundo caiu de sRGB 99 para 44. As tres reprovacoes que o token de cima tinha declarado insoluveis eram, as tres, a mesma: texto de 12px em `--paper-miudo` sobre viga iluminada. POR QUE .62 E NAO MAIS. O piso pedia .53 no pior pixel; .62 e ele mais uma folga, e nao mais que isso. Cada centesimo aqui e fotografia que some atras da barra, e a 38% que sobra ainda deixa a imagem passar: o cabecalho continua lendo como vidro escuro, e nao como a faixa solida que ele vira quando o hero sai da tela. ⚠️ POR QUE NAO E MENOS. `--paper-miudo` tem alfa .55, entao a LETRA e uma mistura da foto com o papel: quando o fundo clareia, ela clareia junto, e a distancia entre as duas quase nao sobe. E por isso que o caminho de "so clarear a tinta" nao existe aqui — para o menu bater 4,5:1 com o fundo em 99, a tinta precisaria de alfa .86, que e branco puro e apaga a hierarquia inteira do cabecalho. Escurecer o fundo e mais barato que clarear a letra, e esta e a conta que prova. ⚠️ CHAPADO, E NAO GRADIENTE. Um gradiente que desvanecesse na base poria a borda de baixo da barra abaixo do piso, e e justamente ali que a letra do menu termina. O corte reto na base e o mesmo corte que a barra solida ja tem, com o mesmo `--fio` por cima. */ --veu-topo-barra: rgba(10, 10, 10, .62); } /* Quem pede menos movimento recebe menos movimento. Nao e enfeite de acessibilidade: enjoo de movimento e real, e custa uma regra. Repare no que NAO esta aqui: nenhuma regra que esconda conteudo. A cascata de entrada so esconde dentro de `prefers-reduced-motion: no-preference` (ver movimento.css), entao aqui nao ha nada para desfazer. Sem movimento os elementos nascem VISIVEIS, nunca invisiveis esperando um script. */ /* `dvh` e a altura da tela DEPOIS de descontar a barra do navegador do celular, que aparece e some com a rolagem. Com `vh` a folha da sacola fica 90% de uma tela que o navegador finge ter, e o rodape dela (o total e o botao) cai atras da barra de endereco. O `@supports` mantem o `vh` de reserva para quem nao conhece a unidade nova. */ @supports (height: 1dvh) { :root { --gaveta-altura: 90dvh; } } @media (prefers-reduced-motion: reduce) { :root { --transicao: 0ms; --mov-dur: 0ms; --mov-passo: 0ms; --mov-desloca: 0px; --preenche-dur: 0ms; /* Escala 1 e a mesma coisa que nao escalar. O hover continua respondendo, com cor e com o preenchimento, so que sem viagem. */ --zoom-quadro: 1; --zoom-mark: 1; } * { animation: none !important; scroll-behavior: auto !important; } }