/* ========================================================================== 01 — TOKENS Fonte única de verdade do visual. Nada de cor/gradiente solto nos outros arquivos: se precisar de um valor novo, ele nasce aqui primeiro. ========================================================================== */ :root{ /* --- superfícies (do mais escuro ao mais claro) --- */ --black:#010102; --obsidian:#060607; --panel:#0c0c10; /* --- ouro: autoridade, prêmio, o "reinado" --- */ --gold-deep:#8a6b1f; --gold:#d4af37; --gold-hi:#f7e7a6; --gold-spark:#fff6d8; /* --- prata: tecnologia, dado, contraponto frio ao ouro --- */ --silver-deep:#8a8a92; --silver:#c7c9d1; --silver-hi:#edeff4; /* --- texto --- */ --ink:#ececef; --muted:#9a9aa4; /* --- traço --- */ --line:rgba(212,175,55,.14); /* ========================================================================== SUPERFÍCIE E ELEVAÇÃO Eram dez gradientes escritos à mão, quase iguais e nunca iguais: três ângulos diferentes (150, 160 e 165 graus) e cinco opacidades para o que no fim eram duas famílias de superfície. A diferença não era decisão, era deriva, e deriva numa página escura aparece: dois painéis lado a lado com 0,7 e 0,72 de opacidade leem como um erro de recorte. Duas famílias, duas intensidades cada. A NEUTRA é cinza-azulada e serve a componente de interface: card, acordeão, painel de avaliação. A QUENTE tem ouro dissolvido na mistura e serve a bloco de fala: citação, destaque, chamada. A diferença entre elas é pequena de propósito, e é justamente ela que faz uma citação parecer um pedaço de conversa e um card parecer um pedaço de sistema. ========================================================================== */ --sup:linear-gradient(165deg,rgba(20,20,24,.7),rgba(8,8,10,.35)); --sup-forte:linear-gradient(165deg,rgba(24,24,29,.92),rgba(10,10,13,.8)); --sup-quente:linear-gradient(150deg,rgba(24,22,16,.7),rgba(8,8,10,.4)); --sup-quente-forte:linear-gradient(150deg,rgba(24,22,16,.9),rgba(8,8,10,.85)); /* Fio de luz na aresta de cima. É o detalhe que mais separa superfície escura cara de superfície escura barata, e custa uma linha. Numa página preta, a borda de 1px sozinha desenha o contorno de uma caixa; um fio claro na aresta superior diz de onde vem a luz, e a peça passa a ter face em vez de contorno. O valor é baixo de propósito: acima de 0,08 vira risco branco e denuncia o truque. Vem antes das sombras na lista de box-shadow porque inset e outer convivem, e a ordem só importa para a leitura de quem mexer depois. */ --luz-aresta:inset 0 1px 0 rgba(255,255,255,.055); /* --- elevação --- Sombra preta sobre fundo #010102 quase não existe: o que dá profundidade aqui não é escurecer o que está atrás, é a diferença entre a face clara da peça e o preto. Por isso cada degrau combina sombra E fio de luz, e nunca é usado um sem o outro. */ --elev-1:0 2px 10px rgba(0,0,0,.45), var(--luz-aresta); --elev-2:0 20px 48px rgba(0,0,0,.55), var(--luz-aresta); --elev-3:0 34px 80px rgba(0,0,0,.66), var(--luz-aresta); /* --- halo do botão --- O elemento mais brilhante da página, de propósito: é onde a pessoa deve clicar. Duas sombras douradas empilhadas, uma larga e difusa que faz o halo e uma curta e fechada que apoia o botão na luz em vez de deixá-lo flutuando, mais o brilho interno que dá o relevo do metal. */ --halo-ouro:0 10px 36px rgba(212,175,55,.3), 0 2px 12px rgba(212,175,55,.24), inset 0 1px 0 rgba(255,255,255,.45); --halo-ouro-forte:0 16px 52px rgba(212,175,55,.5), 0 3px 16px rgba(212,175,55,.34), inset 0 1px 0 rgba(255,255,255,.5); /* --- gradientes metálicos --- São dois, e a diferença é só onde a rampa começa. O de superfície pinta botão, fio e moldura: ali o degradê cobre uma área inteira, e começar no bronze escuro é o que dá o relevo de metal. O de texto pinta letra recortada. Ali o começo escuro caía na primeira letra da palavra, e #8a6b1f sobre preto some: no título do FAQ o "F" de Frequentes ficava quase invisível e a palavra parecia colada na anterior. A rampa de texto entra já em ouro legível e continua subindo, então mantém o brilho metálico sem perder a primeira letra. */ --gold-grad:linear-gradient(135deg,#8a6b1f 0%,#d4af37 32%,#f7e7a6 60%,#fff6d8 100%); --gold-grad-texto:linear-gradient(135deg,#c8a233 0%,#e0c254 28%,#f7e7a6 64%,#fff6d8 100%); --silver-grad:linear-gradient(135deg,#7f8189 0%,#c7c9d1 45%,#edeff4 100%); /* ========================================================================== TIPOGRAFIA Três famílias, cada uma com um trabalho. Display (Clash Display) só em título grande e número de manchete. Tem contraste de traço e remate seco: é o que dá o ar editorial. Não serve para corpo, e em tamanho pequeno perde a graça e ganha ruído. UI (Sora) em botão, etiqueta, rótulo e número pequeno. Geométrica e uniforme, que é exatamente o que se quer num elemento de interface: ele não pode ter opinião. Corpo (Inter) em texto corrido. Foi desenhada para isso. ========================================================================== */ --ff-display:'Clash Display','Sora',sans-serif; --ff-ui:'Sora',system-ui,sans-serif; --ff-corpo:'Inter',system-ui,sans-serif; /* --- escala tipográfica fluida --------------------------------------- Onze degraus, e nenhum tamanho de texto no site pode estar fora deles. Cada degrau vai de um piso em 390px de tela a um teto em 1440px, pela mesma reta. Isso é o que faz a escala ser um sistema e não uma coleção: todos os degraus crescem no mesmo compasso, então a relação entre título e corpo é a mesma no celular e no desktop. A fórmula, para quem for acrescentar um degrau: inclinacao = (teto - piso) / (1440 - 390) vw = inclinacao * 100 base = piso - inclinacao * 390 clamp(piso, base + vw, teto) Em rem, não em px, para respeitar quem aumentou o corpo do texto no navegador. A base é 16px. O salto entre --fs-d1 e --fs-corpo é de 5,3x. Título de página não é "texto maior": é outra categoria de coisa, e a distância precisa ser grande o bastante para a pessoa ver isso antes de ler. */ --fs-mega:clamp(2.875rem, 1.157rem + 7.048vw, 7.5rem); /* 46 -> 120 */ /* O teto de --fs-d1 é 76 e não 88 porque a manchete da home divide a primeira dobra com a marca: medido no navegador, a linha mais longa ("É sobre fazer sua") pede 658px em 76px e 762px em 88px, e 762 não sobra largura para a logo existir ao lado. 88px só caberia numa manchete de largura inteira, que não é o caso aqui. --fs-mega continua em 120 porque quem o usa é a assinatura da marca, que tem a linha inteira para si. */ --fs-d1:clamp(2.25rem, 1.321rem + 3.81vw, 4.75rem); /* 36 -> 76 */ --fs-d2:clamp(1.9375rem, 1.171rem + 3.143vw, 4rem); /* 31 -> 64 */ --fs-d3:clamp(1.6875rem, 1.154rem + 2.19vw, 3.125rem); /* 27 -> 50 */ --fs-d4:clamp(1.5rem, 1.175rem + 1.333vw, 2.375rem); /* 24 -> 38 */ --fs-num:clamp(2.125rem, 1.614rem + 2.095vw, 3.5rem); /* 34 -> 56 */ --fs-titulo:clamp(1.3125rem, 1.15rem + 0.667vw, 1.75rem); /* 21 -> 28 */ --fs-lead:clamp(1.03125rem, 0.927rem + 0.429vw, 1.3125rem); /* 16.5 -> 21 */ --fs-corpo-g:clamp(1rem, 0.954rem + 0.19vw, 1.125rem); /* 16 -> 18 */ --fs-corpo:clamp(0.96875rem, 0.946rem + 0.095vw, 1.03125rem);/* 15.5 -> 16.5 */ --fs-corpo-p:clamp(0.875rem, 0.863rem + 0.048vw, 0.90625rem);/* 14 -> 14.5 */ --fs-etiqueta:clamp(0.71875rem, 0.696rem + 0.095vw, 0.78125rem);/* 11.5 -> 12.5 */ /* --- entrelinha --- Display aperta porque letra grande já ocupa a linha; corpo abre porque o olho precisa achar o começo da linha seguinte. */ --lh-display:0.96; --lh-titulo:1.14; --lh-corpo:1.62; /* --- entreletras --- Negativo cresce com o tamanho: o que em 76px é aperto correto, em 16px é texto espremido. */ --ls-mega:-.045em; --ls-display:-.035em; --ls-titulo:-.02em; --ls-etiqueta:.14em; /* --- espaço entre palavras na fonte display --- A Clash Display entrega um espaço de palavra curto de fábrica, e o entreletras negativo aperta o mesmo espaço de novo. Em título isso já colava palavra com palavra; em parágrafo de frase de efeito, que é texto corrido, cola ainda mais rápido, porque há muito mais espaços por linha. Este token devolve o que o entreletras tirou. Quem usa --ff-display usa este junto: a regra que aplica os dois está em 02-base.css. */ --ws-display:.08em; /* ========================================================================== ESPAÇO Grade de 4px. Todo espaço estrutural do site sai destes degraus, pela mesma razão que o tamanho de texto sai da escala: espaço escolhido item a item vira ritmo acidental, e ritmo acidental é o que faz uma página parecer montada em vez de desenhada. A progressão não é linear: dobra a partir do --e-4. Espaço pequeno precisa de degraus finos, porque a diferença entre 8 e 12px é visível; espaço grande precisa de degraus largos, porque a diferença entre 96 e 104px não é. Micro-ajuste dentro de um componente (o vão de 5px entre um número e o rótulo dele, por exemplo) pode continuar em px cru: ele não participa do ritmo da página, é acabamento interno de uma peça. ========================================================================== */ --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px; --e-10:128px; /* --- respiro vertical de seção --------------------------------------- Três compassos, não um. A página inteira estava em um único padding. Dez seções com a mesma distância entre si dão à leitura um andamento de metrônomo: nada se agrupa, nada se separa, e o vazio deixa de significar qualquer coisa. Com três compassos o espaço volta a ser argumento. Seção que continua o assunto da anterior encosta nela; seção que abre assunto novo se afasta; e o fecho, que é o clímax, recebe o maior vazio da página, porque é ali que a pessoa decide. Em vw para crescer com a tela: o que respira num notebook sufoca num monitor de 27 polegadas. CALIBRADO DEPOIS DE VER NO AR. A primeira versão levava o respiro a 140px no padrão e 200px na virada, o que dava 340px de preto entre uma seção e outra num monitor largo, e 206px no celular: quase um quarto de uma tela de 844px sem nada. Passou do ponto. Espaço em branco é luxo até virar buraco, e buraco não lê como respiro, lê como alguma coisa que não carregou. Os três compassos continuam distintos, que é o que importa. O que mudou foi a amplitude. Mesma fórmula da escala tipográfica, de 390px a 1440px de tela: inclinacao = (teto - piso) / (1440 - 390) clamp(piso, (piso - inclinacao*390) + (inclinacao*100)vw, teto) */ --sec-y:clamp(52px, 40.11px + 3.048vw, 84px); /* 52 -> 84, padrão */ --sec-y-perto:clamp(32px, 24.57px + 1.905vw, 52px); /* 32 -> 52, continua */ --sec-y-longe:clamp(68px, 53.14px + 3.81vw, 108px); /* 68 -> 108, vira */ /* --- layout --- */ --maxw:1180px; /* Medida estreita para seção de texto corrido centralizado. Uma coluna de 1180px no fecho da página dava linhas de 90 caracteres no centro da tela, que é o dobro do que o olho acompanha sem se perder no retorno. */ --maxw-estreito:920px; /* Respiro lateral. Token porque a barra fixa precisa do mesmo valor para a logo alinhar com a primeira letra do conteúdo: quando os dois eram escritos à parte, bastava mexer em um para a barra sair do eixo. */ --gutter:28px; /* --- raios --- */ --r-sm:12px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-pill:100px; /* --- camadas (z-index centralizado evita guerra de números mágicos) --- */ --z-bg:0; /* canvas three.js + aura */ --z-fx:1; /* grain + vignette */ --z-content:2; /* todo o conteúdo */ --z-nav:40; /* barra fixa */ --z-burger:50; /* acima do menu mobile aberto */ --z-modal:120; /* lupa do painel de resultado, acima de tudo */ }