/* ══════════════════════════════════════════════════════════════════════ EKIM VFX — folha de estilo compartilhada Usada por: /houdini/, /membros/obrigado/, /membros/aulas/, /membros/aula/1 a 6/ Paleta reconstruída em 31/07/2026 a partir de medição real dos ativos do Mike (docs/addendum-visual-ekim.md) — não do zero, não por gosto. Ver §1 daquele arquivo pros números: capas das aulas (~91% preto puro, laranja de marca em <1% da área, tom #FC7824/#FF7E28 confirmado por amostragem independente das seis capas) e os seis renders de breakdown (monocromáticos, preto real nunca abaixo de #232323). Esta paleta é derivada desses dois ativos — não é redesign por estética avulsa. ══════════════════════════════════════════════════════════════════════ */ :root{ /* --bg = base de TODA superfície de conteúdo, logo abaixo do ponto mais escuro medido nos renders (#232323) — antes disso, o site usava #08080A, mais escuro que qualquer vídeo do próprio Mike, e todo vídeo virava um retângulo cinza-claro flutuando sobre um preto mais preto que ele. Agora o vídeo assenta na página. O addendum original também definia --bg-brand (preto puro das capas) pra "momentos de marca" (topo, rodapé). Testado ao vivo em 31/07/2026: numa barra sticky sempre visível contra --bg, a diferença lia como emenda acidental, não como decisão — removido. Se algum dia fizer sentido de novo (ex.: um hero full-bleed que não compete com --bg ao lado), o valor é #000000, direto das capas medidas em §1 do addendum. */ --bg:#1C1C1C; --bg-raise:#232323; --bg-panel:#2E2E2E; /* --bg-brand REINTRODUZIDO em 01/08/2026 (vistoria, P1-2). O token tinha saído em 31/07 por não servir mais à barra sticky — mas dois consumidores ficaram para trás: .cap-hero-media (base.css) e .vd-hero-media (vendas.css). Sem definição, `background:var(--bg-brand)` computa `rgba(0,0,0,0)`, medido nos dois contêineres — o hero perdia o preto de marca enquanto o hero.mp4 de 3,29 MB não pintava e mostrava o --bg do body com o scrim preto por cima só de um lado. Valor vem das capas: 89,0% a 90,1% da área das seis é preto puro (medição de 01/08/2026). É exatamente o "momento de marca full-bleed" que o comentário antigo previu — este é o único uso, e é o que o token sempre quis ser. */ --bg-brand:#000000; --line:#3A3A3A; --line-soft:#282828; --grid-strong:rgba(255,255,255,.05); /* só o .divider (régua entre seções) */ /* --dim corrigido em 31/07/2026: era #797979 ("branco real" medido nos renders de breakdown, addendum §2) — funcionava contra o --bg antigo quase preto (#08080A), mas contra o --bg atual (#1C1C1C) ficava entre 3.61:1 e 3.91:1 em 24 elementos (eyebrow, tag de fase, nome de node, rodapé, avisos pequenos) — abaixo do mínimo de 4.5:1 da WCAG pra texto pequeno. #8E8E8E dá 5.20:1 contra --bg e 4.80:1 contra --bg-raise, medido e confirmado. Achado numa vistoria pedida pelo autor, não suposição. */ --text:#F2F2F2; --muted:#AFA299; --dim:#8E8E8E; --faint:#4B4B4B; /* Laranja de marca — #FC7824, medido nas capas das aulas (confirmado por amostragem independente em 31/07/2026: tom real #FF7E28, mesma família, hue≈23-24). Regra de dose herdada da própria marca: as capas usam laranja em <1% da área, nunca em moldura, glow ou gradiente — só onde o olho precisa decidir algo (botão, preço, estado ativo). accent-2 (variação clara pra gradiente) saiu: gradiente laranja→laranja-claro era o que mais lia como template. */ --accent:#FC7824; --accent-dim:rgba(252,120,36,.12); --accent-line:rgba(252,120,36,.30); /* Azul de estado — display flag do Houdini em .aula-progress. Só pra "onde você está agora" na sequência, nunca pra ação. */ --state:#3F7FC4; --display:'Archivo',system-ui,sans-serif; /* Inter saiu: é a fonte padrão da década e não carrega personalidade. IBM Plex Sans — desenhada pra documentação técnica, decisão do autor em 31/07/2026 entre ela e um corpo em serifa (mais ousado, descartado por risco de leitura em mobile). */ --body:'IBM Plex Sans',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --gut:32px; /* Escala de geometria — três degraus: xs = chip/etiqueta, sm = botão/ input/mídia, md = painel. Substituiu onze raios arbitrários. */ --r-xs:2px; --r-sm:4px; --r-md:6px; /* Moldura de mídia em neutro. O laranja fica reservado para AÇÃO — nas capas ele nunca aparece em moldura decorativa, só no que se clica. */ --frame:rgba(255,255,255,.16); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;position:relative; } /* Grid de pontos do Network Editor removido em 31/07/2026 (docs/addendum-visual-ekim.md §3.4): é a referência mais óbvia possível a Houdini e não vem de nenhum ativo do Mike — com a paleta de pretos escalonada (--bg/--bg-raise/--bg-panel), a página não precisa de textura de fundo pra ter profundidade. */ img,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} .wrap{max-width:1160px;margin:0 auto;padding:0 var(--gut)} /* !important de propósito: é utilitário de "visualmente oculto" e precisa ganhar de qualquer regra de componente. Sem isso, `.form input` (mais específica) devolvia width:100%+padding ao honeypot `.sr-only`, que é position:absolute — o campo invisível ficava com ~930px e criava scroll horizontal em /formacao/, /houdini/ e /membros/obrigado/. */ .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0);white-space:nowrap;border:0!important} h1{font-family:var(--display);font-weight:700;font-size:clamp(31px,4.4vw,52px);line-height:1.06;letter-spacing:-.037em} h1 em{font-style:normal;color:inherit} h2{font-family:var(--display);font-weight:600;font-size:clamp(23px,2.8vw,34px);letter-spacing:-.028em;line-height:1.16} h3{font-family:var(--display);font-weight:600;font-size:17.5px;letter-spacing:-.015em;line-height:1.28} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:11px;margin-bottom:22px} .eyebrow b{color:var(--accent);font-weight:500;font-feature-settings:"tnum" 1} .dot{width:4px;height:4px;border-radius:50%;background:var(--accent);display:inline-block;flex-shrink:0} .lead{font-size:17px;color:var(--muted);line-height:1.62;max-width:52ch} .lead strong{color:var(--text);font-weight:500} .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:600;padding:16px 26px;border-radius:var(--r-sm);background:var(--accent);color:#120600;width:100%;overflow:hidden;transition:transform .2s cubic-bezier(.2,.7,.3,1),filter .2s} .btn:hover{transform:translateY(-1px);filter:brightness(1.08)} .btn svg{position:relative;transition:transform .25s} .btn:hover svg{transform:translateX(3px)} .btn[disabled]{opacity:.6;pointer-events:none} .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)} .btn.ghost:hover{filter:none;border-color:#31313B} /* revelação discreta ao entrar na tela. Sem blur: filtro animado em scroll custa repaint em mobile e "desfoca-e-foca" é gesto de template genérico — deslocamento curto + fade dá o mesmo sem o custo. */ .rv{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)} .rv.in{opacity:1;transform:none} /* chrome de viewport — cantos em L nos enquadramentos de mídia */ .vp{position:relative} .vp::before{ content:"";position:absolute;inset:7px;z-index:4;pointer-events:none; background: linear-gradient(var(--frame),var(--frame)) 0 0/13px 1px no-repeat, linear-gradient(var(--frame),var(--frame)) 0 0/1px 13px no-repeat, linear-gradient(var(--frame),var(--frame)) 100% 0/13px 1px no-repeat, linear-gradient(var(--frame),var(--frame)) 100% 0/1px 13px no-repeat, linear-gradient(var(--frame),var(--frame)) 0 100%/13px 1px no-repeat, linear-gradient(var(--frame),var(--frame)) 0 100%/1px 13px no-repeat, linear-gradient(var(--frame),var(--frame)) 100% 100%/13px 1px no-repeat, linear-gradient(var(--frame),var(--frame)) 100% 100%/1px 13px no-repeat; } /* marca — virou em 04/08/2026 (achado do autor: clicar na logo não fazia nada em nenhuma das 16 páginas). Opacidade no hover é o único feedback que ela precisa: é lockup de marca, não botão — uma borda ou sublinhado ali competiria com o resto do header. */ .brand{display:flex;align-items:center;gap:12px;transition:opacity .2s} .brand:hover,.foot-brand:hover{opacity:.8} .brand img{height:32px;width:auto;flex-shrink:0;transform:translateY(-1px)} .brand-name{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.13em;text-transform:uppercase;line-height:1;color:var(--text);white-space:nowrap} /* Lockup institucional: "EKIM VFX" com "SCHOOL" abaixo, justificado à mesma largura pelo tracking (não por width fixo) — é o que faz o par ler como marca desenhada em vez de duas linhas empilhadas. O descritor usa a MESMA família do nome (Archivo), não a mono: mono é voz de código e brigava com o emblema heráldico da logo e com o próprio wordmark. Mesma família + peso menor + tracking largo é a construção clássica de selo de escola. */ .brand-lock{display:flex;flex-direction:column;gap:5px} .brand-sub{font-family:var(--display);font-weight:500;font-size:9px;letter-spacing:.7em;text-transform:uppercase;line-height:1;color:var(--muted);white-space:nowrap} .foot-brand{display:flex;align-items:center;gap:16px;transition:opacity .2s} .foot-brand img{height:48px;width:auto;opacity:.92} .foot-brand .brand-name{font-size:14px;letter-spacing:.14em} .foot-brand .brand-sub{font-size:8.5px;letter-spacing:.675em} /* topo */ /* Sólida em 31/07/2026 (briefing §2.18): header sticky translúcido com blur é o default de qualquer template desde 2023. Primeira tentativa usou --bg-brand (preto puro) — mas numa barra STICKY, sempre visível, contra --bg (#1C1C1C) do conteúdo por trás, a diferença é pequena demais pra parecer decisão e grande o bastante pra parecer emenda. Corrigido pro autor, olhando o site rodando: mesma cor do conteúdo. */ .bar{border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:60;background:var(--bg)} /* gap + flex-shrink:0 na marca — 01/08/2026 (vistoria, P1-5). Havia só justify-content:space-between e nenhum gap: a 390px a .bar-note encostava no lockup, com o ponto laranja do ::before caindo entre "VFX" e "FOUNDATIONS", e a segunda linha da nota colada no "S C H O O L". O lockup deixava de ler como marca — no header, que está nas 14 páginas e é o primeiro elemento que carrega. */ .bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:62px} .bar .brand{flex-shrink:0} /* justify-content, não text-align: .bar-note é display:flex (linha abaixo), então text-align não alinha os itens — alinha só o texto dentro do item. */ .bar-note{justify-content:flex-end;text-align:right} .bar-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:9px} .bar-note::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)} .bar-note.no-dot::before{content:none} /* "Entrar" → área do aluno (Hotmart Club), 02/08/2026. Peso SECUNDÁRIO de propósito: é link de navegação, não CTA. Não pode competir com "Acessar o Foundations" na venda nem com o formulário na captura — por isso texto + borda fina, nunca botão preenchido. Mesma mono das eyebrows, que é a voz institucional do site. min-height 44px pelo mesmo motivo do rodapé (WCAG 2.5.5, vistoria P1-8). */ .bar-entrar{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:3px;padding:0 14px;min-height:34px;display:inline-flex;align-items:center;flex-shrink:0;transition:color .25s,border-color .25s} .bar-entrar:hover{color:var(--text);border-color:var(--faint)} /* Agrupa nota + Entrar num bloco só à direita. Sem isso, o .wrap do header é space-between com TRÊS filhos e a nota migraria para o centro da barra, mudando a composição de todas as páginas que têm nota. */ .bar-end{display:flex;align-items:center;gap:16px;min-width:0;justify-content:flex-end} /* A .bar-note vira o item elástico: ela é informativa e pode encolher; marca e "Entrar" são funcionais e não. Sem isso, a 390px o terceiro elemento espremia o lockup de novo — exatamente a regressão que a vistoria de 01/08 (P1-5) tinha acabado de corrigir. */ .bar .bar-note{min-width:0;flex-shrink:1} /* Abaixo de 560px a nota sai e sobra marca + Entrar. A nota é decorativa ("Foundations · 6 aulas gratuitas"); o acesso do aluno é funcional. Numa barra de 62px de altura, os dois não cabem sem atropelar a marca. O .btn.ghost do header (só existe em /formacao/) tinha a MESMA regra até 04/08/2026 — revertido nesta data (P0.2v2, rodada de conversão e vistoria). Motivo original (02/08/2026): a 390px, marca 130px + gap 18 + "Acessar formação" 156px + gap 16 + "Entrar" 76px = 396px contra 346px úteis — não cabia por 50px. A correção de então foi ESCONDER o botão e compensar com uma barra fixa nova (.cta-fixa) no fim da página. O autor perguntou se dava pra resolver na raiz antes de aceitar a barra: trocar o texto por "Matrícula" (mais curto) em vez de escondê-lo. MEDIDO de novo em 04/08/2026, com "Matrícula": marca 130px + bar-end 186px (botão 94px + Entrar 76px + gap) = 316px contra os mesmos 346px úteis a 390px — cabe com folga. Reconferido a 360px (168px de bar-end) e a 320px (iPhone SE): cabe nos dois, sem quebra de linha, sem overflow horizontal. A .cta-fixa que existia só pra compensar este buraco foi removida do HTML/CSS/JS — resolver na raiz eliminou a barra inteira, não só escondeu o sintoma. */ @media(max-width:560px){ .bar .bar-note{display:none} } /* cadeia de nós das 6 aulas: cada aula é um nó ligado por wire. Laranja = já percorrida, AZUL = a que está sendo exibida agora (display flag), apagada = ainda à frente. Carrega posição real na sequência. */ .aula-progress{display:inline-flex;align-items:center;gap:5px;position:relative} .aula-progress i{position:relative;display:block;flex-shrink:0;width:12px;height:6px;border-radius:var(--r-xs);background:#2A2A32;border:1px solid rgba(0,0,0,.5)} /* o wire de cada segmento só acende se aquele nó foi avaliado: a cadeia viva termina no display flag, nada depois dele está cozinhando */ .aula-progress i::before{content:"";position:absolute;right:100%;top:50%;width:6px;height:1px;background:#33333C} .aula-progress i:first-child::before{content:none} .aula-progress i.on,.aula-progress i.on::before{background:#8A4318} .aula-progress i.atual{background:var(--state)} .aula-progress i.atual::before{background:#8A4318} /* hero — duas colunas dentro do container normal: texto à esquerda, mídia + formulário à direita. A capa do hero é uma ARTE COM TIPOGRAFIA (título da fase); por isso o enquadramento é 16/9 fechado e nunca recortado — cortar as laterais come as palavras da arte. */ .hero-wrap{position:relative} .split{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:60px;align-items:center;padding:clamp(44px,5.5vw,68px) 0 clamp(56px,6.5vw,84px)} /* ── hero cinematográfico da captura (31/07/2026) ────────────────── O reel passou de miniatura de ~500px na coluna direita para fundo de largura inteira. Numa escola de VFX a prova é o trabalho; ele não pode ser a menor coisa da tela. O formulário não saiu do lugar — continua na coluna direita, acima da dobra, agora sobre o reel. Mesma construção do .vd-hero de /formacao/ (scrim em gradiente + conteúdo em z-index acima), pra que as duas páginas principais leiam como o mesmo lugar. Contraste do texto sobre o vídeo calibrado pelos mesmos números do hero de vendas: acima de 4.5:1 mesmo na parte clara do reel. */ /* Corrigido em 31/07/2026: o scrim anterior nunca chegava perto de transparente em lugar nenhum do hero (opacidade mínima .78) — o vídeo ficava abafado na tela inteira, não só atrás do texto. Direção nova: --bg-brand (preto puro, é a "capa" enquanto o vídeo carrega) só na metade esquerda, onde o texto fica (a coluna direita já tem o card do formulário com fundo sólido próprio, não depende do scrim) — e some de verdade a partir de ~55% da largura. Vídeo volta a se ver de verdade; --bg-brand aqui é exatamente o "momento de marca full-bleed" que o token já previa (ver comentário em :root). */ .cap-hero{position:relative;overflow:hidden;isolation:isolate} .cap-hero-media{position:absolute;inset:0;z-index:0;background:var(--bg-brand)} .cap-hero-media video{width:100%;height:100%;object-fit:cover;opacity:.68} .cap-hero-media::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.78) 28%,rgba(0,0,0,.35) 48%,transparent 62%); } .cap-hero .wrap{position:relative;z-index:2} .cap-hero .split{padding:clamp(56px,7vw,92px) 0 clamp(64px,8vw,104px)} .cap-hero .lead{color:#C4C4CE} .cap-hero .fact{color:#A8A8B2} /* 05/08/2026: hero de vídeo da home (#homeHero) reaproveita .cap-hero/ .cap-hero-media de /houdini/, mas o texto ali é centralizado em coluna única em qualquer largura — nunca o split de duas colunas que o gradiente padrão de 90deg (linha acima) foi desenhado pra cobrir (escuro à esquerda, some aos 62%, porque a coluna direita tinha cartão de fundo sólido próprio). Num hero centralizado a metade direita do h1 caía sobre vídeo cru. Em vez de um componente novo, reaproveita o MESMO scrim vertical (mesmos valores) que a correção de 01/08/2026 já validou pra coluna única (ver comentário na media query de 860px abaixo) — só que aqui sem depender de breakpoint, porque a home nunca teve duas colunas. */ #homeHero .cap-hero-media::after{ background:linear-gradient(to bottom, rgba(0,0,0,.80) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.70) 72%, rgba(0,0,0,.86) 100%); } /* um passo abaixo do h1 global: a coluna do hero é bem mais estreita que uma seção inteira e, no tamanho global, "3D." caía sozinho numa linha */ #hero-h1{font-size:clamp(26px,3.4vw,42px)} /* marcador de seção, não "pill" de marketing: régua de 2px + mono. A pílula arredondada com bolinha laranja é o vocabulário visual de landing de infoproduto, e a bolinha não carregava informação (§7). */ .badge{ display:inline-flex;align-items:center; font-size:12.5px;font-weight:500; color:var(--accent);border-left:2px solid var(--accent); padding:2px 0 2px 11px;margin-bottom:26px; } /* faixa de specs, não "chips": sem pílula e sem bolinha, só o dado separado por régua fina — leitura de ficha técnica */ .facts{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:28px} .fact{font-size:13.5px;color:#9A9AA4;padding:2px 0} .fact:not(:last-child)::after{content:"·";margin-left:20px;color:var(--faint)} /* O bloco .stack / .hero-media / .vp-top / .vp-live foi REMOVIDO em 31/07/2026: eram a pilha de capas e a moldura 16/9 do reel na coluna direita da captura. O hero virou banda cinematográfica (.cap-hero, acima) com o reel em largura total, e nada mais usava estas regras. Código morto de layout confunde a próxima sessão — por isso saiu junto, em vez de ficar 'caso volte'. */ /* formulário */ /* sem borda-gradiente laranja: é o truque de card de checkout que este público reconhece de longe. Borda sólida de 1px, como um painel. */ .card{position:relative;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-raise);padding:32px 30px;box-shadow:0 20px 50px rgba(0,0,0,.35)} /* mesmo tratamento do .badge: régua em vez de bolinha decorativa */ .card .tag{font-size:12.5px;font-weight:500;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;border-left:2px solid var(--accent);padding-left:10px} .card h2{font-size:23px;margin-bottom:10px} .card .sub{font-size:14.5px;color:var(--muted);margin-bottom:26px;line-height:1.58} .form{display:flex;flex-direction:column;gap:11px} /* Fundo do campo: era #08080B — resíduo da paleta #08080A abandonada em 31/07/2026 (vistoria 01/08, P1-7). Ficava 20 níveis de luminância abaixo do piso de preto dos próprios renders (p05 medido = 36-37 nos seis clipes de breakdown, ≈ #242424) e ainda carregava o cast azul (B-R = +3). Agora usa --bg: recuado em relação ao --bg-raise do cartão que o contém, neutro como o resto dos tokens, e a borda de 1px é o que define o campo. */ .form input{width:100%;padding:15px 16px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--line);color:var(--text);font-family:var(--body);font-size:16px;transition:border-color .25s,background .25s,box-shadow .25s} .form input::placeholder{color:#4E4E58} .form input:focus{outline:none;border-color:var(--accent-line);background:#161616;box-shadow:0 0 0 3px var(--accent-dim)} /* Foco de TECLADO devolvido — 01/08/2026 (vistoria, P1-6). A regra de :focus acima tem especificidade (0,2,0) e apagava o outline global de :focus-visible (linha 76, especificidade 0,1,0) em TODOS os 8 campos de captação do site (#n1 #e1 #n2 #e2 /houdini/, #capNome #capEmail /formacao/, #whatsNum /obrigado/). O que sobrava como indicador foi medido: anel --accent-dim sobre --bg-raise dá #3D2D23 = 1,21:1, e a borda --accent-line sobre o fundo do campo dá 1,14:1 contra a borda de repouso. A WCAG 1.4.11 pede 3:1 entre focado e não focado. Verificado com Tab real, não com element.focus() — :focus-visible não dispara de forma confiável em foco programático. O anel suave continua para quem usa mouse; quem navega por teclado volta a ver o outline de 2px da casa. */ .form input:focus-visible,.whats-row input:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .form input[aria-invalid="true"]{border-color:var(--accent)} .err{font-size:13px;color:var(--accent);line-height:1.5} .fine{font-size:12px;color:var(--dim);line-height:1.65;margin-top:13px;text-align:center} .fine a{color:var(--dim);text-decoration:underline;text-underline-offset:2px} .fine a:hover{color:var(--muted)} .done{display:none;text-align:center;padding:12px 0} .done.on{display:block} .done .ok{color:var(--accent);font-size:15px;font-weight:600;margin-bottom:13px} .done p{font-size:15px;color:#B4B4BE;line-height:1.62} .card.sent .form,.card.sent .fine{display:none} /* divisor como régua de medição */ .divider{height:1px;background:var(--line-soft);position:relative} .divider::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,var(--grid-strong) 0 1px,transparent 1px 40px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)} /* Só o eixo vertical. Corrigido em 01/08/2026 (vistoria, P0-1): o atalho `padding: X 0` zerava também o horizontal, e como .sec é declarada DEPOIS de .wrap (linha 77) com a mesma especificidade (0,1,0), ela vencia em qualquer elemento que carregasse as duas classes. Medido a 390px: padding-left computado de .wrap = 0px em /, /membros/obrigado/, /membros/aulas/, /membros/aula/1..6/, /privacidade/, /termos/ e /404/ — 12 das 14 páginas com o texto encostando nas duas bordas da tela. As duas que escapavam (/houdini/ e /formacao/) aninham
em volta de
em vez de juntar as classes. Invisível acima de ~1204px, onde o max-width:1160px já centraliza — por isso passou. Usar as duas longhands em vez de padding-block: o site não tem outro uso de propriedade lógica e não vale estrear uma aqui. */ .sec{padding-top:clamp(66px,8vw,96px);padding-bottom:clamp(66px,8vw,96px)} /* módulos */ .track{margin-top:48px;position:relative} .mod{display:grid;grid-template-columns:92px 1fr;gap:26px;align-items:start;padding:11px 0} /* O CORPO DO NÓ envolve capa E texto — um nó tem um corpo só, e a descrição faz parte dele. Antes as flags estavam apenas na moldura da imagem: decorava a capa sem mudar o formato da linha, que continuava sendo lista editorial de 3 colunas. Agora é o mesmo componente dos cartões de /aulas/, em proporção larga e achatada como um nó real. As separadoras em fio sumiram: cada nó já tem corpo próprio, e somar régua entre eles seria moldura em cima de moldura. */ /* Flags trocadas de borda sólida pra TILE em 04/08/2026 — mesma correção aplicada em `.aula-node` (central de aulas), pelo mesmo motivo. No desktop este card é um nó deitado (300px + 1fr, proporção larga) e a borda de 6px ficava em 0,61% da área — discreta. Mas no mobile (@media 700px, logo abaixo) o card empilha capa+corpo e vira um retângulo alto e estreito (medido: 331×485, proporção 0,68); a MESMA borda de 6px correndo a altura inteira passava a 1,81% da área — mais que a versão que já tinha sido corrigida na central de aulas. Tile fixo (3×32px) não escala com a altura do card, então resolve as duas telas com uma regra só — não precisa mais de tratamento especial pro mobile. `position:relative` direto no `.mod-node`: ele não usa `::before`/`::after` pra mais nada (isso é só do `.mod-idx`, a coluna de índice ao lado), então a flag ancora nele mesmo, sem precisar de um wrapper de corpo como o `.aula-corpo` precisou. */ .mod-node{ position:relative; display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start; background:var(--bg-raise);border:1px solid var(--line); border-radius:var(--r-sm);padding:22px 26px; transition:border-color .35s,transform .35s,box-shadow .35s; } .mod:hover .mod-node{border-color:#31313B;transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.5)} .mod-node::before{ content:"";position:absolute;z-index:2;left:-1px;top:20px; width:3px;height:32px;background:var(--accent);border-radius:0 2px 2px 0; } .mod-node::after{ content:"";position:absolute;z-index:2;right:-1px;top:20px; width:3px;height:32px;background:transparent;border-radius:2px 0 0 2px; transition:background .3s; } .mod:hover .mod-node::after{background:var(--state)} .mod-idx{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--dim);padding-top:3px;padding-left:32px;position:relative} /* mesma anatomia do componente .node: corpo achatado com flag de tipo verde à esquerda. No hover a display flag AZUL acende à direita — é literalmente o gesto de ligar o display flag num nó do Houdini. */ .mod-idx::before{ content:"";position:absolute;left:0;top:3px;width:22px;height:11px;border-radius:2px; border:1px solid rgba(0,0,0,.55); background:linear-gradient(90deg,#7A3B14 0 5px,#63636C 5px); transition:background .35s,box-shadow .35s; } .mod:hover .mod-idx::before{ background:linear-gradient(90deg,var(--accent) 0 5px,#9A9AA2 5px calc(100% - 5px),var(--state) calc(100% - 5px)); box-shadow:0 0 0 1px rgba(255,255,255,.22); } /* wire de conexão descendo para o próximo nó, saindo do centro do tile */ /* wire descendo pro próximo nó da rede */ .mod-idx::after{content:"";position:absolute;left:11px;top:18px;bottom:-34px;width:1px;background:linear-gradient(var(--faint),var(--line) 70%,transparent)} .mod:last-of-type .mod-idx::after{display:none} .mod-cover{ position:relative;aspect-ratio:16/9;overflow:hidden; border:1px solid var(--line);border-radius:var(--r-sm);background:#000; transition:border-color .35s,transform .35s,box-shadow .35s; } .mod:hover .mod-cover{border-color:#31313B;transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.5)} /* dentro do nó a capa é só a saída no viewport: sem flags próprias (elas vivem nas arestas do corpo) e sem cantos em L, que duplicariam moldura */ .mod .mod-cover{border:1px solid rgba(0,0,0,.45);border-radius:var(--r-sm);transition:transform .35s} .mod .mod-cover.vp::before{content:none} .mod-cover img,.mod-cover video{width:100%;height:100%;object-fit:cover;display:block} .mod-cover video{opacity:0;transition:opacity .9s ease} .mod-cover video.ready{opacity:1} .mod-cover .poster{position:absolute;inset:0;z-index:1;transition:opacity .9s ease} .mod-cover video.ready ~ .poster{opacity:0;pointer-events:none} .mod-cover::after{content:attr(data-hud);position:absolute;bottom:9px;left:11px;z-index:3;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);text-shadow:0 1px 6px rgba(0,0,0,.9)} .mod-cover .vp-tag{position:absolute;top:9px;right:11px;z-index:3;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.5);text-shadow:0 1px 6px rgba(0,0,0,.9)} .mod-body h3{margin-bottom:11px} .mod-body .desc{font-size:15px;color:var(--muted);line-height:1.62;max-width:52ch;margin-bottom:16px} .mod-body .desc.note-fact{ border-left:1px solid var(--accent-line);padding-left:14px; font-size:14px;color:#8E8E98; } .mod-tags{display:flex;flex-wrap:wrap;gap:7px} .mod-tags span{font-family:var(--mono);font-size:11px;color:#8E8E98;border:1px solid var(--line);border-radius:var(--r-xs);padding:5px 9px;transition:border-color .25s,color .25s} .mod:hover .mod-tags span{border-color:#2C2C34} /* faixa de prova de categoria, logo abaixo do hero */ .proof{ border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft); background:var(--bg); } .proof .wrap{ display:flex;align-items:baseline;gap:18px;flex-wrap:wrap; padding:20px 24px; } .proof .pk{ font-size:13px;font-weight:600; color:var(--accent);white-space:nowrap;flex-shrink:0; } .proof p{ font-size:13.5px;color:var(--dim);line-height:1.6;max-width:78ch;margin:0; } .proof b{color:#A8A8B2;font-weight:500} /* horizontal em var(--gut) — 01/08/2026, junto com P0-1: era 20px fixo contra os 22px do resto da página, e a faixa ficava 2px fora do alinhamento de todo o conteúdo acima e abaixo dela. Só o eixo vertical continua sendo decisão própria desta faixa. */ @media(max-width:700px){ .proof .wrap{gap:10px;padding:18px var(--gut)} .proof p{font-size:13px} } .seq-note{ margin-top:42px;padding:24px 26px;border:1px solid var(--line);border-left:2px solid var(--accent); border-radius:0 var(--r-md) var(--r-md) 0;background:var(--bg-raise); font-size:15.5px;color:#B4B4BE;line-height:1.65;max-width:70ch; } /* network box: no Houdini é o retângulo que agrupa nós relacionados, com o rótulo na aresta. Substitui o selo redondo laranja com check — que é vocabulário de checkout, e era redundante com o texto ao lado. */ .phase-banner{ display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; margin:44px 0 -6px;padding:13px 18px; border:1px solid var(--accent-line);border-left-width:2px; background:var(--accent-dim);border-radius:0 var(--r-md) var(--r-md) 0; } .phase-banner b{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--text)} .phase-banner span{font-size:13.5px;color:#C6A488} .mod.grouped .mod-idx::after{top:0} /* quem ensina */ .who{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center} .who-photo{position:relative;aspect-ratio:3/2;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-raise);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10.5px;color:#4A4A4A;letter-spacing:.13em;text-align:center;padding:18px;overflow:hidden} .who-photo video,.who-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .who-photo video{opacity:0;transition:opacity .9s ease} .who-photo video.ready{opacity:1} .who p{font-size:16.5px;color:#B4B4BE;line-height:1.68;margin-bottom:16px;max-width:58ch} .who p:last-child{margin-bottom:0} .fill{color:var(--accent);font-family:var(--mono);font-size:.85em;background:var(--accent-dim);padding:1px 6px;border-radius:var(--r-xs)} /* cta final */ /* sem glow radial atrás do CTA: mancha de gradiente colorida é a assinatura de landing genérica e não carrega informação (§7) */ .final{text-align:center;position:relative;overflow:hidden;padding:clamp(74px,9vw,112px) 0} .final .in{position:relative;z-index:2;max-width:540px;margin:0 auto} .final h2{margin-bottom:14px} .final .lead{margin:0 auto 30px;text-align:center;max-width:46ch} .final .card{max-width:440px;margin:0 auto;text-align:left} footer{border-top:1px solid var(--line);padding:38px 0 46px} .foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--dim)} .foot a{transition:color .25s} .foot a:hover{color:var(--text)} /* min-height 44px — 01/08/2026 (vistoria, P1-8). Medidos a 390px, os três links do rodapé davam 87x21, 132x21 e 46x21 px de alvo, nas 14 páginas. 44px é o mínimo da WCAG 2.5.5 e é o alvo que alguém consegue acertar conferindo Termos ou Privacidade antes de uma compra de R$ 1.200. Só a caixa cresce; tipografia, cor e espaçamento não mudam. */ .foot-links{display:flex;gap:20px;flex-wrap:wrap;align-items:center} .foot-links a{display:inline-flex;align-items:center;min-height:44px} @media(max-width:1000px){ .mod{grid-template-columns:78px 1fr;gap:20px} .mod-node{grid-template-columns:240px 1fr;gap:22px;padding:18px 20px} } @media(max-width:860px){ :root{--gut:22px} /* SCRIM VERTICAL NO MOBILE — 01/08/2026 (vistoria, P0-3). O gradiente de 90deg (linha ~199) foi desenhado para o hero de DUAS colunas do desktop: escurece a metade esquerda, onde mora o texto, e some de vez aos 62% da largura, onde mora o cartão do formulário, que tem fundo sólido próprio. Só que logo abaixo, neste mesmo bloco, o .split vira UMA coluna — o texto passa a ocupar a largura inteira e tudo à direita de 62% fica sobre vídeo cru. Medido escondendo o texto, fotografando o fundo e amostrando o percentil 95 da caixa de cada elemento (docs/vistoria/ contraste-sobre-video.json): .cap-hero .lead 3,50:1 (360px) · 3,54:1 (390px) · 3,58:1 (768px) [mín. 4,5] .cap-hero .badge 3,79:1 (360px) · 4,32:1 (390px) [mín. 4,5] #hero-h1 3,45:1 (768px) [mín. 3,0] Os mesmos elementos em desktop e desktop-largo: 7,2 a 13,4:1 — a falha é exclusiva dos três viewports estreitos. Direção nova: vertical, forte nas duas pontas (badge/h1 em cima, lead/ facts embaixo) e mais aberta no meio, onde o cartão opaco cobre o vídeo de qualquer jeito. É a mesma construção que a /formacao/ já usa (vendas.css:30, `to top`) e que passa em todos os viewports — a correção já existia na casa, só não tinha chegado aqui. */ .cap-hero-media::after{ background:linear-gradient(to bottom, rgba(0,0,0,.80) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.70) 72%, rgba(0,0,0,.86) 100%); } /* mobile: uma coluna só. `display:contents` nas duas colunas achata a hierarquia pra ordenar os filhos individualmente — assim o formulário sobe pra logo depois do h1 (acima da dobra) sem duplicar marcação. */ /* align-items:stretch anula o center do desktop — sem isso a mídia encolhe para a largura intrínseca do