/* ═══════════════════════════════════════════════════════════════════════════ COMPILA · CINEMA — a linguagem visual --------------------------------------------------------------------------- Esta folha carrega DEPOIS de todas as outras e reescreve a superfície do site inteiro. Nada de estrutura muda: os mesmos ids, as mesmas classes, o mesmo JavaScript funcional. O que muda é como tudo isso se parece. A régua veio de medir um site real, token por token: canvas quase preto, texto em branco QUENTE (nunca #fff), display em serifa de peso normal com entrelinha MENOR que o corpo da letra, e um sobrescrito minúsculo de rastreio larguíssimo. Quase todo o "caro" mora nesses quatro detalhes, e nenhum deles custa um quadro sequer. ═════════════════════════════════════════════════════════════════════════ */ :root{ /* ── TINTA ────────────────────────────────────────────────────────────── Dois pretos, nunca #000. O site alterna entre eles de seção em seção: é um ritmo que o olho sente e não percebe. */ --c-tinta: #06090f; --c-tinta-2: #0a0e17; --c-tinta-3: #0e1420; /* ── PAPEL ────────────────────────────────────────────────────────────── Branco quente. Branco puro sobre preto puro vibra e cansa; um branco levemente amarelado pousa. É o detalhe que mais separa um site caro de um site comum, e é de graça. */ --c-papel: #f2efe8; --c-papel-2: rgba(242,239,232,.66); --c-papel-3: rgba(242,239,232,.40); /* ── ACENTO ───────────────────────────────────────────────────────────── O âmbar do Compila, em duas doses: a apagada para rótulo, a acesa só para chamada. Acento que está em tudo não é acento. */ --c-ouro: #d9a441; --c-ouro-viv: #ffc93c; --c-ceu: #6fa8d8; /* a voz técnica: HUD, números, código */ /* ── LINHA ────────────────────────────────────────────────────────────── Um pixel, quase invisível. Dado se separa com linha, nunca com caixa. */ --c-linha: rgba(242,239,232,.13); --c-linha-2: rgba(242,239,232,.07); /* ── LETRA ────────────────────────────────────────────────────────────── Serifa narra, mono cronometra, sans explica. A tensão entre a serifa (humano aprendendo) e a mono (máquina obedecendo) É a história do Compila — por isso as duas convivem em vez de uma vencer. */ --f-display: 'Instrument Serif', 'Times New Roman', serif; --f-corpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; --pad: clamp(1.25rem, 4vw, 4rem); --ease: cubic-bezier(.22, 1, .36, 1); /* ── os tokens antigos, reapontados ───────────────────────────────────── O site inteiro pede --font-display e --font-body em dezenas de lugares. Em vez de caçar cada um, as próprias variáveis passam a apontar para as famílias novas: um elemento esquecido herda a tipografia certa em vez de cair na serifa do sistema porque a Space Grotesk não é mais baixada. As de pixel viram mono, que é o que rótulo sempre deveria ter sido. */ --font-display: 'Instrument Serif', 'Times New Roman', serif !important; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; --font-mono: 'JetBrains Mono', ui-monospace, monospace !important; --font-pixel: 'JetBrains Mono', ui-monospace, monospace !important; --font-pixel-heading: 'JetBrains Mono', ui-monospace, monospace !important; /* e as cores antigas, para o que ainda as usa diretamente */ --bg-dark: #06090f !important; --bg-surface: #0a0e17 !important; --bg-surface-elevated: #0e1420 !important; --text-white: #f2efe8 !important; --text-main: rgba(242,239,232,.86) !important; --text-muted: rgba(242,239,232,.66) !important; --text-dim: rgba(242,239,232,.40) !important; --border-subtle: rgba(242,239,232,.07) !important; --border-medium: rgba(242,239,232,.13) !important; --amber: #d9a441 !important; --radius-sm: 0 !important; --radius-md: 0 !important; --radius-lg: 0 !important; --radius-full: 0 !important; /* o degradê de chamada vira cor chapada: gradiente em botão pequeno é ruído, e este aqui flutua sobre uma cena escura */ --cta: #f2efe8 !important; } /* ═════════════════════════════════════════════════════════════════════════ TIPOGRAFIA — as quatro medidas que fazem o trabalho ═════════════════════════════════════════════════════════════════════════ */ /* O display. Peso 400, porque serifa de display não precisa de negrito: o tamanho já é a ênfase. Entrelinha 0.98 — MENOR que o corpo da letra, que é o que faz duas linhas parecerem um bloco só. Rastreio negativo fecha o espaço que o tamanho grande abre sozinho. */ .cx-display{ font-family: var(--f-display); font-weight: 400; font-style: normal; line-height: .98; letter-spacing: -.02em; font-size: clamp(2.6rem, 6.4vw, 6rem); color: var(--c-papel); text-wrap: balance; margin: 0; } .cx-display--lg{ font-size: clamp(3rem, 8vw, 7.5rem) } .cx-display--sm{ font-size: clamp(2rem, 4.4vw, 3.4rem) } .cx-display em{ font-style: italic; color: var(--c-ouro) } /* O sobrescrito. Onze pixels e rastreio de 0.28em: ele não se lê, ele se reconhece. É o rótulo de um instrumento, não uma frase. */ .cx-selo{ display: block; font-family: var(--f-mono); font-size: .7rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--c-ouro); margin: 0 0 1.4rem; } /* Num capítulo centralizado o lede precisa de margem dos DOIS lados, senão ele encosta na esquerda enquanto o título está no meio. */ .cx-lede--centro{ margin-left: auto; margin-right: auto; text-align: center } /* O lede: uma frase, nunca um parágrafo. */ .cx-lede{ font-family: var(--f-corpo); font-size: clamp(.98rem, 1.25vw, 1.12rem); line-height: 1.65; font-weight: 300; color: var(--c-papel-2); max-width: 46ch; margin: 1.6rem 0 0; } /* ── a máscara de linha ─────────────────────────────────────────────────── O display entra linha por linha, subindo de dentro de uma fenda. O par padding/margem negativa existe para o rabo do g, do y e do p caber dentro da máscara: sem isso o navegador corta os descendentes e o texto fica com cara de erro. */ .cx-linha-mask{ display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; padding-right: .06em; margin-right: -.06em; } .cx-linha-mask > span{ display: block; will-change: transform; /* --k é o progresso de montagem que a própria cena já escreve na faixa. Cada linha tem o seu limiar (--th), então elas sobem em cascata a partir de UMA variável no pai — nenhum JavaScript participa do quadro. */ --kl: clamp(0, (var(--k, 1) - var(--th, 0)) * 3.2, 1); transform: translateY(calc((1 - var(--kl)) * 105%)); } /* o lede e as ações chegam DEPOIS do display, na mesma variável */ .cx-cap .cx-lede{ --kl: clamp(0, (var(--k, 1) - .34) * 3, 1); opacity: var(--kl); transform: translateY(calc((1 - var(--kl)) * 14px)); } .cx-cap .cx-acoes, .cx-cap .cx-numeros{ --kl: clamp(0, (var(--k, 1) - .52) * 3, 1); opacity: var(--kl); transform: translateY(calc((1 - var(--kl)) * 14px)); } .cx-cap .cx-selo{ --kl: clamp(0, var(--k, 1) * 2.6, 1); opacity: var(--kl); } /* ═════════════════════════════════════════════════════════════════════════ O PALCO — a cena que a rolagem dirige ═════════════════════════════════════════════════════════════════════════ */ #abertura{ background: var(--c-tinta) } /* As três camadas de atmosfera. Nenhuma delas anima: são estáticas, custam uma composição e resolvem metade do "cinematográfico". */ /* ── a chegada ──────────────────────────────────────────────────────────── A imagem do destino. Fica sobre o canvas e sob os capítulos, e sobe de opacidade só no último ato. O leve zoom-out que ela faz enquanto aparece é o gesto de quem PÁRA de se aproximar: a câmera chegou. */ .cx-chegada{ position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; will-change: opacity; } .cx-chegada img, .cx-chegada canvas{ width: 100%; height: 100%; object-fit: cover; display: block; /* --ck é escrito pela cena, de 0 a 1, no último ato */ transform: scale(calc(1.10 - .10 * var(--ck, 1))); transform-origin: 50% 46%; } /* A chegada é pixel art desenhada em canvas de baixa resolução: sem isto o navegador interpola e a paisagem chega borrada justamente no momento em que ela é o assunto da tela. */ .cx-chegada canvas{ image-rendering: pixelated; image-rendering: crisp-edges; object-fit: fill; } /* A imagem é MUITO mais movimentada que a cena desenhada: linhas, nós e reflexos brilhantes exatamente onde o texto do último capítulo mora. Sem isto, "E o mapa começa aqui" briga com a malha por trás e perde. O véu geral do palco não resolve sozinho porque ele escurece topo e base por igual; aqui o problema é local. Este é um segundo véu, ancorado no canto de baixo à esquerda — onde o capítulo 05 compõe — e ele só existe enquanto a imagem existe, subindo com o mesmo --ck. */ /* O VÉU FOI REMOVIDO. Ele existia para dar contraste ao capítulo 05, que compunha por cima da foto de chegada. A chegada agora é a paisagem em pixel e a regra passou a ser: nada por cima dela. Um véu que escurece 88% da base existia só para salvar um texto que não está mais lá — mantê-lo seria apagar a arte para proteger ninguém. Sobrou só um degradê curtíssimo nas bordas, para a cena não terminar num corte seco contra o preto da página. */ .cx-chegada::after{ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--ck, 0); background: linear-gradient(to top, rgba(6,9,15,.55) 0%, rgba(6,9,15,0) 16%); } /* No celular o capítulo ocupa quase a largura toda, então o véu local vira uma faixa inteira de baixo em vez de um canto. */ @media (max-width: 760px){ /* No celular a faixa de baixo é um pouco maior só porque a tela é mais estreita e o corte fica mais evidente — mas continua sendo borda, não véu: a paisagem precisa chegar inteira no aparelho que a maioria usa. */ .cx-chegada::after{ background: linear-gradient(to top, rgba(6,9,15,.6) 0%, rgba(6,9,15,0) 22%); } } /* 1 · GRÃO. Ruído de filme em SVG, 5% de opacidade. É o que tira o aspecto de "renderizado no navegador" — superfície digital perfeita demais entrega o truque na hora. O inset negativo evita ver a borda do ladrilho. */ .cx-grao{ position: absolute; inset: -50%; pointer-events: none; z-index: 6; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } /* 2 · VINHETA. Escurece os cantos e empurra o olho para o centro. É o que faz a tela parecer uma LENTE em vez de uma janela. */ .cx-vinheta{ position: absolute; inset: 0; pointer-events: none; z-index: 5; background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(6,9,15,.58) 100%); } /* 3 · VÉU. Escurece topo e base, onde o texto mora, e deixa o meio limpo, onde a cena acontece. Não é enfeite: é o que garante contraste de leitura sobre uma imagem que muda a cada quadro. */ .cx-veu{ position: absolute; inset: 0; pointer-events: none; z-index: 7; background: linear-gradient( rgba(6,9,15,.62) 0%, rgba(6,9,15,.10) 34%, rgba(6,9,15,.14) 60%, rgba(6,9,15,.74) 100%); } /* ── os capítulos ───────────────────────────────────────────────────────── Todos empilhados no mesmo palco, todos absolutos, todos invisíveis até a rolagem chamar. A COMPOSIÇÃO muda de um para o outro — esquerda, centro, direita — e é isso que impede a jornada de parecer um slideshow. */ .cx-cap{ position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; justify-content: center; padding: clamp(5rem, 12vh, 9rem) clamp(1.5rem, 8vw, 9rem); opacity: 0; pointer-events: none; will-change: opacity, transform; } .cx-cap--centro{ align-items: center; text-align: center } .cx-cap--dir { align-items: flex-end; text-align: right } .cx-cap--esq { align-items: flex-start; text-align: left } /* O instrumento mora na margem esquerda. Sem abrir uma pista para ele, o capítulo composto à esquerda começa POR BAIXO do HUD e a primeira letra de cada linha some — foi o que aconteceu com "E o mapa começa aqui". Na referência é igual: o HUD tem a margem, o texto começa depois dela. */ @media (min-width: 901px){ .cx-cap--esq{ padding-left: clamp(7rem, 13vw, 13rem) } } .cx-cap--baixo { justify-content: flex-end } /* O capítulo sobe para o topo da tela quando o CENÁRIO precisa do chão — é o caso da lógica, onde os quatro pilares crescem de baixo. Sem isto o texto centrado pousa exatamente em cima deles e os dois ficam ilegíveis. */ .cx-cap--alto { justify-content: flex-start } /* o que estiver dentro precisa poder ser clicado quando o capítulo chegar */ .cx-cap.cx-ativo{ pointer-events: none } .cx-cap .cx-acoes{ pointer-events: auto } /* ── números dentro da cena ─────────────────────────────────────────────── Régua de instrumento: valor grande em mono, rótulo minúsculo embaixo, separados por linha de um pixel. */ .cx-numeros{ display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); list-style: none; margin: 2.4rem 0 0; padding: 0; flex-wrap: wrap; } .cx-numeros li{ display: flex; flex-direction: column; gap: .4rem } .cx-numeros b{ font-family: var(--f-mono); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 500; color: var(--c-papel); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .cx-numeros span{ font-family: var(--f-mono); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--c-papel-3); } /* ── ações dentro da cena ─────────────────────────────────────────────── */ .cx-acoes{ display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 2.2rem } .cx-btn{ display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding: 1rem 1.9rem; border-radius: 0; /* canto reto: instrumento */ text-decoration: none; border: 1px solid transparent; transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .18s var(--ease); } .cx-btn--cheio{ background: var(--c-papel); color: var(--c-tinta) } .cx-btn--cheio:hover{ background: var(--c-ouro-viv) } .cx-btn--linha{ border-color: var(--c-linha); color: var(--c-papel) } .cx-btn--linha:hover{ border-color: var(--c-papel); background: rgba(242,239,232,.05) } .cx-btn:active{ transform: translateY(2px) } @media (pointer: coarse){ .cx-btn{ min-height: 48px } } /* ═════════════════════════════════════════════════════════════════════════ A MOLDURA FIXA — o que nunca sai da tela --------------------------------------------------------------------------- Nav, HUD e barra de progresso. É a moldura que transforma uma página numa CABINE: você está sempre dentro de um instrumento, e ele sempre te diz onde você está. ═════════════════════════════════════════════════════════════════════════ */ /* a barra de progresso: dois pixels no topo, e nada mais */ .cx-barra{ position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; background: rgba(242,239,232,.07); pointer-events: none; } .cx-barra i{ display: block; height: 100%; width: 100%; background: var(--c-ouro); transform-origin: 0 50%; transform: scaleX(0); } /* ── o instrumento ──────────────────────────────────────────────────────── Duas leituras técnicas na lateral, verticalmente centradas. Ele mora dentro do palco, então some junto com a jornada — leitura de voo não serve em terra. Os valores continuam sendo escritos pela cena. */ .cr-hud{ position: absolute !important; left: var(--pad) !important; right: auto !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; z-index: 9; display: flex !important; flex-direction: column; gap: 1.9rem; width: auto !important; padding: 0 !important; background: none !important; border: none !important; pointer-events: none; } .cr-hud__item{ display: flex; flex-direction: column; gap: .35rem } .cr-hud em{ font-family: var(--f-mono); font-style: normal; font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: var(--c-papel-3); } .cr-hud b{ font-family: var(--f-mono); font-size: .92rem; font-weight: 400; color: var(--c-papel-2); font-variant-numeric: tabular-nums; letter-spacing: .04em; } /* o trilho vira uma régua vertical fina, não uma barra */ .cr-hud .cr-trilho{ display: block; width: 1px; height: 64px; background: var(--c-linha); overflow: hidden; margin-top: .2rem; } .cr-hud .cr-trilho i{ display: block; width: 100%; height: 100%; background: var(--c-ouro); transform-origin: 50% 0; } @media (max-width: 900px){ .cr-hud{ display: none !important } } /* a dica de rolagem: uma linha que desce sozinha, e só no começo */ .cx-dica{ display: flex; flex-direction: column; align-items: center; gap: .7rem; margin-top: 3rem; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--c-papel-3); } .cx-dica u{ display: block; width: 1px; height: 46px; text-decoration: none; background: linear-gradient(var(--c-papel-3), transparent); position: relative; overflow: hidden; } .cx-dica u::after{ content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: var(--c-ouro); animation: cxDesce 2.4s var(--ease) infinite; } @keyframes cxDesce{ 0%{ transform: translateY(-14px) } 70%,100%{ transform: translateY(46px) } } /* O véu por faixa do sistema antigo sai: agora existe UM véu para o palco inteiro (.cx-veu). Dois véus sobrepostos escurecem demais e comem o contraste da cena que eles deveriam estar protegendo. */ .cr-faixa::before{ display: none !important } /* ═════════════════════════════════════════════════════════════════════════ O CABEÇALHO — quatro palavras e uma chamada --------------------------------------------------------------------------- Nav de site caro não tem dez itens. Tem os poucos que importam, em letra minúscula de rastreio largo, e uma única chamada com peso. `body > header`, e NÃO `header`. O seletor de tag pegava todo
do site: o `.aula-topo` da aula, o `.doc-topo` de termos/privacidade e o cabeçalho de cada cartão de feedback na home. Os três viravam barra fixa em display:flex no topo da tela — no celular o título, o selo do plano, a meta e o objetivo da aula viravam quatro colunas espremidas por cima do texto. A nav de verdade é sempre filha direta do (no HTML das páginas estáticas e no `document.body.prepend` do `ui.js#montarHeader`), então o filho direto separa uma da outra sem precisar de classe nova. ═════════════════════════════════════════════════════════════════════════ */ body > header{ position: fixed !important; top: 0; left: 0; right: 0; z-index: 110; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem var(--pad) !important; background: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; transition: background-color .6s var(--ease), backdrop-filter .6s var(--ease); } /* No celular a barra sai de cena enquanto a pessoa desce e volta assim que ela sobe — ver assets/nav-celular.js. Só a classe muda; a animação é `transform`, que a GPU resolve sem refazer layout. */ body > header{ transition: transform .26s var(--ease), background-color .6s var(--ease), backdrop-filter .6s var(--ease) } body > header.nav-oculta{ transform: translateY(-110%) } @media (prefers-reduced-motion: reduce){ body > header{ transition: none } } /* só ganha fundo quando sai da jornada, para não sujar a cena */ body > header.cx-pousado{ background: rgba(6,9,15,.72) !important; backdrop-filter: blur(14px) !important; border-bottom: 1px solid var(--c-linha-2) !important; } /* Fora da home não existe jornada, nem o cinema.js que acende o fundo acima. Sem isto a barra ficava transparente para sempre: ao rolar, o texto da aula, os cartões do mapa e o editor da missão passavam por baixo do logotipo e dos links ("CompilaVariáveis"). A home é a única página com #abertura, então é ela que o :has() deixa de fora. */ html:not(:has(#abertura)) body > header{ background: rgba(6,9,15,.8) !important; backdrop-filter: blur(14px) !important; border-bottom: 1px solid var(--c-linha-2) !important; } /* A Instrument Serif só existe no peso 400 (é serifa de display: o tamanho é a ênfase). Os títulos das páginas internas herdaram `font-weight: 700` do tempo em que eram Space Grotesk, e o navegador INVENTAVA um negrito — borrado e apertado. Sem síntese, eles caem no 400 de verdade. */ html:not(:has(#abertura)) :is(h1, h2, h3, .logo, .chapter-title, .pixel-block-title){ font-synthesis-weight: none; } /* A faixa que o cabeçalho fixo cobre. `position: fixed` tira o cabeçalho do fluxo, então nada mais reserva os 92px que ele ocupa. Nas páginas com herói isso é proposital — a nav flutua sobre a cena. Nas páginas-documento (aula, curso, cursos) o conteúdo começa no topo e sumia por baixo dela: no celular a migalha e o selo do plano ficavam atrás da barra. O `ui.css` dava `position: sticky` ao `.c-header`, que reservava o espaço sozinho; ao trocar por `fixed` aqui, a compensação passou a ser obrigação desta folha. */ :root{ --cx-nav-h: 5.75rem } .c-wrap{ padding-top: calc(var(--cx-nav-h) + .75rem) } /* mesma razão do `scroll-margin-top` das seções, para as âncoras do índice da aula (#sec0, #sec1…) não pararem atrás da barra */ html{ scroll-padding-top: calc(var(--cx-nav-h) + 1rem) } header .logo{ font-family: var(--f-display) !important; font-size: 1.32rem !important; font-weight: 400 !important; letter-spacing: .01em !important; color: var(--c-papel) !important; text-transform: none !important; gap: .55rem !important; } header .logo-box{ font-family: var(--f-mono) !important; font-size: .62rem !important; background: none !important; border: 1px solid var(--c-linha) !important; color: var(--c-ouro) !important; box-shadow: none !important; padding: .28rem .42rem !important; border-radius: 0 !important; } header .header-links{ gap: 2rem !important; align-items: center } header .header-links a, header .header-links button{ font-family: var(--f-mono) !important; font-size: .68rem !important; font-weight: 400 !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--c-papel-2) !important; background: none !important; border: none !important; box-shadow: none !important; padding: .4rem 0 !important; transition: color .3s var(--ease); } header .header-links a:hover{ color: var(--c-papel) !important } /* A chamada. Contorno, não bloco: num cabeçalho que flutua sobre uma cena, um retângulo amarelo sólido é a única coisa que o olho vê. O peso vem do contorno e do rastreio, e só no hover ela se enche. */ /* O seletor precisa de `.header-links` no meio: o compila-world.css declara `.header-links .btn-nav-cta` com !important, e entre duas regras importantes quem ganha é a mais específica — não a que vem depois. */ header .header-links .btn-nav-cta, header .btn-nav-cta{ background: none !important; background-image: none !important; border: 1px solid var(--c-linha) !important; padding: .72rem 1.3rem !important; color: var(--c-papel) !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; font-size: .68rem !important; letter-spacing: .2em !important; } header .header-links .btn-nav-cta:hover, header .btn-nav-cta:hover{ background: var(--c-ouro-viv) !important; color: var(--c-tinta) !important; border-color: var(--c-ouro-viv) !important; } /* Os botões de ícone (busca, sino) e a pílula de XP viram detalhe: eles são úteis para quem já tem conta, e ruído visual para quem está conhecendo o site. Ficam, mas param de competir. */ header .nav-icon-btn, header .sino-host, header #navXpPill{ opacity: .5; transition: opacity .3s var(--ease); filter: grayscale(1); } header .nav-icon-btn:hover, header .sino-host:hover, header #navXpPill:hover{ opacity: 1; filter: none } header #navXpPill *{ font-family: var(--f-mono) !important; font-size: .6rem !important; letter-spacing: .12em !important; border-radius: 0 !important; } /* ═════════════════════════════════════════════════════════════════════════ AS SEÇÕES DE CONTEÚDO — a página de verdade, depois da jornada --------------------------------------------------------------------------- Aqui a câmera já desceu do carrinho. O que sustenta a sensação de qualidade não é mais movimento: é espaço negativo, régua e contenção. ═════════════════════════════════════════════════════════════════════════ */ body{ background: var(--c-tinta); color: var(--c-papel); font-family: var(--f-corpo); -webkit-font-smoothing: antialiased; } /* o ritmo de dois pretos, alternando */ main > section, body > section{ background: var(--c-tinta); padding: clamp(6rem, 14vh, 11rem) 0; /* o cabeçalho é fixo: sem esta margem, todo link de âncora (#praticar, #projetos, #planos) para com o título escondido atrás dele */ scroll-margin-top: 5.5rem; } body > section:nth-of-type(even){ background: var(--c-tinta-2) } body > section:first-of-type{ padding-top: 0 } /* a jornada começa colada no topo */ /* títulos de seção: o mesmo display da jornada, no mesmo tamanho grande. Seção de conteúdo com título pequeno é o que faz um site parecer um folheto depois de uma abertura bonita. */ section h2{ font-family: var(--f-display) !important; font-weight: 400 !important; line-height: .98 !important; letter-spacing: -.02em !important; font-size: clamp(2.4rem, 5.6vw, 5rem) !important; color: var(--c-papel) !important; text-transform: none !important; text-wrap: balance; margin: 0 0 1.4rem; } section h3{ font-family: var(--f-display); font-weight: 400; font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.12; letter-spacing: -.01em; color: var(--c-papel); } section .section-lede, section .lede{ font-family: var(--f-corpo); font-weight: 300; font-size: clamp(.95rem, 1.2vw, 1.08rem); line-height: 1.65; color: var(--c-papel-2); max-width: 54ch; } /* o selo de seção, no lugar da etiqueta em pixel */ .pixel-eyebrow{ display: inline-block !important; font-family: var(--f-mono) !important; font-size: .68rem !important; font-weight: 500 !important; letter-spacing: .28em !important; text-transform: uppercase !important; color: var(--c-ouro) !important; background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 1.3rem !important; border-radius: 0 !important; } /* ── a ficha técnica ────────────────────────────────────────────────────── Rótulo à esquerda, valor à direita, linha de um pixel entre eles. É a gramática de dado da referência, e serve ao Compila sem mudar nada: uma trilha tem alcance (aulas), passageiros (exercícios) e velocidade (horas) exatamente como uma aeronave. */ .cx-ficha{ margin: 1.6rem 0 0; padding: 0 } .cx-ficha > div{ display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: .78rem 0; border-top: 1px solid var(--c-linha-2); } .cx-ficha > div:first-child{ border-top-color: var(--c-linha) } .cx-ficha dt{ font-family: var(--f-corpo); font-size: .82rem; font-weight: 300; color: var(--c-papel-3); } .cx-ficha dd{ margin: 0; font-family: var(--f-mono); font-size: .85rem; color: var(--c-papel); font-variant-numeric: tabular-nums; } /* ═════════════════════════════════════════════════════════════════════════ OS CARTÕES — superfície, não caixa --------------------------------------------------------------------------- Canto reto, uma linha de um pixel, fundo quase igual ao da seção. O cartão não é um objeto colado por cima da página: é um recorte DELA. Borda colorida e canto arredondado são o que fazia o conjunto parecer painel de aplicativo em vez de página editorial. ═════════════════════════════════════════════════════════════════════════ */ .course-card, .challenge-card, .plano-card, .c-card, .gallery-grid > a, .trilha-card, .path-step__body, .playground-panel, .tutor-panel, .gami-panel, .browser-window, .journey-wrap, .fb-form, .plano-form{ border-radius: 0 !important; border: 1px solid var(--c-linha-2) !important; background: rgba(242,239,232,.015) !important; box-shadow: none !important; transition: border-color .45s var(--ease), background-color .45s var(--ease), transform .45s var(--ease) !important; } .course-card::before, .course-card::after, .challenge-card::before, .challenge-card::after, .plano-card::before, .plano-card::after, .trilha-card::before, .trilha-card::after{ display: none !important } @media (hover: hover) and (pointer: fine){ .course-card:hover, .challenge-card:hover, .plano-card:hover, .c-card:hover, .gallery-grid > a:hover, .trilha-card:hover{ border-color: var(--c-linha) !important; background: rgba(242,239,232,.04) !important; } } /* o plano escolhido: uma linha dourada, e nada mais */ .plano-card.selected{ border-color: var(--c-ouro) !important; background: rgba(217,164,65,.045) !important; } /* o nome do cartão volta para a serifa; o preço e os dados, para a mono */ .course-card h3, .challenge-card h3, .plano-card h3, .c-card h3, .gallery-grid h3, .trilha-card h3{ font-family: var(--f-display) !important; font-weight: 400 !important; font-size: clamp(1.25rem, 2vw, 1.6rem) !important; line-height: 1.1 !important; letter-spacing: -.01em !important; color: var(--c-papel) !important; } .plano-preco, .plano-card strong{ font-family: var(--f-mono) !important; font-weight: 400 !important; letter-spacing: -.01em !important; } /* ── os últimos pedidos de fonte de pixel ───────────────────────────────── Estes estão escritos à mão no