/* ══════════════════════════════════════════════════════════════════════════════════ ResenhaFC — resenhafc.com · a vitrine (one page) · folha de estilo local Montada em 2026-09-16 a partir de artefato aprovado. NADA AQUI FOI INVENTADO: cada valor de cor, tipo, espaço, raio, forma e sombra é CÓPIA das fontes do Design System do produto (tokens.css · base.css · design-system.css). Onde as três fontes divergem, vale a que o próprio sistema declara como última na concatenação — tokens.css —, e é por isso que o verde de texto/anel aqui é #A6F31A e o verde #39FF14 é só LUZ. ── TEMA: SÓ O ESCURO, E O MOTIVO É DO PRÓPRIO SISTEMA ──────────────────────────── O sistema tem os dois temas, e a lei dele sobre a troca é literal: o tema claro é "opt-in por atributo, NUNCA por prefers-color-scheme (o escuro é o tema que ABRE em qualquer máquina)". Ligar o tema claro por preferência do aparelho seria divergir do sistema — e divergência com o Design System é falha de gate, não licença de quem monta. Por isso esta página abre e permanece no tema da marca. O tema claro existe, está pronto no sistema e entra aqui no dia em que o dono do Design System disser por qual gatilho (atributo, controle na página, nenhum). ── O CHÃO: PENDÊNCIA DECLARADA, NÃO IMPROVISO ──────────────────────────────────── O chão oficial do sistema é o quadro tático (ardósia com a jogada em giz). O ativo NÃO está em assets/ e quem monta não gera imagem. Sem ele, a página usa a superfície que o próprio sistema declara para esse caso — "superfícies sem bg: fallback quando não há imagem atrás", --sf-0 — e NÃO usa desfoque em lugar nenhum, porque a lei do material diz que "vidro só existe se há algo atrás; se não há, corrige-se o FUNDO, nunca o alpha". ⭐ 1.10.0: os selos das promessas DEIXARAM DE SER VIDRO INTERNO e passaram a ser TILE SÓLIDO (o componente `selo.3d`) — é a exceção que o sistema declara para o ativo raster, e ela alcança o tile, nunca a página atrás dele. Pendência para o dono dos ativos e do Design System: o derivado do quadro tático para o site. ── ORÇAMENTO DE VOLT (o verde é bisturi) ───────────────────────────────────────── Volt aplicado por esta folha, em repouso: 2 — e ⭐ 1.11.1 MUDOU QUAIS SÃO AS DUAS PEÇAS, sem mudar o número. Antes: a etiqueta do herói (.tag--heroi) e o botão do fecho. Agora: o BOTÃO DO HERÓI e o BOTÃO DO FECHO — a etiqueta perdeu o volt no mesmo movimento em que o botão o ganhou. O verde MUDOU DE PEÇA, não somou, e a razão é lei de material dele: «o preenchimento luminoso é a chamada máxima da tela: um por tela» e «se três coisas estão coloridas, nenhuma se destaca» — uma linha volt encostada num botão aceso seria a segunda zona colada na primeira. Um terceiro só em estado: o anel de foco do teclado. ⭐ 1.2.0: o link Entrar do cabeçalho NÃO acrescenta uma terceira zona — ele é o componente `link` na variante `quiet`, que o sistema pinta com `text_secondary`, e o próprio componente proíbe o link que se distingue só pela cor verde. O orçamento continua em 2. O verde que aparece DENTRO dos PNG da marca e dos três ícones 3D é pixel do ativo do fundador, decisão dele, e não é tinta desta folha. ⭐ 1.11.1 — A RÉGUA NOVA, e ela é DE VIEWPORT, não de página (padrão `vitrine.orcamento.de.volt.por.viewport`): NO MÁXIMO UMA PEÇA ACESA POR VIEWPORT. «Acesa» tem definição mecânica — a família de preenchimento luminoso, --aceso-fundo MAIS --aceso-sombra. Volt de TEXTO (a .tag, o .link--quieto), o anel de foco e o verde gravado nos pixels de um ativo NÃO são peças acesas. O teste, que é do AG-31 e de quem monta: rolar a página em passos de meia altura de viewport a 320, 768 e 1280 e contar as peças acesas visíveis, inteiras ou em pedaço — passa se for ≤ 1 em toda parada. O herói abre a página e o fecho a termina; entre os dois vivem o Manifesto inteiro e as três promessas. ⚠️ NÃO MEDIDO nesta folha — esta sessão não tem navegador; a aritmética está no relatório de quem montou. ⭐ 1.11.2 — O ORÇAMENTO NÃO MUDA COM A FOTO ATRÁS DO TEXTO: «acesa» tem definição mecânica (a família de preenchimento luminoso, --aceso-fundo MAIS --aceso-sombra) e o retrato não tem um pixel de volt. Continuam 2 zonas em repouso, as mesmas duas. ⚠️ A RÉGUA POR VIEWPORT PRECISA SER REEXECUTADA mesmo assim, porque a ALTURA DO HERÓI mudou: a foto subiu 14% da própria altura atrás do texto e o `gap` foi a `space.0`. ── NADA DE FORA ────────────────────────────────────────────────────────────────── Nenhuma fonte, imagem, folha, medição ou cookie de terceiro. ⭐ 1.3.0: o endereço externo da página inteira continua sendo UM SÓ — o do app —, agora alcançável de TRÊS lugares e de nenhum quarto (o link do cabeçalho, o botão do herói e o botão do fecho). Os três moram no HTML. ══════════════════════════════════════════════════════════════════════════════════ */ /* ── 1 · TOKENS — cópia literal das fontes do Design System ───────────────────────── */ :root, [data-tema="escuro"] { --step: 1; /* controle de leitura A/A+/A++ do sistema */ /* superfície (fallback declarado quando não há arte atrás) */ --sf-0: #090D10; /* base da página — lei de marca */ --sf-1: #0E141A; /* sólido — o chão do `selo.3d` (1.10.0) */ /* texto: a escala tingida da régua do fundador */ --tx-1: #EDF2F6; /* decide */ --tx-2: #C7D2DB; /* apoio — piso sobre vidro, véu ou textura */ --tx-3: #93A5B5; /* meta */ --tx-4: #8A99A8; /* meta fraca — só em peça grande */ --tx-5: #5C6B79; /* linha, moldura, traço: NUNCA texto */ /* acentos */ --volt: #A6F31A; /* texto / anel / ativo */ --on-ac: #0A0F05; /* texto sobre preenchimento verde */ --aceso-de: #C3FF3D; --aceso-ate: #93DC0C; --aceso-fundo: linear-gradient(115deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.12) 38%, rgba(255,255,255,0) 42%), linear-gradient(180deg, var(--aceso-de) 0%, var(--aceso-ate) 100%); --aceso-aro: rgba(255,255,255,.35); --aceso-sombra: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 8px -3px rgba(235,255,170,.9), 0 12px 28px -8px rgba(154,240,16,.55); /* vidro interno (uma folha por pilha: o interno não tem tinta nem desfoque) ⭐ 1.10.0: estes quatro seguem DECLARADOS e deixaram de ser APLICADOS — eram do selo das promessas, que virou tile sólido. Ficam porque são cópia fiel do sistema e o próximo bloco da one page pode precisar deles; nenhuma regra desta folha os usa. */ --interno-suave: rgba(255,255,255,.04); --glass-interno-sheen: rgba(255,255,255,.18); /* aro de luz e halo — a família CINZA-VIDRO */ --aro-luz-cinza: rgba(255,255,255,.20); --halo-cinza: 0 0 0 1px rgba(255,255,255,.05), 0 0 16px -8px rgba(255,255,255,.14); /* forma: cantos mistos (2 quinas redondas, 2 mais retas) */ --canto-misto: round bevel round bevel; /* linha */ --ln: color-mix(in srgb, var(--tx-5) 55%, transparent); /* tipografia */ --f-display: 'Space Grotesk', 'Inter', 'Segoe UI', system-ui, sans-serif; --f-body: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, sans-serif; --t-display: clamp(2.5rem, calc(1.9rem + 2.8vw), 4rem); /* 40→64px · h1 de página */ --t-titulo: 1.5rem; --t-sub: 1.25rem; --t-corpo: 1rem; /* 1rem é O PISO */ /* espaço e forma */ --gap-secao: 2rem; --gap-bloco: 1rem; --gap-item: .6rem; --r-btn: .75rem; /* 12px · botão */ --r-ctl: .875rem; /* 14px · controle, selo */ --touch-min: 2.75rem; /* 44px */ --touch-campo: 3.5rem; /* 56px */ /* movimento */ --dur-fast: 200ms; --ease-standard: cubic-bezier(.2,0,0,1); /* medida de página: a largura de leitura do sistema */ --largura-pagina: 72rem; } /* ── 2 · BASE — cópia do chrome do sistema, sem o chão de imagem (ver cabeçalho) ──── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: calc(100% * var(--step)); } body { margin: 0; background: var(--sf-0); color: var(--tx-1); font-family: var(--f-body); font-size: var(--t-corpo); line-height: 1.5; min-height: 100vh; overflow-x: hidden; /* nenhuma rolagem horizontal entre 360 e 1440 */ } h1, h2, p { margin: 0; } img { display: block; max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; } /* invólucro: a medida do sistema, com o piso de 16px de gutter */ .envoltorio { width: 100%; max-width: var(--largura-pagina); margin-inline: auto; padding-inline: var(--gap-bloco); } @media (min-width: 900px) { .envoltorio { padding-inline: var(--gap-secao); } } /* tipos do sistema */ .t-display { font-family: var(--f-display); font-size: var(--t-display); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--tx-1); text-wrap: balance; } .tag { font-family: var(--f-display); font-size: 1rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-2); } .tag--heroi { color: var(--volt); } /* etiqueta é TEXTO → o volt que se lê */ /* ⚠️ 1.11.1 — `.tag--heroi` FICA DECLARADA E DEIXOU DE SER APLICADA nesta página: a única peça que a usava era a linha do herói, e ela desceu para debaixo do título perdendo o volt (ver a parte 4). A regra continua aqui porque é cópia fiel da regra do sistema para etiqueta de acento — do mesmo jeito que os tokens de vidro interno seguem declarados e não aplicados desde a 1.10.0. Nenhum seletor desta folha a usa. ⭐ 1.11.1 — `.tag--apoio` é a MESMA receita `.tag`, com as duas mudanças que o padrão `vitrine.heroi.com.chamada.e.botao` declara — mais UMA TERCEIRA, que é decisão da coordenação e está marcada como tal, para ninguém a confundir com o padrão: caixa alta ... some. Ele escreveu a frase em caixa mista e o rodapé desta mesma página já a publica assim — a caixa mista não é invenção daqui. volt ......... some: a tinta passa a `{color.roles.text_secondary}` → --tx-2, que é o que a própria `.tag` já pinta sem o modificador --heroi. ⭐ CD-31 · espacejamento ... o .12em da receita `.tag` é de CAIXA ALTA, e em caixa mista vira defeito de leitura. Decisão da coordenação (15/09, reversível): volta a `normal`, que é o do CORPO — `text.body` não declara tracking nenhum. É valor HERDADO de um papel do sistema, não número inventado aqui. ⚠️ Pendente de ratificação do dono do Design System no próximo delta; o padrão 1.11.1 declarou as duas mudanças de cima e ficou calado sobre esta. */ .tag--apoio { text-transform: none; letter-spacing: normal; } /* ── 3 · CABEÇALHO · bloco vitrine.00.cabecalho ──────────────────────────────────── */ /* Sem menu: a página é uma só e não há para onde navegar. Aqui o R vem ACOMPANHADO do nome — ao contrário da tela de boas-vindas do produto, onde o título já diz o nome. ⭐ 1.2.0 — O LINK «ENTRAR» ENTRA AQUI, e a regra anterior desta folha («sem botão: o caminho é um só, no fecho») está SUPERADA por ordem do fundador de 15/09, depois de ver a página no ar: «E o link tem que estar no topo, já o local do clique para entrar.» ⭐ 1.3.0 SUBSTITUIU A CONTAGEM (era «dois cliques e nenhum terceiro»): a página passa a ter TRÊS cliques para o app e NENHUM QUARTO — o link daqui, o botão do herói e o botão do fecho, com o mesmo rótulo e o mesmo destino nos três. A PEÇA DAQUI NÃO MUDOU: o padrão do herói (DS 1.11.1) diz literalmente que o link «Entrar» do cabeçalho «continua exatamente como está» e não é tocado por ele. A FORMA NÃO É DESTA FOLHA: é o componente `link`, variante `quiet`, cujo `usage` no Design System nomeia literalmente este lugar — «Caminho secundário declarado: 'Entrar' no cabeçalho do site». O padrão `nav.site.cabecalho` diz a mesma coisa em outra frase: «o 'Entrar' como link secundário». Ver a parte 3b. POSIÇÃO: `margin-left:auto` põe o link no lado oposto à marca, na MESMA linha, sem mexer no par R+nome. O cabeçalho NÃO acompanha a rolagem: o Design System não declara cabeçalho fixo para este padrão, e fixá-lo seria forma inventada aqui. Ele está visível assim que a página abre porque é a primeira coisa da página. LARGURA a 320px (passo A, o único desta folha — não há controle A/A+/A++ no site): 288px úteis dentro do `.envoltorio`; marca 44 + gap 9,6 + nome ~134 + link ~53 deixam folga. O link é `flex:none` para nunca ser o primeiro a ser espremido. */ .cabecalho-site { display: flex; align-items: center; gap: var(--gap-item); padding-block: var(--gap-bloco); } .cabecalho-site > .link { margin-left: auto; flex: none; } .marca-r { width: var(--touch-min); height: var(--touch-min); object-fit: contain; flex: none; } .marca-nome { font-family: var(--f-display); font-weight: 700; font-size: var(--t-titulo); letter-spacing: -.012em; line-height: 1; color: var(--tx-1); } @media (min-width: 900px) { .cabecalho-site { padding-block: var(--gap-secao); } .marca-r { width: var(--touch-campo); height: var(--touch-campo); } } /* ── 3b · O LINK · componente `link`, variante `quiet` ───────────────────────────── */ /* NADA ABAIXO É MEDIDA DESTA FOLHA: tudo é cópia do componente `link` do Design System, item a item, com o token ao lado. tinta ......... `{color.roles.text_secondary}` → --tx-2. ⛔ NÃO é o volt: o próprio componente proíbe («Link que só se distingue do texto pela cor verde»), e é por isso que o ORÇAMENTO DE VOLT desta folha CONTINUA EM 2 — ⭐ 1.11.1: hoje as duas peças são o botão do herói e o botão do fecho, e não mais a etiqueta e um botão. sublinhado .... regra `do`: «Sublinhado ou outro sinal além da cor — informação nunca depende só de cor (1.4.1)». Sem número: a espessura e o afastamento são os do navegador, porque medida que o sistema não declara não se inventa aqui. alvo .......... `space.touch.min` (2,75rem = 44px) → --touch-min. Regra `do`: «Alvo tocável de 44px mesmo quando o texto é curto». O texto «Entrar» já passa dos 44px de largura; o que faltava era a ALTURA, e é ela que o `min-height` garante. tipo .......... `text.body` (1rem / 1.5) → --t-corpo. A família é a do corpo, herdada do `body`. foco .......... `{color.roles.focus_ring}` → o `:focus-visible` global desta folha, que já é --volt. Anel de foco não conta no orçamento. movimento ..... regra `do` de 1.2.0: «cor e sublinhado transicionam em motion.fast com ease.standard; sob prefers-reduced-motion a troca é direta». Como o sublinhado herda `currentColor`, transicionar `color` move os dois. O estado `hover` é do componente (`states`: default · hover · focus_visible · active · disabled) e vai de `text_secondary` para `text_primary` — os dois papéis que o próprio `link` declara em `tokens_used`. */ .link { font-size: var(--t-corpo); line-height: 1.5; min-height: var(--touch-min); display: inline-flex; align-items: center; text-decoration: underline; } .link--quieto { color: var(--tx-2); } .link--quieto:hover { color: var(--tx-1); } @media (prefers-reduced-motion: no-preference) { .link { transition: color var(--dur-fast) var(--ease-standard); } } /* ── 4 · HERÓI · bloco vitrine.01.heroi ──────────────────────────────────────────── */ /* ESTADO: "default" — a arte derivada do mestre escolhido EXISTE em assets/ (recorte da faixa direita, sem nenhum texto gravado). O estado "sem_arte" não foi usado. LEI OBEDECIDA: nada de texto gravado na arte aparece na página, e nenhuma extensão de arte por folha de estilo — a imagem nunca é ampliada além do tamanho natural (516px de largura), só reduzida. ⭐ 1.11.2 — A FOTO DEIXA DE SER IRMÃ DO TEXTO E VIRA FUNDO DO BLOCO. Padrão `vitrine.heroi.com.fundo` do Design System 1.11.2, nascido da ordem do fundador de 15/09 ~19h, olhando a página NO CELULAR (CD-41): «Eh ideal essa imagem das pessoas estar por tras da escrita com um tema mais preto do lado esquerdo onde está escrito e a imagem do fundo, quase como uma transferência.» ⚠️ NENHUM NÚMERO DESTA PARTE É DESTA FOLHA: cada parada, cada porcentagem e cada rem são CÓPIA do padrão, e o comentário ao lado de cada um diz de onde ele saiu. ⚠️ O padrão substitui A COMPOSIÇÃO de `vitrine.heroi.com.chamada.e.botao` nas duas larguras — e SÓ a composição: a ordem das quatro peças, o espaçamento pela escala, o alinhamento à esquerda, a variante acesa do botão e a régua de uma peça acesa por viewport continuam valendo palavra por palavra. Nenhuma palavra de copy mudou. ⛔ TRÊS COISAS QUE ESTAVAM ESCRITAS AQUI DEIXARAM DE SER VERDADE: · A MÁSCARA SAIU — as duas, a da base no celular e a da esquerda a partir de 900px. O padrão as troca pelo VÉU, e o motivo é a FALHA: o que este comentário dizia era «onde o navegador não tiver máscara, a foto aparece inteira com a borda viva», e com TEXTO POR CIMA isso deixou de ser detalhe de borda e virou RISCO DE CONTRASTE. Sobre um chão liso, apagar a foto com máscara e cobri-la com um gradiente DA COR DO CHÃO dão a mesma imagem; o que muda é o que acontece quando falta suporte. Véu é fundo comum e NÃO FALHA ABERTO. · O RECORTE 516/620 SAIU. A caixa da foto passa a ter a proporção EXATA do ativo (516/768), e caixa com a proporção do conteúdo não recorta nada. O recorte existia para caber na dobra do celular — e a foto saiu do caminho do botão. · `object-fit` E `object-position` SAÍRAM, nas duas larguras: sem recorte não há enquadramento. Quem decide o recorte é o ATIVO; quem decide o que se vê é o VÉU. A FUSÃO DA BASE CONTINUA, e ela é DO ATIVO: ele já chega com os últimos ~27% apagados, num preto azulado que, a olho, para a dois ou três pontos de --sf-0. A máscara de base existia para devolver a passagem que o recorte 516/620 interrompia; sem o recorte, ela não tem mais o que consertar. ⚠️ Se aparecer degrau visível na junção com o chão da página, a correção declarada é UMA PARADA A MAIS NO VÉU, nunca um ativo novo. AS QUATRO FOLHAS, de baixo para cima: 1 · o chão ... --sf-0, que já é o `body` 2 · a foto ... o ativo, sem recorte por CSS ....................... `.heroi-arte` 3 · o véu .... gradiente de --sf-0, folha do PRÓPRIO BLOCO DA ARTE (`inset: 0`), nunca do herói ............... `.heroi-arte::after` 4 · o texto .. intocado ........................................... `.heroi-texto` ⚠️ A ARMADILHA QUE QUEBRARIA EM SILÊNCIO, e o padrão manda declará-la: desde a CD-30 a arte é o ÚLTIMO filho do documento, e último filho PINTA POR CIMA — sem ordem de pintura declarada, a foto cobriria o texto, e o defeito seria óbvio na tela e invisível na revisão do CSS. São três linhas: contexto próprio no herói (`position` + `isolation`), o texto numa camada ACIMA (`z-index: 1`) e a arte na de BAIXO (`z-index: 0`). ORDEM DO DOCUMENTO E ORDEM DE FOCO NÃO MUDAM — a CD-30 continua governando as duas, e o padrão a RATIFICOU: ela «deixa de ser um remendo de dobra e vira o mecanismo do padrão». ⚠️ O VÉU MORA NA CAIXA DA FOTO, NÃO NA DO HERÓI, e é decisão de engenharia do padrão: parada de gradiente é % DA CAIXA QUE A HOSPEDA, e na caixa do herói a borda esquerda da foto viaja de 41% da largura (a 900px) a 66% (a 1920px) — nenhum conjunto de paradas sobrevive a essa viagem. Na caixa da FOTO as mesmas paradas valem em toda largura. É por isso que o bloco da arte passa a MEDIR A FOTO (`width: min(100%, 32.25rem)`): assim `inset: 0` é a caixa da foto em qualquer tela, e nunca uma caixa maior do que ela. Uma declaração, todas as telas. ⭐ O `gap` DO HERÓI VAI A `space.0` ABAIXO DE 900px, e é a ANULAÇÃO DECLARADA DE UM VALOR DECLARADO — o mesmo mecanismo que colou o fecho nas promessas na 1.11.0: apaga-se o respiro que estava ali, não se inventa um novo. Ele valia `space.gap.bloco` (1rem) entre o texto e a arte; com a arte SOBREPOSTA, somar 16px de respiro à sobreposição faria a conta do padrão mentir em 16px. A partir de 900px o gap volta a `space.gap.secao`, intacto — é ele que mantém o texto exatamente onde está. ⭐ `min-height: 38.75rem` (620px) é o PISO declarado pelo padrão abaixo de 900px, e o número não é invenção: é a altura do recorte que o sistema já declarava para este ativo. ⚠️ ELE NÃO MORDE HOJE — o bloco nasce com ~900px a 390 e ~940 a 320 — e é provadamente inerte a partir de 900px também (768 da foto + 128 de respiro = 896). Existe para o dia em que o texto encolher e a foto ficar sozinha segurando o bloco. */ .heroi { display: grid; gap: 0; /* `space.0` — a anulação declarada, acima */ padding-block: var(--gap-secao); min-height: 38.75rem; /* 620px — o piso do padrão */ position: relative; /* folha 1: contexto próprio do herói ... */ isolation: isolate; /* ... isolado, para as camadas não vazarem na página */ } /* ⭐ A SOBREPOSIÇÃO NEGATIVA — o mecanismo, e de onde sai cada número (padrão, «O CELULAR»). O problema que a foto de fundo cria: os rostos moram na METADE DE CIMA do ativo e cairiam atrás do título, e nenhum `object-position` os tira de lá. Quem resolve não é o recorte, é a sobreposição: · faixa de céu do ativo (borda de cima → primeiro cabelo) = 140px de 768 = 18,2%; · a foto sobe 18,2% MENOS 4,2 pontos de folga = 14% DA ALTURA DA FOTO; · ⚠️ margem em % no CSS resolve pela LARGURA do bloco que a contém, nunca pela altura: 14% da altura de um ativo 516×768 são 20,8% da largura — aritmética sobre a dimensão natural, nunca número solto; · acima de 516px a foto PARA DE CRESCER (teto do tamanho natural) e a sobreposição para junto: 14% de 768px = 6,7rem; · na folha, o menor dos dois em módulo: `max(-20.8%, -6.7rem)`. EM TELA: ~81px a 390 e ~67px a 320, deixando ~25px e ~20px de ar entre a base da microcopia e o primeiro cabelo. A conta inteira está no relatório de quem montou. ⭐ E O EFEITO COLATERAL QUE É O MELHOR DESTA VERSÃO: a arte está DEPOIS do texto no documento e sobe por MARGEM NEGATIVA — ela nunca empurra nada para baixo. A conta da dobra do celular voltou a ser só de texto. ⭐ ANCORADA À DIREITA ENTRE 517 E 899px — o padrão MUDA ISTO (até ontem era CENTRADA): «é o que o véu horizontal e a composição do ativo pedem, e é o ensaio do que acontece a partir de 900». À esquerda dela fica o chão liso, e a borda esquerda da foto se dissolve nele sem emenda, porque a tinta do véu É a cor do chão. Abaixo de 517px a largura é 100% e a margem automática não tem o que absorver: UMA declaração serve as duas faixas. */ .heroi-arte { position: relative; /* folha 2: a caixa que hospeda o véu */ z-index: 0; /* a camada de BAIXO: a foto nunca cobre o texto */ width: min(100%, 32.25rem); /* 516px — o teto do tamanho natural do ativo */ margin-left: auto; /* ancorada à direita a partir de 517px */ margin-top: max(-20.8%, -6.7rem); /* 14% da altura da foto: 20,8% da largura, com teto de 6,7rem */ } /* ⭐ O VÉU — a «transferência». Duas camadas numa declaração só: nenhuma cor nova, nenhum token novo, zero peso. A tinta é --sf-0, a mesma do chão da página; as paradas são GEOMETRIA, não cor. AS PARADAS DO CELULAR, em % da ALTURA da caixa da foto, gradiente VERTICAL: 0% → 15% .... --sf-0 CHEIO ....... a faixa que o texto ocupa (14%) mais 1 ponto 24% ......... --sf-0 a 55% ....... o meio da travessia 36% ......... transparente ....... daqui para baixo a foto é ela mesma POR QUE VERTICAL E NÃO DIAGONAL, com a conta do padrão: a 390px o texto tem 358px de largura e NÃO EXISTE «lado esquerdo livre»; num diagonal as linhas de igual escuridão são inclinadas e a faixa do texto se projeta até ~31% da linha do gradiente, onde caem TRÊS dos quatro homens (projeções em 20%, 25% e 29%) — o diagonal apagaria o grupo. No vertical as linhas de igual escuridão são HORIZONTAIS, iguais às da faixa dos rostos, e some só o que está acima deles. Rosto a rosto: o primeiro cabelo (18,2%) fica sob 84% de véu e vira silhueta; os dois do meio entre 76% e 27%; o mais próximo (31,9% → 44,9%) sob 19% caindo a zero, limpo. A imagem SAI DO PRETO. A SEGUNDA CAMADA é a frase dele ao pé da letra — «um tema mais preto do lado esquerdo onde está escrito» —, horizontal e FRACA, em % da LARGURA: borda esquerda ... --sf-0 a 50% 34% .............. --sf-0 a 16% 56% .............. zero Ela é a PRIMEIRA da lista porque a primeira camada do `background` é a que pinta POR CIMA, e o padrão a declara «por cima do vertical». ⚠️ A ORDEM DE FALHA, que é a razão de o véu ter substituído a máscara: a declaração sólida abaixo é o que sobra num navegador sem `color-mix` — véu CHEIO, a página lisa de antes, texto legível. O véu NÃO FALHA ABERTO em lugar nenhum. A sonda do `@supports` precisa do hex literal porque `var()` dentro de `@supports` dá SEMPRE verdadeiro; o hex é o próprio --sf-0, e ali é SONDA DE SUPORTE, não tinta. ⛔ NADA AQUI VIRA VIDRO: não há desfoque, não há tinta de outra família e não há sheen — o véu é um gradiente da cor do chão e não muda a natureza de superfície de nada. Este é o primeiro lugar da página com arte por trás e, por isso, o primeiro em que o vidro SERIA legal pela lei de material; o padrão fecha o assunto por escrito: nada vira vidro nesta versão. */ .heroi-arte::after { content: ""; position: absolute; inset: 0; /* folha 3: a caixa da FOTO, nunca a do herói */ pointer-events: none; /* o véu não é interativo (acessibilidade do padrão) */ background: var(--sf-0); /* degradação declarada: sem `color-mix`, véu cheio */ } @supports (background: color-mix(in srgb, #090D10 50%, transparent)) { .heroi-arte::after { background: /* camada horizontal FRACA — o «lado esquerdo mais preto», por cima */ linear-gradient(90deg, color-mix(in srgb, var(--sf-0) 50%, transparent) 0%, color-mix(in srgb, var(--sf-0) 16%, transparent) 34%, transparent 56%), /* camada vertical — a faixa do texto, cheia até 15% */ linear-gradient(180deg, var(--sf-0) 0%, var(--sf-0) 15%, color-mix(in srgb, var(--sf-0) 55%, transparent) 24%, transparent 36%); } } /* ⭐ A CAIXA DA FOTO PASSA A TER A PROPORÇÃO EXATA DO ATIVO, e caixa com a proporção do conteúdo NÃO RECORTA NADA: nenhum rosto é cortado em largura nenhuma — não por sorte de enquadramento, mas porque não há enquadramento. A proporção declarada continua reservando o espaço antes de a imagem carregar, a mesma proteção contra pulo de layout que o `aspect-ratio` do recorte dava, agora com os números NATURAIS do ativo. O PESO NÃO MUDA: mesmo arquivo, mesmos ~51,6 kB, mesmo hash, nenhum derivado novo. ⚠️ Nota para quem medir o LCP: com a foto atrás do texto, o elemento maior da primeira pintura é O TÍTULO, não a imagem. */ .heroi-arte img { width: 100%; max-width: 32.25rem; /* 516px: o teto do tamanho natural, repetido como trava */ aspect-ratio: 516 / 768; /* a dimensão natural do ativo, sem recorte por CSS */ } /* ⭐ 1.11.1 — O HERÓI GANHA O BOTÃO, E A LINHA DELE DESCE. Padrão `vitrine.heroi.com.chamada.e.botao` do Design System 1.11.1, nascido da ordem do fundador de 15/09 ~15h: «o botão e a chamada de entrar, no topo, (…) 'Feito por peladeiros, para peladeiros', esse CTA e o botão tem que ter já no inicio do site.» A copy é do conteúdo estratégico 1.3.0, bloco vitrine.01.heroi, e NENHUMA PALAVRA NOVA nasceu: o rótulo, o destino e a linha de benefício são cópia do fecho. A ORDEM DAS PEÇAS, de cima para baixo, e ela NÃO muda em largura nenhuma: 1 · TÍTULO ............ `t-display`, o que já estava lá 2 · LINHA DE APOIO .... a MESMA etiqueta, que DESCE (ver `.tag--apoio`, parte 2) 3 · BOTÃO «ENTRAR» .... o MESMO botão do fecho, família acesa 4 · LINHA DE BENEFÍCIO a MESMA frase do fecho, mesma forma ESPAÇAMENTO — só com a escala declarada em `content.tokens.spacing.scale` (`space.0` 0 · `space.gap.item` 0,6rem · `space.gap.bloco` 1rem · `space.gap.secao` 2rem), e a conta é ARITMÉTICA SOBRE VALORES DECLARADOS, nunca número solto: título → linha = `space.gap.item` ..... o gap do bloco, que cai de 1rem para 0,6rem linha → botão = `space.gap.bloco` .... o gap do bloco MAIS a diferença entre os dois valores, posta no próprio botão botão → linha de benefício ............ o gap do bloco (`space.gap.item`), herdado: o padrão não declara valor para ela, e herdar o do bloco é o que não inventa nada. ⚠️ A microcopia NÃO está na lista de três peças do padrão — ela vem do conteúdo estratégico 1.3.0, que a manda pendurada no botão. A forma aplicada é a MESMA que o fecho já declara para a mesma frase. Fica registrado para o dono do Design System. */ .heroi-texto { display: flex; flex-direction: column; gap: var(--gap-item); /* `space.gap.item` — título → linha */ padding-inline: var(--gap-bloco); position: relative; /* folha 4: o texto ... */ z-index: 1; /* ... na camada ACIMA da arte. Ordem de pintura declarada. */ } /* O botão é o do fecho, sem uma declaração de forma nova: as duas daqui são POSIÇÃO. `align-self` porque num bloco em coluna o filho esticaria de borda a borda, e o padrão manda o botão ALINHADO À ESQUERDA, com o título, nas duas larguras — ele é cópia do botão do fecho, e o do fecho não é de largura cheia. */ .heroi-botao { align-self: flex-start; margin-top: calc(var(--gap-bloco) - var(--gap-item)); /* completa `space.gap.bloco` */ } /* A linha de benefício é a MESMA do fecho, caractere a caractere. ⭐ 1.11.2 — A TINTA MUDA AQUI, E SÓ AQUI: de --tx-3 (`{color.roles.text_meta}`) para --tx-2. Não é gosto nem concessão: é a LEI DE PISO DO PRÓPRIO SISTEMA alcançando um lugar que antes não existia. O token --tx-2 é declarado como «apoio — piso sobre vidro, véu ou textura» (ver a parte 1), e a partir desta versão esta linha está SOBRE VÉU. É a correção que a conta de contraste revelou: quem decide a espessura do véu não é o título (ele sobreviveria a 25%), é A LINHA PEQUENA — a 80% de véu ela mede 8,79:1 e o título 11,98:1; sem véu nenhum o título mediria 1,82:1, que reprova até no piso de texto grande. ⚠️ A microcopia DO FECHO continua em --tx-3, porque continua sobre o chão liso (parte 7). CD-33 ratificada na posição e na forma, emendada na tinta. */ .heroi-microcopia { color: var(--tx-2); } @media (min-width: 900px) { .heroi { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); align-items: center; gap: var(--gap-secao); padding-block: calc(var(--gap-secao) * 2); /* o texto nasce alinhado com a coluna do resto da página; a arte segue até a borda da tela, que é a dobra do próprio mestre: arte numa metade, texto na metade calma */ padding-left: max(var(--gap-secao), calc((100% - var(--largura-pagina)) / 2 + var(--gap-secao))); } /* ⭐ 1.11.2 — A ARTE DEIXA DE SER UMA COLUNA DA GRADE e vira o FUNDO DO BLOCO: mesma linha do texto, camada de baixo, ancorada na BORDA DIREITA, largura no teto de 516px. A GRADE NÃO MUDA e a coluna 2 continua declarada e VAZIA — é ela que segura a coluna 1 no lugar, e o padrão é literal: «o texto não se move um pixel». As duas peças passam a ter lugar EXPLÍCITO porque, com a arte ocupando a linha inteira, a colocação automática jogaria o texto para uma segunda linha. SAÍRAM `order: 2` e `justify-content: flex-end`: quem escreve a intenção daquele layout agora é o `grid-area`, e a arte não é mais um contêiner que centra coisa nenhuma — ela É a caixa da foto. Sai também o `aspect-ratio: auto`: a proporção natural do ativo vale nas duas larguras, e é ela que reserva o espaço. A ALTURA continua sendo dada pela foto no tamanho natural, como antes. ⛔ O FATO DESCONFORTÁVEL, que o padrão diz ANTES da forma: no desktop a foto NÃO pode ficar atrás da escrita sem ser ampliada além do tamanho natural, e ampliar está proibido — borraria o retrato numa tela de 2×. A 1280 a coluna de texto e a foto se cruzam por poucos pixels; a 1440 não se tocam; a 1920 sobram ~105px de preto entre as duas. O desktop ganha o RESTO da ordem dele (a foto como fundo do bloco e a transferência mais funda), e o que falta depende de ATIVO — um recorte largo (≥1200px) do mesmo mestre —, não de CSS. Está em `open_questions` do Design System, sem bloquear: o que ele pediu, ele viu no celular. */ .heroi-texto { padding-inline: 0; grid-area: 1 / 1 / 2 / 2; /* a coluna 1 da mesma grade, no mesmo lugar */ } .heroi-arte { grid-area: 1 / 1 / 2 / -1; /* a linha inteira, por baixo: o fundo do bloco */ margin-top: 0; /* a sobreposição negativa é só abaixo de 900px */ } /* ⭐ O VÉU A PARTIR DE 900px — a mesma peça, outras paradas, agora em % da LARGURA da caixa da foto, gradiente HORIZONTAL: 0% → 14% ... --sf-0 CHEIO ....... a borda esquerda entra na página pelo preto 30% ........ --sf-0 a 55% ....... a travessia 50% ........ transparente ....... metade direita: a foto inteira Rosto a rosto: o mais distante (0 → 8,7%) SOME, que é o que a máscara de ontem já fazia; o segundo (14,5 → 27%) fica entre 99% e 63%, um fantasma; o terceiro (32 → 46,5%) emerge de 49% para 10%; o mais próximo (64 → 83%) fica LIMPO. É MAIS FUNDO que a máscara de ontem, que clareava de uma vez em 22% — e é isso que ele pediu ao dizer «quase como uma transferência». MAIS UMA PARADA, PEQUENA E NO TOPO: a foto entra na página por um CORTE RETO (o ativo só traz esmaecimento na base). Uma camada vertical de --sf-0 a 65% na borda de cima, zero em 12%, desmancha o corte. No celular ela é desnecessária — lá o topo da foto já está sob 100% de véu, porque é onde o texto está. A ordem das duas é indiferente à vista (mesma tinta: alfa sobre alfa dá o mesmo resultado nos dois sentidos); fica em cima a de topo, como no celular fica a fraca. */ @supports (background: color-mix(in srgb, #090D10 50%, transparent)) { .heroi-arte::after { background: /* camada de topo — desmancha o corte reto da borda de cima */ linear-gradient(180deg, color-mix(in srgb, var(--sf-0) 65%, transparent) 0%, transparent 12%), /* camada principal, horizontal — a transferência */ linear-gradient(90deg, var(--sf-0) 0%, var(--sf-0) 14%, color-mix(in srgb, var(--sf-0) 55%, transparent) 30%, transparent 50%); } } } /* ── 5 · MANIFESTO · blocos vitrine.02/03/04 ─────────────────────────────────────── */ /* Texto corrido, sem título inventado por cima, na ordem original e sem uma palavra cortada. A frase-síntese do fecho aparece em destaque DENTRO do texto — mesma medida de tipo, família de display e a tinta que decide —, nunca no lugar dele. */ .manifesto { display: flex; flex-direction: column; gap: var(--gap-bloco); padding-block: var(--gap-secao); max-width: 65ch; } .manifesto p { font-size: var(--t-sub); line-height: 1.5; color: var(--tx-2); } .manifesto .frase-sintese { font-family: var(--f-display); font-weight: 700; color: var(--tx-1); } @media (min-width: 900px) { .manifesto { padding-block: calc(var(--gap-secao) * 2); gap: var(--gap-secao); } } /* ── 6 · AS TRÊS PROMESSAS · bloco vitrine.05.promessas ──────────────────────────── */ /* O componente é o do produto, copiado: lista de promessas com selo de canto misto. ✅ O CONFLITO QUE ESTA FOLHA REGISTRAVA ESTÁ FECHADO — pelo sistema, não por aqui. Até 16/09 estava escrito neste lugar que a 1.9.0 mandava usar ícone de TRAÇO no selo e proibia o 3D dentro de vidro, enquanto a ordem do fundador mandava o 3D, e que a caixa declarada do ícone (3,5rem) era MAIOR que o selo inteiro (3,25rem) — os dois componentes não cabiam um dentro do outro. A versão 1.10.0 do Design System resolveu com peça, e não com retórica: nasceu o componente `selo.3d`, o tile SÓLIDO que segura o ativo raster dentro de uma pilha de vidro, e o selo da promessa passou a 4,5rem com o ícone em 3,875 × 3,5rem. Nada abaixo é medida desta folha: tudo é cópia do bloco `DS 1.10.0`, PARTE 9 (`.promessa--3d .promessa-selo`), mais o componente `selo.3d` (variante `promessa`) e o token `surface-1` do sistema. O modificador `--3d` não aparece aqui porque as três promessas da one page são todas 3D — não há a variante de traço nesta página. MEDIDAS, ANTES → DEPOIS: selo 3,25rem (52px) → 4,5rem (72px no passo A · 92px no A++) ícone 72% do selo (2,34rem · ~37px) → 3,875 × 3,5rem (62 × 56), object-fit contain fundo --interno-suave (vidro interno) → --sf-1 (SÓLIDO) aro 1,5px --aro-luz-cinza → 1px --ln brilho sheen interno + --halo-cinza → NENHUM (sem sheen, sem halo, sem desfoque) raio e canto misto: mantidos, --r-ctl. POR QUE 4,5rem: a 37px o ícone 3D vira mancha — a medição foi feita nesta página e é ela que o delta do sistema cita para justificar o número. 62px dentro de 72px deixa 5px de respiro de cada lado, e a caixa 62×56 é a que o sistema já declarava para o ativo raster (nenhum tamanho novo nasceu). POR QUE SÓLIDO E SEM BRILHO: o ícone 3D é raster com a luz GRAVADA nos pixels; sobre vidro ele vira a segunda folha da pilha, e halo em volta de um PNG que já brilha é a segunda fonte de luz. O tile é o apoio sólido que o sistema prescrevia desde a 1.3.0 e que só agora ganhou forma. A lei do material segue inteira: quem declara a exceção é o TILE, nunca a página atrás dele. 1× E 2× — refeito para a medida nova: a 62px o arquivo precisa ter 124px, e 158px no passo A++ (o selo vai a 92px e o ícone a ~79px). Os dois derivados de 256px passam com folga; o derivado de 128px do elenco NÃO passa, e por isso o HTML trocou aquele slot pelo mestre de 816×816 (`icone-3d-elenco-mestre.png`, mesmo desenho, mesma origem) — não existe derivado de 256 desse ícone. ARO — família neutra, não o volt que o componente usa no produto: o volt vale numa peça por tela, e nesta a peça é o botão Entrar. O orçamento de volt não muda; o verde que aparece dentro dos PNG é pixel do ativo do fundador, não tinta desta folha. */ /* ⭐ 1.2.0 — o respiro de BAIXO desta seção é ANULADO: é ele que separava as três promessas do fecho, e o fecho subiu para colar nelas. Ver a parte 7. */ .promessas { display: flex; flex-direction: column; padding-top: var(--gap-secao); padding-bottom: 0; /* `space.0` */ } .promessa { display: flex; align-items: flex-start; gap: var(--gap-bloco); padding: var(--gap-bloco) 0; border-top: 1px solid var(--ln); } .promessas > .promessa:first-child { border-top: none; padding-top: .25rem; } /* `selo.3d`, variante promessa — cópia da parte 9 do bloco DS 1.10.0. */ .promessa-selo { flex: none; width: 4.5rem; /* 72px — a medida do `selo.3d` variante promessa */ height: 4.5rem; padding: 0; display: grid; place-items: center; border-radius: var(--r-ctl); background: var(--sf-1); /* SÓLIDO: o chão do ativo raster */ border: 1px solid var(--ln); box-shadow: none; /* sem sheen, sem halo, sem desfoque */ overflow: hidden; } @supports (corner-shape: round bevel round bevel) { .promessa-selo { corner-shape: var(--canto-misto); } } /* A caixa do ativo é a que o sistema declara: 3,875 × 3,5rem (62 × 56). Nada de sombra nem brilho acrescentado — a luz já está gravada nos pixels do PNG. `contain` porque o sistema proíbe esticar: a fonte é quadrada (816×816) e a caixa resolve ENCOLHENDO. */ .promessa-selo img { width: 3.875rem; height: 3.5rem; object-fit: contain; display: block; } .promessa-corpo { flex: 1; min-width: 0; } .promessa-titulo { font-family: var(--f-display); font-weight: 700; font-size: var(--t-sub); letter-spacing: -.006em; line-height: 1.3; color: var(--tx-1); text-wrap: balance; } .promessa-corpo p { margin-top: .2rem; color: var(--tx-3); line-height: 1.45; } @media (min-width: 900px) { .promessas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-secao); padding-top: calc(var(--gap-secao) * 2); padding-bottom: 0; /* `space.0` — idem: quem separava do fecho */ } .promessa { flex-direction: column; border-top: none; padding: 0; } .promessas > .promessa:first-child { padding-top: 0; } } /* ── 7 · O FECHO E O BOTÃO · bloco vitrine.06.entrar ─────────────────────────────── */ /* ⭐ 1.3.0 — SUPERADA A FRASE QUE ABRIA ESTA PARTE («um botão na página inteira (…) a peça acesa da tela, e a única»), por ordem do fundador de 15/09 ~15h: os BOTÕES são DOIS — o do herói e este —, e o link do cabeçalho continua sendo LINK, não botão. O que os separa da repetição que ele mandou tirar do onboarding é que os dois nunca aparecem na MESMA tela: um abre a página, o outro a fecha. É por isso que a régua do Design System 1.11.1 é POR VIEWPORT e não por página — no máximo uma peça acesa em cada dobra —, e é ela que vale aqui (ver o cabeçalho desta folha). ESTE BLOCO NÃO MUDOU UMA LINHA: as três peças, a copy e as medidas são as mesmas de antes. ⭐ 1.2.0 — O FECHO SOBE E COLA NAS TRÊS PROMESSAS. Ordem do fundador de 15/09, depois de ver a página no ar: «Deixe um pouco mais alto e mais próxima a parte do site.» O conteúdo, a ordem e a copy dos dois blocos não mudaram uma palavra — o que diminuiu foi o espaço. A MEDIDA, E DE ONDE ELA SAI. O Design System 1.11.0 declara a FORMA do bloco final compacto do site como trabalho desta folha e NÃO publica um número para ela. O que ele publica é o MECANISMO de colar dois blocos (bloco `DS 1.11.0`, parte 11, a gaveta do nome da pelada): colar é a «anulação declarada de um valor declarado» — apaga-se o respiro que estava ali, não se inventa um respiro novo. E publica a escala de espaço, em `content.tokens.spacing.scale`: `space.0` 0rem · `space.gap.item` 0,6rem · `space.gap.bloco` 1rem · `space.gap.secao` 2rem. O que esta folha fez, com esse mecanismo e só com valores dessa escala: · o respiro de baixo das promessas vai a `space.0` (parte 6); · o respiro de cima do fecho vai a `space.0` no celular e a `space.gap.bloco` a partir de 900px — onde `.promessa` não tem preenchimento próprio e sem ele os dois blocos encostariam. RESULTADO, do último texto da promessa até a linha do fecho, nas duas larguras: celular ....... 5rem (80px) → 1rem (16px) · 1rem vem do próprio `.promessa` ≥900px ....... 8rem (128px) → 1rem (16px) · 1rem é o `--gap-bloco` daqui A mesma medida nas duas: `--gap-bloco`. E ela é MENOR que o respiro entre os parágrafos do Manifesto a partir de 900px (2rem), que é o teste que o conteúdo estratégico do site escreveu. ⚠️ No celular ela EMPATA com esse respiro (1rem) em vez de ficar menor: descer abaixo disso exigiria mexer no preenchimento do próprio item da lista de promessas, que é espaço INTERNO do bloco 5 e está fora das duas mudanças autorizadas. Fica declarado, não consertado de passagem. ⛔ NADA ENTRA ENTRE OS DOIS: nenhuma faixa, nenhuma linha divisória, nenhum assunto novo. O respiro de BAIXO do fecho não foi tocado — a distância até o rodapé é a mesma de antes. */ .entrar { display: flex; flex-direction: column; align-items: center; gap: var(--gap-bloco); padding-top: 0; /* `space.0` — o fecho perde o respiro próprio */ padding-bottom: var(--gap-secao); text-align: center; } .entrar-linha { font-family: var(--f-display); font-weight: 700; font-size: var(--t-titulo); letter-spacing: -.012em; line-height: 1.25; color: var(--tx-1); text-wrap: balance; max-width: 28ch; } .btn { font-family: var(--f-display); font-weight: 700; font-size: 1rem; letter-spacing: .02em; min-height: var(--touch-min); padding: .6rem 1.25rem; border-radius: var(--r-btn); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; } @supports (corner-shape: bevel) { .btn { corner-shape: bevel; } } .btn--primario { background: var(--aceso-fundo); border: 1.5px solid var(--aceso-aro); box-shadow: var(--aceso-sombra); color: var(--on-ac); text-transform: uppercase; padding-inline: var(--gap-secao); } .btn--primario:hover { filter: brightness(1.06); } .entrar-microcopia { color: var(--tx-3); } @media (prefers-reduced-motion: no-preference) { .btn { transition: box-shadow var(--dur-fast) var(--ease-standard), filter var(--dur-fast) var(--ease-standard), transform 160ms var(--ease-standard); } .btn:active { transform: scale(.98); } } @media (min-width: 900px) { .entrar { padding-top: var(--gap-bloco); /* `space.gap.bloco` */ padding-bottom: calc(var(--gap-secao) * 2); } } /* ── 8 · RODAPÉ · bloco vitrine.07.rodape ────────────────────────────────────────── */ /* Sem link nenhum: as rotas de termos e privacidade só nascem depois, e link morto é defeito. O endereço do domínio entra como texto, não como ligação. */ .rodape { border-top: 1px solid var(--ln); padding-block: var(--gap-secao); display: flex; flex-direction: column; gap: var(--gap-bloco); } .rodape-aviso { color: var(--tx-3); max-width: 64ch; } .rodape-marca { font-family: var(--f-display); font-weight: 700; letter-spacing: .02em; color: var(--tx-2); } .rodape-dominio { font-family: var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-4); }