/* ========================================================================== ABITA — Tokens Fonte de verdade: specs/design.md Nenhum valor bruto fora deste arquivo. Precisa de um número novo? Vira token. ========================================================================== */ :root { /* --------------------------------------------------------------------- COR A interface é monocromática. Toda a cor da página vem da fotografia, e é por isso que o escuro não é #000: um quase-preto deixa a foto respirar em vez de recortá-la contra um buraco. --------------------------------------------------------------------- */ --tinta: #0B0B0C; /* fundo escuro dominante */ --tinta-2: #17171A; /* superfície sobre tinta */ --tinta-3: #232327; /* superfície elevada */ --papel: #FFFFFF; /* fundo claro */ --papel-2: #F5F3F0; /* off-white quente */ --papel-3: #E9E5DF; /* divisor quente */ --grafite: #56565B; /* corpo sobre claro 7.0:1 AA */ --grafite-2: #6C6C72; /* meta sobre claro 5.3:1 AA */ --nevoa: #A7A7AD; /* corpo sobre tinta 8.6:1 AA */ --nevoa-2: #83838A; /* meta sobre tinta 5.2:1 AA */ /* Papéis semânticos. Use estes, nunca os nomes de cor acima. */ --fundo: var(--papel); --fundo-alt: var(--papel-2); --fundo-escuro: var(--tinta); --superficie: var(--tinta-2); --superficie-alta: var(--tinta-3); --texto: var(--tinta); --texto-corpo: var(--grafite); --texto-meta: var(--grafite-2); --texto-inv: var(--papel); --texto-corpo-inv: var(--nevoa); --texto-meta-inv: var(--nevoa-2); --linha: rgba(11, 11, 12, 0.12); --linha-inv: rgba(255, 255, 255, 0.18); /* Erro de formulário. **A única cor da interface fora da fotografia**, por decisão do cliente em 18/09/2026: campo que falta tem de saltar aos olhos. Vermelho fechado, e não o vivo de alerta de sistema: 6.5:1 sobre o papel e 5.7:1 sobre o fundo do aviso, os dois acima do AA. Só no formulário do relatório; em lugar nenhum mais. */ --erro: #B3261E; --erro-fundo: #FBEEEC; /* Borda de campo de formulário. O fio de `--linha` é decoração e mede 1.3:1 sobre o papel; a borda de um campo diz onde digitar, e a WCAG 1.4.11 pede 3:1. Este cinza mede 3.2:1. */ --linha-campo: #8E8E93; /* Texto sobre fotografia. Branco rebaixado no canal alfa, nunca via `opacity`: a propriedade colide com a revelação de entrada, que anima opacity e vence por especificidade. Declarado com opacity, o valor simplesmente não chega à tela. Cinza sobre foto clara não se lê. */ --texto-sobre-foto: rgba(255, 255, 255, 0.90); --meta-sobre-foto: rgba(255, 255, 255, 0.82); /* Véus sobre fotografia. Direcionais: o texto senta em um lado só. */ --veu-base: linear-gradient(180deg, rgba(11,11,12,0.70) 0%, rgba(11,11,12,0.22) 34%, rgba(11,11,12,0.60) 70%, rgba(11,11,12,0.94) 100%); --veu-lado: linear-gradient(100deg, rgba(11,11,12,0.92) 0%, rgba(11,11,12,0.64) 44%, rgba(11,11,12,0.16) 100%); /* Onde o texto ocupa a largura toda, o véu não pode clarear do outro lado: mantém a direção, mas nunca abaixo de 0.62. */ --veu-largo: linear-gradient(100deg, rgba(11,11,12,0.95) 0%, rgba(11,11,12,0.80) 52%, rgba(11,11,12,0.64) 100%); /* Herói: a cena cobre a dobra inteira. O cartão do simulador saiu em 19/10/2026; os stops abaixo foram medidos com ele na tela. Os stops seguem a régua medida na página, não o palpite: rótulo em 12%, título de 16 a 46%, subtítulo até 54%, cartão de 54 a 100% e a banda seguinte cobrindo de 93%. **O alto fechou em 15/09/2026, com a capa virando sequência de seis cenas.** A janela de 20% abria em 0.28 e servia uma foto só. Sobre as seis, o rótulo tinha 5% dos pixels abaixo de 2:1 em três delas, e a própria capa antiga ficava em 3.32. Os valores abaixo são o véu mais leve, numa varredura de 64 combinações, em que o rótulo passa de 4.5:1 em 95% dos pixels e o título de 3:1 em 99%, nas seis cenas, em 1440 e em 360. A janela de 72%, ao lado do cartão, não mudou. **Em 16/09/2026 a sequência trocou quatro cenas**, e o auditório em 360 deixou o rótulo em 4.48 nos 95%. A parada de 20% subiu de 0.62 para 0.64, e o pior rótulo das seis voltou a 4.78. */ --veu-heroi: linear-gradient(180deg, rgba(11,11,12,0.70) 0%, rgba(11,11,12,0.64) 11%, rgba(11,11,12,0.64) 20%, rgba(11,11,12,0.56) 32%, rgba(11,11,12,0.72) 47%, rgba(11,11,12,0.80) 56%, rgba(11,11,12,0.56) 72%, rgba(11,11,12,0.70) 88%, rgba(11,11,12,0.94) 100%); /* Método. O fundo não é mais cena, é matéria: amostras de tecido de acabamento da própria ABITA, deitadas. Textura não disputa com o texto do jeito que um ambiente cheio de móvel disputa, e por isso o véu pode ser o mais leve da página. Calibrado pela régua da imagem girada, medida por faixa: 41 no topo, 110 no meio, 172 na base. O gradiente compensa exatamente essa curva, abrindo onde o pano já é escuro e fechando onde ele clareia. */ --veu-metodo: linear-gradient(180deg, rgba(11,11,12,0.46) 0%, rgba(11,11,12,0.56) 24%, rgba(11,11,12,0.70) 42%, rgba(11,11,12,0.80) 62%, rgba(11,11,12,0.86) 82%, rgba(11,11,12,0.88) 100%); /* Matéria escura e sem curva de luz. A trama de acabamento mede 40 de luminância média e não clareia de um lado para o outro, então véu forte aqui não protege texto nenhum: só apaga a trama, que é o motivo de a foto estar ali. Fecha o bastante para o corpo passar no AA sobre o pixel mais claro e não mais que isso. */ --veu-materia: linear-gradient(100deg, rgba(11,11,12,0.66) 0%, rgba(11,11,12,0.54) 52%, rgba(11,11,12,0.46) 100%); /* Texto no terço esquerdo, foto viva no direito. */ --veu-esquerda: linear-gradient(90deg, rgba(11,11,12,0.95) 0%, rgba(11,11,12,0.88) 32%, rgba(11,11,12,0.52) 66%, rgba(11,11,12,0.34) 100%); /* Banda de fecho: a foto só compõe o fundo, não aparece. Nunca abre abaixo de 0.80, e é esse piso que garante o texto: nem um pixel branco puro atrás dele passa de 60 de luminância, e o cinza `--nevoa` fica em 4.62:1 no pior caso. O contraste deixa de depender da foto e da rolagem. */ --veu-fecho: linear-gradient(90deg, rgba(11,11,12,0.95) 0%, rgba(11,11,12,0.88) 40%, rgba(11,11,12,0.80) 100%); /* Card do escopo: a foto cobre o card inteiro e o texto assenta sobre ela. Transparente no alto para a cena aparecer, fechando na base, que é onde nome e descrição ficam. */ /* Fecha mais cedo desde 08/09/2026. Com cinco cards na fileira o card caiu de 255 para 220px de largura, o texto passou a quebrar em mais linhas e o nome subiu para a parte quase transparente do véu, em cima da parede clara de duas cenas. Medido no pior pixel dos cinco cards: 2.33 no nome e 2.72 na linha de escopo, os dois reprovando no AA. Com o fecho antecipado sobem para 4.59 e 6.34, e o alto do card continua aberto o bastante para a cena aparecer. */ --veu-card: linear-gradient(180deg, rgba(11,11,12,0.12) 0%, rgba(11,11,12,0.40) 24%, rgba(11,11,12,0.76) 52%, rgba(11,11,12,0.92) 100%); --veu-chapado: rgba(11, 11, 12, 0.70); /* --------------------------------------------------------------------- TIPOGRAFIA — Montserrat, família única. Decisão do cliente. Pesos: 400 corpo · 500 títulos · 600 números e rótulos. Nunca 700+. A escala é fluida, com clamp. Salto de breakpoint em título grande produz o degrau que denuncia gabarito; a interpolação contínua mantém a proporção em qualquer largura. --------------------------------------------------------------------- */ --fonte: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; --peso-normal: 400; --peso-medio: 500; --peso-forte: 600; --fs-mega: clamp(2.75rem, 1.10rem + 7.0vw, 7.5rem); /* 44 → 120 */ --fs-d1: clamp(2.00rem, 1.15rem + 3.6vw, 4.25rem); /* 32 → 68 */ --fs-d2: clamp(1.50rem, 1.15rem + 1.5vw, 2.375rem); /* 24 → 38 */ --fs-d3: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem); /* 19 → 24 */ /* Entre d2 e d3. Existe para o título de seção que abre um bloco de meio de página e não pode disputar escala com os picos. */ --fs-d2-sub: clamp(1.3125rem, 1.1rem + 0.9vw, 1.75rem); /* 21 → 28 */ --fs-lead: clamp(1.0625rem, 1.00rem + 0.42vw, 1.3125rem); --fs-corpo: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem); --fs-sm: 0.875rem; --fs-micro: 0.6875rem; /* 11px, rótulo em caixa alta */ --fs-num: clamp(3.25rem, 0.2rem + 11.5vw, 9.5rem); --fs-num-sm: clamp(1.875rem, 0.9rem + 3.6vw, 3.5rem); /* A declaração em uma linha só. Calculado para os 38 caracteres da frase caberem na coluna central sem quebrar do tablet para cima. */ --fs-citacao: clamp(1.625rem, 0.35rem + 3.5vw, 3.75rem); /* 26 → 60 */ --lh-mega: 0.92; --lh-display: 1.03; --lh-titulo: 1.16; --lh-lead: 1.45; --lh-corpo: 1.62; --lh-micro: 1.3; --ls-mega: -0.035em; --ls-display: -0.025em; --ls-titulo: -0.015em; --ls-lead: -0.008em; --ls-micro: 0.14em; /* Numerais tabulares onde o valor recalcula ou se alinha em coluna. */ --num-tabular: "tnum" 1, "lnum" 1; /* --------------------------------------------------------------------- ESPAÇO — escala de 8px --------------------------------------------------------------------- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 1rem; --e-4: 1.5rem; --e-5: 2rem; --e-6: 3rem; --e-7: 4rem; --e-8: 5rem; --e-9: 6rem; --e-10: 8rem; --e-11: 10rem; --e-12: 13rem; /* Ritmo de seção, fluido pelo mesmo motivo da tipografia. Encurtado em 01/09/2026. Em 1440px o respiro valia 147px em cima e 147px embaixo de cada seção: 294px por seção, quase três telas de página só de vazio. O respiro tem de separar blocos, não virar bloco. */ --secao: clamp(3.5rem, 1.75rem + 5.5vw, 7rem); --secao-larga: clamp(4.5rem, 2rem + 7vw, 9rem); --secao-curta: clamp(2.5rem, 1.25rem + 3.5vw, 4.5rem); /* Altura da capa das páginas internas 02 a 08. Em 04/09, o cliente pediu um corte visual de cerca de um terço e o texto mais alto na foto. */ --capa-alt: clamp(27rem, 24rem + 5vw, 32rem); /* A banda de fecho é mais baixa que a capa desde 09/09/2026: ela não abre página nenhuma, fecha, e com a cena presa à janela o que segura o olho é o movimento, não o tamanho. */ --fecho-alt: clamp(20rem, 17rem + 5vw, 25rem); /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --goteira: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem); /* Trilha de extensão da grade de sangria. Precisa valer zero no celular: dois blocos de 4rem em uma tela de 360px comem um terço da largura de leitura e o texto vira uma coluna de duas palavras. */ --trilha-larga: clamp(0rem, 5vw - 1.75rem, 4rem); --medida: 1320px; /* coluna principal */ --medida-texto: 62ch; /* texto corrido */ --gap: clamp(1.25rem, 0.5rem + 2vw, 2.5rem); --cabecalho-h: clamp(4rem, 3rem + 2vw, 5.5rem); /* Quanto uma imagem invade a banda seguinte ao atravessar a emenda. É a travessia do design.md §2.3: a foto não termina onde a cor de fundo termina, ela passa por cima da costura. */ --travessia: clamp(3rem, 7vw, 6.5rem); /* --------------------------------------------------------------------- ÂNGULO Λ — assinatura, tirada do logo. O A da marca é um triângulo puro, sem travessão. Continua sendo a única constante geométrica, mas agora aparece pouco: como marca d'água e como recorte, nunca como marcador repetido em cada título. --------------------------------------------------------------------- */ --angulo: 24deg; --lambda-tan: 0.4452; /* tan(24°) */ --lambda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 655'%3E%3Cpath d='M291 0 L469 0 L760 655 L575 655 L379 183 L185 655 L0 655 Z'/%3E%3C/svg%3E"); /* --------------------------------------------------------------------- FORMA --------------------------------------------------------------------- */ --raio: 2px; --raio-md: 4px; /* Raio do card de escopo. Fluido porque o card encolhe muito entre o celular e o desktop, e raio fixo em caixa pequena vira bolha. */ --raio-card: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem); --fio: 1px; /* Duas sombras, e a diferença não é de gosto. `box-shadow` aceita quatro comprimentos, com espalhamento; `drop-shadow()` aceita no máximo três e **descarta o filtro inteiro** se receber um quarto. A `--sombra-peca` tem espalhamento e só serve para `box-shadow`; recorte flutuando usa a `--sombra-recorte`. */ --sombra-peca: 0 40px 80px -34px rgba(11, 11, 12, 0.42); --sombra-recorte: 0 30px 44px rgba(11, 11, 12, 0.34); --sombra-cartao: 0 34px 80px -28px rgba(11, 11, 12, 0.30); /* --------------------------------------------------------------------- MOVIMENTO Entrada por revelação de máscara, não por fade solto: o conteúdo sobe por trás de uma aresta, que é o gesto que o Λ já faz. --------------------------------------------------------------------- */ /* Luz do CTA. Um arco percorre a borda do botão do cabeçalho, que é a conversão principal do site. Monocromático, como todo o resto da interface, e contínuo em vez de piscante: pisca acima de três vezes por segundo reprova na WCAG 2.3.1, e mesmo abaixo disso lê como banner, que é o oposto do que o briefing §3 pede. */ --led-volta: 5.5s; --led-arco: 58deg; /* Fileira de clientes na Prova. A volta inteira leva 42s e a fileira tem doze marcas, então cada uma gasta 3,5s para atravessar um vale: é o tempo em que ela cresce, passa pelo centro e volta a recuar. `--faixa-vale` é quantos vales cabem à vista, e `--faixa-vao` é a fração do vale que sobra de respiro entre uma marca e a seguinte. As duas entram no cálculo da fase, e por isso mudar quantas marcas aparecem não desalinha o destaque do centro. */ --faixa-volta: 42s; --faixa-vale: 5; --faixa-vao: 0.22; --faixa-alt: clamp(3.25rem, 1.5rem + 5vw, 5.5rem); --t-rapida: 220ms; --t-media: 420ms; --t-entrada: 900ms; --t-troca: 1200ms; /* capa da home: uma cena empurrando a outra */ --mola: cubic-bezier(0.16, 1, 0.3, 1); --suave: cubic-bezier(0.4, 0, 0.2, 1); --entrada-y: 2rem; --parallax: 1; /* zerado em prefers-reduced-motion */ /* --------------------------------------------------------------------- CAMADAS --------------------------------------------------------------------- */ --z-fundo: 0; --z-conteudo: 10; --z-flutua: 20; --z-cabecalho: 100; --z-whatsapp: 200; --z-menu: 300; } /* ========================================================================== ACESSIBILIDADE ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --t-rapida: 0ms; --t-media: 0ms; --t-entrada: 0ms; --t-troca: 0ms; --entrada-y: 0; --parallax: 0; } }