Fundação visual do projeto João Inverno. Tokens, tipografia, espaçamento, componentes
e seções da marca consolidados em um único arquivo. Tema light é padrão;
qualquer <section data-theme="dark"> herda automaticamente
a paleta dark — sem mudar o tema do site inteiro.
Estrutura em três camadas: primitivos (cores, neutrals — nunca usar direto) → semânticos (mapeados por contexto e tema) → componentes (consomem apenas semânticos). Para trocar a marca: editar primitivos.
O atributo data-theme é aplicado em seções (não no
<html>): o designer decide a composição da página.
O :root e [data-theme="light"] compartilham os
mesmos tokens — light é o padrão.
<!-- Light é padrão -->
<body>
<section data-theme="dark"> hero dark </section>
<section> conteúdo light (herda :root) </section>
<section data-theme="dark"> CTA final </section>
</body>
<!-- Página inteira dark -->
<body data-theme="dark"> ... </body>:root,
[data-theme="light"] {
--bg-base: #edeef1;
--bg-surface: #ffffff;
--text-primary: #162030; /* 14.7:1 ✓ */
--text-secondary: #243448;
--accent-base: #1556c4;
--gradient-cta: linear-gradient(90deg, #0046bc, #0071ff);
--shadow-card: 0 2px 12px rgba(0,0,0,0.07), 0 0 0 1px rgba(22,32,48,0.05);
}Paleta primitiva (azul João Inverno + neutrals) e tokens semânticos light. Os mesmos tokens semânticos existem em dark — apenas trocando os valores.
★ brand-500 (#1556c4) é o azul oficial da marca — usado em CTA, brackets, badges, linhas accent.
Sora é a face principal (headings + body). Inter é exclusiva para
CTAs e título do FAQ — usada por dar presença mecânica em interações. Pinyon Script
aparece apenas no logotipo "Inverno". A maior parte dos H1/H2 da marca
mistura weight 400 + weight 700 na mesma linha.
Sora 200 — Light · Logotipo "João"
Sora 400 — Regular · body padrão
Sora 700 — Bold · headlines de destaque
Inter 600 — CTAs e FAQ title
Inverno — Pinyon Script (apenas no logotipo)
96
Introversão não é defeito. É falta de compreensão.
Por que o jeito tradicional não funcionou.
O que você vai aprender
Em quanto tempo eu vejo resultado?
Um método validado para introvertidos transformarem silêncio em presença.
Texto corrido padrão. Sora 400, line-height 1.6 quando o conteúdo é longo, 1.42 em blocos curtos.
› entenda melhor ‹
COMO LIDAR
<span class="jlogo">
<span class="joao">João</span>
<svg class="mark" ...></svg>
<span class="inverno">Inverno</span>
</span>
Grid base de 4px. Use os tokens --space-* via utilitários
(.mt-4, .gap-6, etc.) — nunca valores hardcoded.
Section spacing usa clamp() para responder ao viewport.
--space-14px--space-28px--space-312px--space-416px--space-520px--space-624px--space-832px--space-1040px--space-1248px--space-1664px--space-2080px--section-xs: clamp(2rem, 5vw, 3rem); /* 32–48px */
--section-sm: clamp(3rem, 6vw, 4.5rem); /* 48–72px */
--section-md: clamp(4rem, 8vw, 6rem); /* 64–96px */
--section-lg: clamp(5rem, 10vw, 8rem); /* 80–128px */
--section-xl: clamp(6rem, 12vw, 10rem); /* 96–160px */Inclui raios corner-cut (canto superior-esquerdo reto, demais arredondados) — elementos visuais marcantes da identidade João Inverno (pain-card, checkout-card, tag-pill).
--radius-sm--radius-md--radius-lg--radius-xl--radius-2xl--radius-3xl--radius-full--radius-cut-md--radius-cut-lg
Sombras de uma única camada, calibradas por tema. --shadow-cta-idv
é a sombra característica dos botões da identidade (sutil, com leve outline).
--shadow-sm--shadow-md--shadow-lg--shadow-card--shadow-cta-idv
O CTA principal usa o gradiente azul João Inverno. A versão "premium" do
high-end é envolvida por um wrapper de borda sutil 1.5px #1d4178
com radius 12px e padding 7px — a "dupla-borda" característica.
<a href="#" class="btn-primary">
Quero participar do João Inverno
<svg ...></svg>
</a>
<!-- Variante secundária (gradiente alternativo) -->
<button class="btn-primary btn-primary--alt">Garantir minha vaga</button><span class="cta-wrap">
<a href="#" class="btn-primary">Quero participar...</a>
</span>
Marcador identitário: texto uppercase entre brackets › azuis.
Aparece antes de quase todo título de seção e funciona como "ponteiro de leitura".
<span class="sec-label">
<span class="bracket">›</span> entenda melhor <span class="bracket">‹</span>
</span><span class="tag-pill">Para introvertidos</span>
/* radius: 0 4px 4px 4px (canto superior-esquerdo reto) */<span class="tag-pill tag-pill--rounded">Quem criou este método</span>
/* radius: full | padding: 6px 13px */Cinco famílias visuais — cada uma resolve uma intenção narrativa específica.
Você se sente esgotado em reuniões longas
Mesmo dominando o assunto, depois de 30 minutos de fala alheia sua presença evapora.
Aceita ideias inferiores por evitar conflito
<div class="pain-card">
<svg class="icon" ...></svg>
<div class="body">
<p class="title">Você se sente esgotado em reuniões longas</p>
<p class="desc">Mesmo dominando o assunto, depois de 30 min...</p>
</div>
</div>Três frameworks de presença que não dependem de extroversão — só de timing e clareza.
<div class="curriculum-row">
<span class="curriculum-badge">O que vou aprender</span>
<div>
<h4 class="topic">Como falar em reuniões <strong>sem disputar espaço</strong></h4>
<p class="desc">Três frameworks de presença...</p>
</div>
</div>Não importa o tamanho do grupo — o método protege sua bateria.
Voz sutil pode dominar quando carrega clareza.
+8 horas de conteúdo aplicado e mentoria em grupo
Acesso vitalício às atualizações do programa
Card com header colorido azul em uppercase letter-spacing alto, lista de itens com check. Usado para apresentar formato e diferenciais do programa.
<div class="programa-card">
<div class="ph">FORMATO</div>
<ul>
<li><svg class="ck"></svg> 8 encontros ao vivo</li>
...
</ul>
</div>A seção de conversão tradicional do João Inverno usa fundo azul oficial, label "› garanta sua vaga ‹", headline mista (regular + bold), sub e CTA com dupla-borda.
Card de oferta com glass blur sutil (somente light), preço de/por, checklist 2×2 e badges de segurança. Composição com selo de garantia.
Investimento:
Devolução incondicional
Acordeão CSS-puro com <details>/<summary>.
Ícone + rotaciona 45° para × quando aberto.
Resposta em largura total, alinhada abaixo do título. Acessível por teclado out-of-the-box.
Para quem é o método João Inverno?
Para introvertidos que querem ser percebidos pela profundidade e não por volume — sem precisar fingir ser quem não são.
Em quanto tempo eu vejo resultado?
Os primeiros encontros já trazem clareza sobre os próprios padrões. Resultados consolidados aparecem nas primeiras 4 semanas.
Posso assistir em tempo livre?
Sim. Os encontros ao vivo ficam gravados na plataforma e o acesso é vitalício.
O método funciona para introvertidos que têm dificuldade de liderança?
Sim — a maioria dos alunos relata avanços diretos em presença, escuta ativa e influência sem autoritarismo. O método trabalha com os pontos fortes de quem pensa antes de falar.
<details class="faq-card">
<summary>
<p class="q">Para quem é o método?</p>
<svg class="plus" aria-hidden="true">...</svg>
</summary>
<p class="a">Para introvertidos que...</p>
</details>Inputs, textareas, selects, checkboxes, radios e toggle switches — todos com estados focus / hover / disabled / error / success, contraste WCAG AA e acessíveis por teclado out-of-the-box. Toggle e radios são CSS-only (sem JS).
<div class="form-field">
<label class="label" for="f-email">E-mail</label>
<div class="input-group">
<svg class="input-icon" ...></svg>
<input id="f-email" class="input" type="email"
placeholder="voce@exemplo.com" />
</div>
</div><label class="check">
<input type="checkbox" />
<span class="box">
<svg class="check-icon" ...></svg>
</span>
<span class="label-text">Quero participar...</span>
</label>
<!-- Radio: trocar type e box.radio -->
<label class="check">
<input type="radio" name="plano" />
<span class="box radio"><span class="radio-dot"></span></span>
<span class="label-text">Plano essencial</span>
</label>Use em hero ou rodapé para captura rápida de e-mail.
Marcas visuais identitárias que assinam as seções da marca. São puramente decorativos — não devem competir com o CTA.
Texto rotacionado 90deg com letter-spacing 12px, opacity baixa (0.25 light, 0.35 dark).
Letra "J" gigante em opacity reduzida — usado em pilares, sobre, hero.
Wrapper com radius 24px, overlay azul em mix-blend-mode: hue, glow superior.
SVG inline 100% × 91px, separa seções de cores diferentes. Versão invertida via scaleY(-1).
Catálogo de keyframes, utilitários .anim-*, transições de hover,
sistema scroll-triggered (data-animate), stagger via CSS variable,
skeleton, spinner, loading bar e toast. Tudo respeita
prefers-reduced-motion: reduce.
--duration-xfast: 75ms;
--duration-fast: 150ms;
--duration-base: 250ms; /* padrão para hover/focus */
--duration-slow: 400ms; /* entradas de cena */
--duration-slower: 600ms;
--duration-hero: 800ms;
--delay-1: 100ms; --delay-2: 200ms;
--delay-3: 300ms; --delay-4: 400ms;
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);Cada bloco abaixo aplica um @keyframes diferente. Use .anim-*
para entradas de cena e os infinitos (pulse, float, spin)
com moderação.
<div class="anim-slide-up">Bloco entra de baixo</div>
<div class="anim-slide-up delay-2">Entra 200ms depois</div>
<svg class="anim-spin"> ... </svg>Defina --i em cada filho via style (ou JS) e use
data-stagger no pai. O delay é --stagger-base × --i
(default 80ms).
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<ul data-stagger>
<li style="--i:1">...</li>
<li style="--i:2">...</li>
<li style="--i:3">...</li>
</ul>
/* delay = --stagger-base * --i */data-animateAplique data-animate em qualquer elemento. Um pequeno
IntersectionObserver (no fim do arquivo) adiciona a classe
is-visible quando ele entra no viewport. Variantes:
slide-up (padrão), slide-left, slide-right,
scale, blur, fade.
slide-up (default)
data-animate
slide-left
data-animate="slide-left"
scale
data-animate="scale"
blur
data-animate="blur"
slide-right
data-animate="slide-right"
fade
data-animate="fade"
Role a página até esta seção para ver os elementos entrarem em cena.
.spinner.sm
.spinner
.spinner.lg
.spinner.on-cta dentro do CTA
Loading bar indeterminado:
Sua sessão expira em 5 minutos.
Acompanhe os próximos passos no seu e-mail.
Confirme seu e-mail antes de continuar.
Não foi possível concluir a inscrição. Tente novamente.
O sistema inteiro respeita o setting do usuário. Quando ativo, todas as
animações caem para 0.01ms e elementos com data-animate
ficam imediatamente visíveis (sem entrada de cena).
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
[data-animate] {
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
Tudo dentro deste <section data-theme="dark"> herda os tokens dark.
Os mesmos componentes funcionam — pain-card, programa-card, FAQ, CTA dupla-borda.
Funciona em qualquer seção
Sem precisar duplicar componentes ou criar variantes — os tokens já fazem o trabalho.
Hero dark + dor light + solução dark + sobre dark + final light é um padrão da marca.
Mock de hero com todos os elementos da identidade combinados: section label, tag, headline mista (regular + bold), sub, CTA dupla-borda, pain cards e watermark vertical no canto. Use isso como referência ao montar páginas.
Um método validado para quem prefere o silêncio mas não quer ser ignorado. Sem performances forçadas, sem rituais que esgotam.
Você se sente esgotado em reuniões longas
Mesmo dominando o assunto, depois de 30 min sua presença evapora.
Aceita ideias inferiores por evitar conflito
Esta composição usa apenas tokens semânticos — alterar primitivos atualiza o hero todo.