/* ============================================================================ IDENTIDADE TPDPLAY - tokens (fonte da verdade) Decidida em 21/08/2026. Publico 45+ com dificuldade visual: os minimos de tamanho e contraste NAO sao sugestao, sao requisito. As fontes sao SELF-HOSTED: `fontes.css` + a pasta `fontes/` (410 KB, 14 arquivos woff2, latin + latin-ext). ZERO requisicao externa - a mesma regra que provou as 12 LPs na saida do RD Station. Para refazer os arquivos: `cd fontes && python _baixar.py`. Licenca: as duas sao SIL Open Font License 1.1, uso comercial liberado. ========================================================================= */ @import url("./fontes.css"); :root { /* ---- FONTES -------------------------------------------------------- */ --f-impacto: "Baloo 2", system-ui, sans-serif; /* titulo, hero, abertura de secao */ --f-texto: "M PLUS Rounded 1c", system-ui, sans-serif; /* corpo, rotulo, botao, UI */ /* ---- COR: fundo e tinta -------------------------------------------- */ --fundo: #05121C; /* fundo escuro da marca */ --fundo-carta: #0A1B27; /* card/bloco elevado sobre o fundo */ --tinta: #FFFFFF; /* titulo 18,92:1 AAA */ --texto: #C7DEEC; /* corpo - USE ESTA 13,60:1 AAA */ --texto-2: #9FC4DA; /* corpo secundario 10,26:1 AAA */ --apagado: #6E93A9; /* o que o plano NAO tem 5,35:1 AA */ --secundario: #7FA8C0; /* rotulo - PISO do texto 7,45:1 AAA */ /* ---- COR: marca ----------------------------------------------------- */ --ciano: #2CC4FF; /* 9,41:1 pode ser texto */ --azul: #008AD4; /* 5,03:1 so texto GRANDE ou fundo */ --violeta: #6B43EF; /* 3,31:1 NUNCA texto - so decoracao */ --roxo-texto: #A277F9;/* 5,90:1 o UNICO roxo que aguenta texto grande */ --exocad: #473A6D; /* 1,89:1 NUNCA texto - roxo Exocad medido */ /* ---- DEGRADES: sao DOIS, e nao se trocam --------------------------- */ /* assinatura da marca: azul TPDPlay -> roxo Exocad. NUNCA ponha texto por cima: o contraste morre no fim roxo (1,88:1). */ --grad-marca: linear-gradient(100deg, #2CC4FF 0%, #008AD4 42%, #6B43EF 78%, #473A6D 100%); /* o unico que aguenta texto por cima (9,37:1 -> 5,01:1 com tinta escura) */ --grad-legivel: linear-gradient(90deg, #2CC4FF 0%, #008AD4 100%); --tinta-sobre-grad: #04131C; /* a cor do texto em cima do --grad-legivel */ /* o DESTAQUE (3o degrade): azul claro -> roxo. E o unico com roxo que pode carregar texto - porque PARA no #A277F9 (5,90:1) e nao chega no violeta da marca (3,31:1) nem no Exocad (1,89:1). A imagem tem o DOBRO da largura: metade cor, metade BRANCO. A metade branca nao e enfeite - e ela que faz a palavra 'carregar' (efeitos.css) e e ela que garante o fail-safe: sem JS a palavra fica branca e legivel, nunca invisivel. */ /* o NUMERO grande (preco, cifra): degrade VERTICAL - azul BEM claro em cima, roxo embaixo (HB, 21/08). Da volume sem virar arco-iris. O pior ponto e a base roxa: #A277F9 = 5,46:1 sobre o cartao - passa como texto grande (>=24px) com folga. Nao descer do #A277F9: o violeta da marca daria 3,06:1 e o numero e a informacao que a pessoa veio ler. Este e o degrade do NUMERO; o horizontal (--grad-destaque) e o da PALAVRA destacada. Mesmo par de cores, sentidos diferentes. */ --grad-numero: linear-gradient(180deg, #D3F1FF 0%, #6EC5FF 44%, #A277F9 100%); --grad-destaque: linear-gradient(96deg, #2CC4FF 0%, #A277F9 50%, #FFFFFF 52%, #FFFFFF 100%); /* ---- ESCALA TIPOGRAFICA ----------------------------------------------- REVISADA EM 21/08 (HB: 'esta demais... tem que ser um meio termo'). A regra do publico 45+ continua valendo - o que mudou e a leitura de que ela estava sendo cumprida do jeito errado: TUDO grande. MEDIDO no mesmo 4K, antes de mexer: referencia (accelera360) .. h2 56px | corpo 14px | lh 1,60 nos ....................... h2 44px | corpo 20px | lh 1,65 Nosso titulo era 2,2x o corpo; o deles, 4,0x. O problema nao era tamanho, era HIERARQUIA ACHATADA - e pagina achatada le como tosca, por mais legivel que cada linha seja. A cura desce o corpo (20->18), o rotulo (15->14), a entrelinha (1,65->1,60) e o ritmo (120->104), e NAO mexe nos titulos. A razao sobe pra 2,4x sem nada crescer na tela. Continuamos 28% acima da referencia no corpo (18 contra 14) - isso e o 45+, e nao se negocia pra baixo dos 16px. */ --t-h1: 64px; --t-h1-mob: 36px; --t-h2: 44px; --t-h2-mob: 28px; --t-h3: 28px; --t-h3-mob: 23px; --t-corpo-g: 20px; /* subtitulo do hero */ --t-corpo: 18px; /* PISO do corpo. Nunca abaixo de 16px. */ --t-rotulo: 14px; /* PISO do rotulo. Nunca 12-13px. */ --lh-titulo: 1.1; --lh-corpo: 1.60; --tr-titulo: -0.02em; /* apertado so no titulo */ --tr-corpo: 0; /* no corpo, tracking negativo PIORA a leitura */ --linha-max: 60ch; /* largura maxima de linha */ /* ---- FORMA ---------------------------------------------------------- */ --raio: 12px; --raio-pill: 999px; --alvo-min: 48px; /* altura minima de qualquer alvo de clique */ /* ---- ESPACO: escala de 8, sem valor solto no meio ------------------- */ --e1: 8px; --e2: 16px; --e3: 24px; --e4: 32px; --e5: 48px; --e6: 64px; --e7: 96px; --e8: 128px; /* ---- DISPOSICAO ------------------------------------------------------ */ --largura: 1160px; /* trilho principal da pagina */ --largura-texto: 60ch; /* coluna de leitura - o teto dos 45+ */ --margem-lat: 40px; /* respiro lateral no desktop */ --margem-lat-mob: 24px; --ritmo: 104px; /* padding vertical de secao (desktop) */ --ritmo-mob: 72px; } /* ---- O TRILHO -------------------------------------------------------- */ .trilho { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem-lat); } .secao { padding-block: var(--ritmo); } /* coluna de leitura centralizada: texto NUNCA usa a largura toda do trilho */ .leitura { max-width: var(--largura-texto); } .leitura.centro { margin-inline: auto; } /* ---- BASE ------------------------------------------------------------ */ body { background: var(--fundo); color: var(--texto); font-family: var(--f-texto); font-size: var(--t-corpo); line-height: var(--lh-corpo); letter-spacing: var(--tr-corpo); -webkit-font-smoothing: antialiased; } h1, h2, h3, .impacto { font-family: var(--f-impacto); font-weight: 600; /* 600 e o teto: 800 na Baloo 2 vira infantil */ color: var(--tinta); line-height: var(--lh-titulo); letter-spacing: var(--tr-titulo); } h1 { font-size: var(--t-h1); max-width: 17ch; } h2 { font-size: var(--t-h2); max-width: 20ch; } h3 { font-size: var(--t-h3); } p { max-width: var(--linha-max); } .rotulo { font-size: var(--t-rotulo); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secundario); } /* ---- CTA: usa o degrade LEGIVEL, nunca o de marca -------------------- */ .cta { display: inline-flex; align-items: center; justify-content: center; min-height: var(--alvo-min); padding: 18px 34px; border: 0; border-radius: var(--raio); background: var(--grad-legivel); color: var(--tinta-sobre-grad); font-family: var(--f-texto); font-size: 18px; font-weight: 700; cursor: pointer; } /* ---- OS TRES TRUQUES DE GRAFIA --------------------------------------- */ /* 1. gradiente-no-texto: so em titulo >= 40px, e com cor solida de reserva. Se o background-clip falhar, o texto SOME - por isso a cor vem antes. */ .grad-texto { color: var(--ciano); background: var(--grad-legivel); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* 2. tarja (marca-texto): so em texto >= 32px peso 600+. Branco sobre ela da 3,76:1 a 5,72:1 = passa como TEXTO GRANDE (3:1), reprova como texto normal. Nao use em corpo. ARMADILHA PROVADA (21/08): a 1a versao media a barra em % da CAIXA DE LINHA. Porcentagem de line-height nao sabe onde esta a ascendente da letra: sobrou 1,9px de folga em cima do "d" e 1,6px embaixo do "p" - a 56px isso e zero, e le como letra CORTADA. Pior: a folga mudava sozinha se alguem mexesse no line-height. Agora e ancorado na TINTA da fonte, medida no canvas (por 1em): ascendente do "d" ....... 0,66em acento do "o" (o teto) .. 0,72em descendente do "p" ...... 0,19em A barra vai de 0,80em acima da base a 0,26em abaixo: folga real dos dois lados, em em - escala junto com o corpo e nao depende da linha. */ .tarja { position: relative; display: inline-block; z-index: 1; color: var(--tinta); line-height: 1; /* torna a caixa deterministica: 1em cheio */ /* a margem tem que ser MAIOR que o avanco da barra (.10em), senao a barra invade a palavra vizinha. .18em - .10em = .08em de folga visual real. */ margin-inline: .18em; padding-inline: .04em; } .tarja::after { content: ""; position: absolute; z-index: -1; top: -.02em; bottom: -.04em; left: -.10em; right: -.10em; border-radius: .06em; background: linear-gradient(90deg, rgba(0,138,212,.95), rgba(107,67,239,.85)); } /* 3. ponto final de marca - o ponto em ciano (9,41:1 sobre o fundo). ARMADILHA PROVADA (21/08): DENTRO da tarja o ciano REPROVA - 2,02:1 sobre o inicio azul da barra (medido; o violeta do fim daria 3,48). A barra e clara demais pra sustentar o ciano. E a cura nao e achar um ciano mais claro: dentro da tarja a ASSINATURA JA E A BARRA. Pintar o ponto ali e decoracao redundante que custa legibilidade - e a regra da casa diz que nesse caso o efeito cai. Fora da tarja: ciano. Dentro: branco (4,07:1 no pior ponto). E o ponto vai DENTRO do , nunca depois dele: solto la fora ele fica boiando ao lado do solido. */ .ponto { color: var(--ciano); } .tarja .ponto { color: var(--tinta); } /* 4. destaque no titulo - a PALAVRA que carrega, do azul claro ao roxo. E o padrao de enfase da casa: uma palavra por titulo, e um titulo destacado por secao. Duas palavras acesas na mesma tela deixam de destacar - viram enfeite. POR QUE NAO O ROXO DA MARCA: o #6B43EF da 3,31:1 e o Exocad 1,89:1. Bonito e ilegivel pro publico 45+. O degrade para no #A277F9, que mede 5,90:1 - passa como TEXTO GRANDE (limiar 4,5:1 do AAA) com folga, inclusive no H2 de 28px do celular. Abaixo de 24px, nao use. A cor solida vem declarada ANTES do clip, como no .grad-texto: se o background-clip falhar, a palavra fica roxa - nao some. */ /* 1b. o mesmo truque, na vertical, para NUMERO GRANDE (>= 40px). A RESERVA E O ROXO, NAO O CIANO - e isso importa duas vezes: 1) se o background-clip falhar, o numero aparece na cor da BASE do degrade, que e como ele terminava de qualquer jeito; 2) a auditoria de contraste le a cor DECLARADA como se fosse a tinta. Declarando o ciano (o topo, 8,71:1) ela media o MELHOR ponto e dizia 8,70:1 - com o pior ponto real em 5,46:1, escondido. A regra que fica: a cor de reserva de um texto com degrade e sempre a ponta MAIS ESCURA. Assim o instrumento erra pro lado seguro. */ .grad-numero { color: var(--roxo-texto); background-image: var(--grad-numero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .destaque { color: var(--roxo-texto); background-image: var(--grad-destaque); background-size: 200% 100%; background-position: 0 0; /* parado = ja colorido (sem JS) */ background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ---- MOBILE ---------------------------------------------------------- */ @media (max-width: 760px) { :root { --t-h1: var(--t-h1-mob); --t-h2: var(--t-h2-mob); --t-h3: var(--t-h3-mob); --margem-lat: var(--margem-lat-mob); --ritmo: var(--ritmo-mob); } h1, h2 { max-width: 100%; } body { font-size: var(--t-corpo); } /* NAO encolher o corpo no celular */ }