/* =====================================================================
OpenSeed · folha de estilo da landing (PT e EN usam esta mesma folha)
Ordem: tokens, base, marca, navegação, hero, seções, projetos, contato,
rodapé, barra de ação do celular, ajustes de tela larga, movimento.
Regra geral: o celular é o padrão; a tela larga é a exceção em @media.
===================================================================== */
:root {
--bg: #0a0a0a;
--bg-2: #101010;
--panel: #141414;
--ink: #f4f4f0;
/* Contraste contra --bg: --muted 9,1:1 e --faint 4,9:1, acima do mínimo
4,5:1 de texto pequeno. Não clarear o fundo sem refazer a conta. */
--muted: #a8a8a0;
--faint: #7e7e77;
--line: #232323;
--line-2: #2f2f2f;
--lime: #c6f24e;
--display: "Outfit", system-ui, sans-serif;
--sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
--gut: clamp(20px, 5vw, 64px);
--nav-h: 68px;
--barra-h: 72px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* ---------- ESTADO INICIAL DA ENTRADA ----------
O atributo data-anim é posto no por um script no cabeçalho, antes da
primeira pintura, e só quando a pessoa não pediu menos movimento. Sem isto o
conteúdo aparece, o GSAP zera a opacidade quando termina de baixar e ele
some e volta: no celular, em rede lenta, o piscar é visível.
O mesmo script tira o atributo em 2,5 s como rede de segurança, e o site.js
tira assim que assume o controle. Nenhum caminho deixa a página em branco.
A lista tem que continuar igual a SEL_ENTRADA e SEL_REVELA em site.js.
tools/conferir.js compara as duas e reprova se divergirem.
:where() em vez de :is() para o #nav lá dentro não inflar a especificidade
da regra inteira. */
html[data-anim] :where(#nav, #heroTitulo, .hero .eyebrow, .hero-sub > *, .garantias, .leque-dica, .kard,
.sec-head, .svc, .proj, .proj-vazio, .cta, .faq) {
opacity: 0;
}
/* Só opacidade, nunca transform: o GSAP lê o transform vindo do CSS como
deslocamento em pixels e soma o próprio yPercent em cima, e o título
terminava a entrada 47px abaixo, cortado pela própria máscara. */
html { -webkit-text-size-adjust: 100%; }
body {
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Espaço para a barra de ação fixa do celular não cobrir o fim da página. */
padding-bottom: calc(var(--barra-h) + 12px + env(safe-area-inset-bottom, 0px));
}
a { color: inherit; }
a, button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
::selection { background: var(--lime); color: #0a0a0a; }
:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 3px;
border-radius: 6px;
}
.skip {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--lime); color: #0a0a0a;
padding: 14px 20px; font-weight: 700; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 var(--gut); }
/* A barra é fixa; o alvo de cada âncora precisa parar abaixo dela. */
section[id], main[id], [id^="titulo"] { scroll-margin-top: calc(var(--nav-h) + 16px); }
/* Grão só na tela larga: no celular custa repintura e não se percebe. */
.grain { display: none; }
/* ---------- MARCA ---------- */
.wordmark {
font-family: var(--display); font-weight: 900;
letter-spacing: -.05em; line-height: .82;
text-transform: uppercase; display: inline-block; text-decoration: none;
}
.wordmark .open {
display: block; font-size: .42em; letter-spacing: .14em;
line-height: 1; color: var(--lime); margin-bottom: .12em;
}
.wordmark .seed { display: block; }
/* ---------- RÓTULOS E BOTÕES ---------- */
.eyebrow {
font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
line-height: 1.6; text-transform: uppercase; color: var(--faint);
}
.eyebrow .dot {
display: inline-block; width: 7px; height: 7px; border-radius: 50%;
background: var(--lime); margin-right: 9px; vertical-align: middle;
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
min-height: 50px; padding: 12px 22px; width: 100%;
font-family: var(--sans); font-size: 16px; font-weight: 700;
border-radius: 999px; border: none; text-decoration: none;
cursor: pointer; white-space: nowrap;
transition: transform .3s cubic-bezier(.6, 0, .2, 1), background .25s, border-color .25s;
}
.btn-lime { background: var(--lime); color: #0a0a0a; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn svg { flex: none; }
/* ---------- NAVEGAÇÃO ---------- */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
display: flex; align-items: center; justify-content: space-between;
gap: 12px; min-height: var(--nav-h); padding: 12px var(--gut);
border-bottom: 1px solid transparent;
transition: background .3s ease, border-color .3s ease;
}
.nav.solid, .nav.aberta {
background: rgba(10, 10, 10, .9);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-bottom-color: var(--line);
}
.nav .wordmark { font-size: 22px; padding: 4px 0; }
.nav-dir { display: flex; align-items: center; gap: 8px; }
/* Lista e botão de WhatsApp da barra só existem na tela larga. No celular a
ação principal mora na barra de baixo, e repetir aqui virava três botões
iguais na primeira tela. */
.nav-links { display: none; }
.lang {
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; min-height: 44px; padding: 0 10px;
font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em;
color: var(--muted); text-decoration: none; border-radius: 10px;
border: 1px solid var(--line);
}
.menu-btn {
display: inline-flex; width: 44px; height: 44px; flex: none;
align-items: center; justify-content: center;
background: transparent; border: 1px solid var(--line-2);
border-radius: 12px; color: var(--ink); cursor: pointer;
}
.menu-btn span {
display: block; width: 18px; height: 2px; background: currentColor;
border-radius: 2px; position: relative; transition: background .2s;
}
.menu-btn span::before, .menu-btn span::after {
content: ""; position: absolute; left: 0; width: 18px; height: 2px;
background: var(--ink); border-radius: 2px; transition: transform .25s ease;
}
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
/* O painel fica dentro da nav, então top:100% acompanha a altura real dela. */
.menu-painel {
position: absolute; top: 100%; left: 0; right: 0;
background: rgba(10, 10, 10, .97);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line);
padding: 6px var(--gut) 18px;
}
.menu-painel ul { list-style: none; }
.menu-painel a {
display: flex; align-items: center; min-height: 54px;
font-family: var(--display); font-weight: 700; font-size: 21px;
letter-spacing: -.02em; color: var(--ink); text-decoration: none;
border-bottom: 1px solid var(--line);
}
.menu-painel li:last-child a { border-bottom: none; }
/* ---------- 1. HERO ---------- */
.hero {
position: relative; z-index: 5;
padding: calc(var(--nav-h) + 28px) var(--gut) 28px;
max-width: 1400px; margin: 0 auto;
}
.hero h1 {
font-family: var(--display); font-weight: 900;
letter-spacing: -.045em; line-height: .9; text-transform: uppercase;
margin: 14px 0 0; font-size: clamp(42px, 12.4vw, 132px);
}
.hero h1 .light { color: var(--faint); }
.hero h1 .accent { color: var(--lime); }
.line-mask { display: block; overflow: hidden; padding-bottom: .06em; }
.line-mask > span { display: block; }
.letra { display: inline-block; will-change: transform; }
.hero-sub { position: relative; z-index: 2; margin-top: 18px; }
.hero-sub p { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 44ch; }
.hero-sub p strong { color: var(--ink); font-weight: 700; }
.hero-actions { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; margin-top: 18px; }
/* O caminho secundário não é botão. Duas cápsulas lado a lado disputavam o
mesmo clique e tiravam o peso do verde, que é a única ação que importa
aqui. Vira link: fio apagado parado, fio lime que corre no hover.
min-height mantém o alvo tocável do botão que ele substituiu. */
.link-acao {
position: relative; display: inline-flex; align-items: center; gap: 8px;
min-height: 50px; padding: 0 2px;
font-family: var(--sans); font-size: 16px; font-weight: 700;
color: var(--ink); text-decoration: none; white-space: nowrap;
}
.link-acao::before, .link-acao::after {
content: ""; position: absolute; left: 2px; right: 2px; bottom: 13px; height: 1px;
}
.link-acao::before { background: var(--line-2); }
.link-acao::after {
background: var(--lime); transform: scaleX(0); transform-origin: left;
transition: transform .4s cubic-bezier(.6, 0, .2, 1);
}
.link-acao svg { flex: none; transition: transform .4s cubic-bezier(.6, 0, .2, 1); }
.link-acao:focus-visible::after { transform: scaleX(1); }
/* No celular o WhatsApp está na barra fixa; o hero mostra só o caminho
secundário, senão eram dois botões iguais a dez centímetros um do outro. */
.hero-actions .btn-lime { display: none; }
.garantias {
display: grid; gap: 8px; margin-top: 18px; list-style: none;
}
.garantias li {
display: flex; align-items: center; gap: 8px;
font-size: 14.5px; color: var(--muted);
}
.garantias svg { flex: none; color: var(--lime); }
/* Carrossel de cards. Sangra até a borda da tela e encaixa card a card;
o preenchimento lateral igual ao gutter alinha o primeiro card ao texto. */
.leque-dica {
display: flex; align-items: center; gap: 8px; margin-top: 26px;
font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
text-transform: uppercase; color: var(--faint);
}
.leque-dica::after { content: ""; width: 26px; height: 1px; background: var(--line-2); }
.leque {
display: flex; gap: 12px; list-style: none;
margin: 12px calc(-1 * var(--gut)) 0; padding: 8px var(--gut) 8px;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut);
scrollbar-width: none; -ms-overflow-style: none;
/* Sem isto, ao chegar no último card o gesto continua para o ancestral: no
iOS vira o deslize de voltar página, no Android vira rolagem vertical.
"contain" e não "none": none mata também o efeito de borracha, que é o
que avisa a pessoa de que os cards acabaram. */
overscroll-behavior-inline: contain;
}
.leque::-webkit-scrollbar { display: none; }
/* O li vira caixa flexível para o card esticar até a altura do maior da fila.
Sem isto, "WhatsApp, ERP e pagamento" quebra em duas linhas e aquele card
fica mais alto que os outros quatro, e a fila sai desalinhada. */
.leque > li { flex: none; scroll-snap-align: start; display: flex; }
.kard {
width: min(66vw, 230px); min-height: 108px;
background: var(--panel); border: 1px solid var(--line);
border-radius: 16px; padding: 15px;
display: flex; flex-direction: column; gap: 12px;
transition: border-color .3s, background .3s;
}
.kard .tag {
align-self: flex-start;
font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
text-transform: uppercase; color: var(--lime);
border: 1px solid rgba(198, 242, 78, .3); padding: 5px 9px; border-radius: 999px;
}
.kard .kard-titulo {
font-family: var(--display); font-weight: 700; font-size: 21px;
line-height: 1.05; letter-spacing: -.02em; margin-top: auto;
}
/* ---------- SEÇÕES ---------- */
section { position: relative; z-index: 5; }
.sec-head { padding-top: 64px; }
.sec-head h2 {
font-family: var(--display); font-weight: 900;
font-size: clamp(32px, 9vw, 66px); line-height: .95;
letter-spacing: -.04em; text-transform: uppercase;
margin-top: 12px; padding-bottom: .06em;
}
.sec-head h2 .light { color: var(--faint); }
.sec-head > p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 44ch; }
/* ---------- 2. SERVIÇOS ---------- */
.svc {
display: grid; gap: 1px; background: var(--line);
border: 1px solid var(--line); border-radius: 20px;
overflow: hidden; margin-top: 26px;
}
.svc article {
background: var(--bg-2); padding: 22px;
display: flex; flex-direction: column; gap: 10px;
transition: background .3s;
}
.svc h3 {
font-family: var(--display); font-weight: 900; text-transform: uppercase;
font-size: 22px; line-height: 1; letter-spacing: -.03em; padding-bottom: .05em;
}
.svc p { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.svc .prazo {
font-family: var(--mono); font-size: 12px; color: var(--faint);
letter-spacing: .06em; margin-top: auto; padding-top: 12px;
border-top: 1px solid var(--line);
}
/* Sem borda e sem cápsula: treze caixas arredondadas eram treze objetos
disputando um recado só, e é objeto, não palavra, que faz a página parecer
poluída. */
.chips { display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 6px; }
.chips span { font-family: var(--mono); font-size: 12.5px; color: var(--faint); }
.chips span + span::before { content: "·"; margin-right: 14px; color: var(--line-2); }
/* ---------- 3. PROJETOS ---------- */
.proj-grid { display: grid; gap: 14px; margin-top: 26px; }
.proj {
display: flex; flex-direction: column;
border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
background: var(--bg-2); text-decoration: none;
transition: border-color .3s, transform .35s cubic-bezier(.4, 0, .2, 1);
}
.proj-capa {
aspect-ratio: 16 / 10; position: relative;
background: linear-gradient(135deg, #191919 0%, #0f0f0f 100%);
border-bottom: 1px solid var(--line);
display: grid; place-items: center; overflow: hidden;
}
.proj-capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proj-capa .inicial {
font-family: var(--display); font-weight: 900; font-size: 58px;
color: #2b2b2b; letter-spacing: -.05em; user-select: none;
}
.proj-capa .selo {
position: absolute; top: 12px; left: 12px; z-index: 2;
font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
text-transform: uppercase; color: var(--lime);
background: rgba(10, 10, 10, .85); border: 1px solid rgba(198, 242, 78, .28);
padding: 5px 9px; border-radius: 999px;
}
.proj-corpo { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.proj-corpo h3 { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.1; letter-spacing: -.02em; }
.proj-corpo p { font-size: 15px; line-height: 1.55; color: var(--muted); }
.proj-meta {
font-family: var(--mono); font-size: 12px; color: var(--faint);
letter-spacing: .04em; margin-top: auto; padding-top: 10px;
border-top: 1px solid var(--line); line-height: 1.6;
}
/* Sozinho na grade, ele ocupa a linha inteira em vez de virar um card
estreito ao lado de dois vazios. */
.proj-vazio:only-child { grid-column: 1 / -1; }
.proj-vazio {
display: grid; place-items: center; text-align: center; gap: 6px;
border: 1px dashed var(--line-2); border-radius: 18px;
padding: 28px 20px; color: var(--faint);
font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
text-transform: uppercase; line-height: 1.7;
}
/* ---------- 4. CONTATO ---------- */
.cta {
margin-top: 64px; padding: 34px 24px;
border-radius: 24px; background: var(--lime); color: #0a0a0a;
display: grid; gap: 22px;
}
.cta h2 {
font-family: var(--display); font-weight: 900; text-transform: uppercase;
font-size: clamp(30px, 8.6vw, 68px); line-height: .92;
letter-spacing: -.045em; padding-bottom: .04em;
}
.cta p { font-size: 16px; line-height: 1.55; margin-top: 12px; max-width: 42ch; }
.cta .aside { display: grid; gap: 12px; }
.cta .btn-dark { background: #0a0a0a; color: var(--lime); }
.cta .fine { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; line-height: 1.6; }
/* Telefone e e-mail são links de verdade: precisam de alvo tocável. */
.cta .fine a {
display: inline-flex; align-items: center; min-height: 32px;
text-decoration: underline; text-underline-offset: 3px;
}
.faq { margin-top: 40px; }
.faq h3 {
font-family: var(--display); font-weight: 900; text-transform: uppercase;
font-size: 19px; letter-spacing: -.03em; line-height: 1;
padding-bottom: .05em; margin-bottom: 14px;
}
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
min-height: 56px; padding: 12px 0;
font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ""; flex: none; width: 11px; height: 11px;
border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details > p { font-size: 15.5px; line-height: 1.65; color: var(--muted); max-width: 70ch; padding: 0 0 18px; }
/* ---------- RODAPÉ ---------- */
footer { margin-top: 56px; border-top: 1px solid var(--line); padding: 32px 0 40px; }
.foot-grid { display: grid; gap: 18px; }
footer .wordmark { font-size: 30px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-left: -10px; }
.foot-links a {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
font-size: 15px; color: var(--muted); text-decoration: none; transition: color .25s;
}
.foot-fine { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: .06em; margin-top: 14px; line-height: 1.6; }
/* ---------- BARRA DE AÇÃO (celular) ---------- */
.barra-acao {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(10, 10, 10, .93);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-top: 1px solid var(--line);
transition: transform .3s ease, visibility 0s;
visibility: visible;
}
/* Some quando o botão grande da seção de contato está na tela: dois botões
iguais um em cima do outro não ajudam ninguém. */
/* Só empurrar para fora da tela deixaria o botão focável e anunciado pelo
leitor de tela. A visibilidade cai no fim do deslize, não no começo, para
a saída continuar visível. */
.barra-acao.oculta { transform: translateY(110%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
/* Com o menu aberto numa tela baixa, o último item da lista cai debaixo da
barra fixa e o toque abre o WhatsApp em vez de navegar. A nav e a barra são
irmãs diretas no body, e as duas somem acima de 721px, então a regra não
vaza para o desktop. */
.nav.aberta ~ .barra-acao { transform: translateY(110%); visibility: hidden; }
.barra-acao .btn { min-height: 52px; }
/* O botão redondo flutuante não existe mais: no celular a barra faz o
papel, na tela larga o botão da nav está sempre visível. */
/* =====================================================================
TELA LARGA
===================================================================== */
@media (min-width: 721px) {
:root { --nav-h: 72px; }
body { padding-bottom: 0; font-size: 17px; }
.grain {
display: block; position: fixed; inset: 0; z-index: 100;
pointer-events: none; opacity: .045;
background-image: url("data:image/svg+xml;utf8,");
}
.btn { width: auto; min-height: 46px; font-size: 15px; }
.nav { padding: 14px var(--gut); }
.nav-links { display: flex; gap: 4px; list-style: none; }
.nav-links a {
display: inline-flex; align-items: center; min-height: 44px;
padding: 0 12px; font-size: 14px; font-weight: 500;
color: var(--muted); text-decoration: none; position: relative; transition: color .25s;
}
.nav-links a::after {
content: ""; position: absolute; left: 12px; right: 12px; bottom: 9px;
height: 2px; background: var(--lime); border-radius: 2px;
transform: scaleX(0); transform-origin: left;
transition: transform .35s cubic-bezier(.7, 0, .2, 1);
}
.menu-btn, .menu-painel { display: none; }
.barra-acao { display: none; }
.hero { padding: calc(var(--nav-h) + 54px) var(--gut) 54px; }
.hero h1 { margin-top: 18px; font-size: clamp(64px, 9.4vw, 132px); line-height: .88; }
.hero-sub {
display: grid; grid-template-columns: 1.05fr .95fr;
gap: clamp(20px, 5vw, 60px); align-items: end; margin-top: clamp(24px, 4vw, 42px);
}
.hero-sub p { font-size: clamp(16px, 1.5vw, 19px); }
.hero-actions { margin-top: 0; }
/* Rótulo curto encolhe a cápsula, e a ação principal não pode ser o menor
objeto da dobra. O respiro devolve o peso sem mudar a forma. */
.hero-actions .btn-lime { display: inline-flex; padding: 13px 32px; }
.garantias { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.garantias li { font-size: 13.5px; }
.leque-dica { display: none; }
.leque { margin: clamp(30px, 5vw, 54px) 0 0; padding: 20px 0 8px; gap: 14px; }
/* Na tela larga o leque perde a rolagem, porque vira leque em 3D. Se o card
mantiver largura fixa, os cinco somam mais que o espaço disponível entre
1000 e 1330px e o quinto sai da tela sem jeito de alcançar. A largura
passa a ser o que couber, com teto de 228px.
A medida fica no e não no card: a porcentagem de um filho resolve
contra o pai, e o pai do card é o , cuja largura sai do próprio card.
Isso é circular, e o card colapsava para 40px. No a conta é contra a
largura do leque, que é o que interessa. */
.leque > li { width: min(228px, calc((100% - 4 * 14px) / 5)); }
.kard { width: 100%; min-height: 128px; padding: 18px; }
.sec-head {
display: grid; grid-template-columns: 1.15fr .85fr;
gap: clamp(18px, 4vw, 52px); align-items: end;
padding-top: clamp(66px, 9vw, 116px);
}
.sec-head h2 { font-size: clamp(32px, 5.2vw, 66px); margin-top: 14px; }
.sec-head > p { margin-top: 0; font-size: clamp(15px, 1.4vw, 17.5px); }
.svc article { padding: clamp(22px, 2.8vw, 34px); gap: 12px; }
.svc h3 { font-size: clamp(21px, 2.2vw, 28px); }
.svc p { font-size: 14.5px; }
.proj-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.8vw, 20px); margin-top: clamp(28px, 4vw, 48px); }
.proj-corpo { padding: 18px 18px 20px; }
.proj-corpo p { font-size: 14px; }
.cta {
margin-top: clamp(66px, 9vw, 120px);
padding: clamp(38px, 6vw, 80px) clamp(24px, 5vw, 66px);
grid-template-columns: 1.2fr .8fr; gap: clamp(22px, 4vw, 46px); align-items: center;
}
.cta h2 { font-size: clamp(30px, 5.2vw, 68px); }
.cta p { font-size: clamp(15px, 1.4vw, 17px); }
.cta .aside { justify-items: start; }
.cta .btn-dark { font-size: 16px; padding: 17px 26px; }
.faq { margin-top: clamp(40px, 6vw, 72px); }
.faq h3 { font-size: clamp(19px, 2vw, 24px); margin-bottom: 18px; }
.faq summary { min-height: 60px; font-size: clamp(15.5px, 1.5vw, 17px); }
.faq details > p { font-size: 15px; }
footer { margin-top: clamp(52px, 8vw, 92px); padding: 36px 0 48px; }
.foot-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
footer .wordmark { font-size: 32px; }
.foot-links { margin-left: 0; }
.foot-links a { font-size: 14.5px; }
}
@media (min-width: 900px) {
.svc { grid-template-columns: repeat(3, 1fr); }
.proj-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Leque com profundidade só onde há mouse. No toque é carrossel. */
@media (min-width: 1000px) and (hover: hover) {
.leque { overflow: visible; perspective: 1200px; }
.kard { will-change: transform; }
}
/* Estados de hover só onde existe hover: no toque eles grudam depois do tap. */
@media (hover: hover) {
.btn:hover { transform: translateY(-2px); }
.btn-lime:hover { background: #d5ff63; }
.btn-ghost:hover { border-color: var(--ink); }
.link-acao:hover::after { transform: scaleX(1); }
.link-acao:hover svg { transform: translateX(3px); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.lang:hover { color: var(--ink); border-color: var(--line-2); }
.kard:hover { border-color: var(--line-2); background: #181818; }
.svc article:hover { background: #161616; }
.proj:hover { border-color: var(--line-2); transform: translateY(-4px); }
.foot-links a:hover { color: var(--ink); }
.cta .btn-dark:hover { background: #1a1a1a; }
}
.proj:focus-visible { border-color: var(--line-2); }
/* =====================================================================
PÁGINAS INTERNAS
Sobre, manifesto e privacidade. Mesmos tokens da landing, muito menos
peça: aqui a pessoa veio ler, não veio ser convencida. Sem hero de tela
cheia, sem leque de cards, sem animação de entrada.
===================================================================== */
.pagina { padding-top: calc(var(--nav-h) + 34px); }
.pagina-topo { padding-bottom: 40px; }
.pagina-topo h1 {
font-family: var(--display); font-weight: 900; text-transform: uppercase;
font-size: clamp(30px, 8.5vw, 62px); line-height: .96; letter-spacing: -.04em;
margin-top: 14px; padding-bottom: .06em; max-width: 18ch;
}
.pagina-topo h1 .light { color: var(--faint); }
.pagina-topo > p {
margin-top: 18px; font-size: 17px; line-height: 1.6;
color: var(--muted); max-width: 52ch;
}
/* Cada bloco começa com um fio, que é a única divisória de que a página
precisa. Título pequeno, para não competir com o h1. */
.bloco { padding: 40px 0; border-top: 1px solid var(--line); }
.bloco > h2 {
font-family: var(--display); font-weight: 900; text-transform: uppercase;
font-size: clamp(24px, 5.5vw, 38px); line-height: 1; letter-spacing: -.035em;
padding-bottom: .06em; max-width: 20ch;
}
.bloco > h2 + p { margin-top: 14px; }
.bloco p { font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 62ch; }
.bloco p + p { margin-top: 14px; }
.bloco p strong { color: var(--ink); font-weight: 600; }
.bloco .chips { margin-top: 22px; }
/* O painel de contato pinta o próprio fundo de lima e traz a própria cor de
texto. Sem esta linha, a regra .bloco p acima o deixa cinza sobre lima:
1,85:1, contra o mínimo de 4,5:1. */
.bloco .cta p, .bloco .cta .fine a { color: inherit; }
/* Coluna de leitura corrida, para a privacidade e o que mais vier. */
.prosa { max-width: 68ch; }
.prosa h2 {
font-family: var(--display); font-weight: 900; text-transform: uppercase;
font-size: clamp(21px, 4.5vw, 28px); line-height: 1.05; letter-spacing: -.03em;
margin-top: 40px; padding-bottom: .06em;
}
.prosa h2:first-child { margin-top: 0; }
.prosa p, .prosa li { font-size: 16px; line-height: 1.7; color: var(--muted); }
.prosa p { margin-top: 14px; }
.prosa strong { color: var(--ink); font-weight: 600; }
.prosa ul { list-style: none; margin-top: 16px; display: grid; gap: 10px; }
.prosa li { padding-left: 20px; position: relative; }
.prosa li::before { content: "+"; position: absolute; left: 0; color: var(--lime); }
/* Padding vertical num elemento em linha cresce a area de toque sem mexer na
altura da linha: 21px viram 25px, acima do minimo de 24 do WCAG 2.5.8.
A excecao de link dentro de frase se aplicaria de qualquer jeito, mas o
polegar nao le a norma. */
.prosa a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding-block: 2px; }
/* Comparação de dois lados. No celular vira uma coluna, e o lado que
interessa fica embaixo, que é onde o polegar para. */
/* grid-auto-rows: 1fr deixa os dois lados com a mesma altura, empilhados no
celular e lado a lado na tela larga. Comparação com blocos de tamanhos
diferentes sugere que um lado tem mais peso, o que não é o caso. */
.duelo {
display: grid; grid-auto-rows: 1fr; gap: 1px;
background: var(--line); border: 1px solid var(--line);
border-radius: 20px; overflow: hidden; margin-top: 26px;
}
.duelo > div { background: var(--bg-2); padding: 24px; }
.duelo .nosso { background: var(--panel); }
.duelo .selo {
font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
text-transform: uppercase; color: var(--faint);
}
.duelo .nosso .selo { color: var(--lime); }
.duelo h3 {
font-family: var(--display); font-weight: 900; text-transform: uppercase;
font-size: 20px; line-height: 1.05; letter-spacing: -.03em;
margin-top: 10px; padding-bottom: .05em;
}
.duelo ul { list-style: none; margin-top: 16px; display: grid; gap: 9px; }
.duelo li { font-size: 15.5px; line-height: 1.5; color: var(--muted); padding-left: 20px; position: relative; }
/* Sinal de menos comum, não meia-risca: risca e travessão estão fora em todo
projeto deste repositório. */
.duelo li::before { content: "-"; position: absolute; left: 0; color: var(--faint); }
.duelo .nosso li::before { content: "+"; color: var(--lime); }
@media (min-width: 721px) {
.pagina { padding-top: calc(var(--nav-h) + 56px); }
.pagina-topo { padding-bottom: 56px; }
.pagina-topo > p { font-size: 18px; }
.bloco { padding: 56px 0; }
.duelo { grid-template-columns: 1fr 1fr; }
.duelo > div { padding: 32px; }
}
/* Sem movimento: nada da página depende de animação para aparecer. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; scroll-behavior: auto !important;
}
}