/* =====================================================================
LM — paper.css · direção "pôster impresso" (travada em 17/09/2026)
É um TEMA, não o CSS de uma página: escopado em body.theme-paper e
carregado por qualquer rota que declare "theme": "paper" no build.
Hoje: home e trajetória. Projetos e Como trabalho seguem no editorial
escuro de style.css.
ARMADILHA DESTE REPO, vale para toda seção nova aqui: style.css tem
`main > section:not(.hero) + section { padding-top: 0 }`, especificidade
(0,1,3). Um seletor de classe solto perde em silêncio. Escopar sempre em
body.theme-paper, que dá (0,2,1) e ganha.
===================================================================== */
/* ---------- tokens da direção ----------
Redefinidos no próprio , então cascateiam para tudo que style.css
já desenha com var(--bg) / var(--ink) / var(--accent). */
body.theme-paper {
--bg: #f4f1ea;
--bg-raise: #eae5d9;
--ink: #0a0a0a;
--ink-dim: #55524b;
--line: rgba(10, 10, 10, 0.22);
--line-soft: rgba(10, 10, 10, 0.1);
--accent: #ff3b14;
/* O vermelhão puro só tem 3,16:1 sobre o papel: serve de PREENCHIMENTO e
de texto grande, nunca de texto pequeno. Para texto pequeno em cima do
papel existe este segundo vermelho, medido em 5,04:1. Sobre o preto da
faixa o vermelhão dá 5,55:1 e continua valendo. */
--accent-ink: #c62709;
--band: #0a0a0a;
--font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Archivo', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Cada linha do título tem a SUA escala, e os dois números foram medidos
no browser (Archivo 900, tracking -0.035em, wrap de 1320px), não no olho.
"CONSTRUINDO" tem 11 caracteres e "O INESQUECÍVEL." tem 15, então uma
escala única faz uma das duas sobrar. O valor da linha 2 já desconta os
paddings do bloco vermelho.
Medido em 17/09/2026 para "CONSTRUO SOFTWARE / PARA O MUNDO REAL.".
Aqui a linha 2 é MAIOR que a linha 1, porque a linha 1 tem mais
caracteres e por isso satura a largura antes.
REMEDIR NO BROWSER SEMPRE QUE A COPY DO TÍTULO MUDAR. */
--size-display-1: clamp(1.5rem, 7.4vw, 6.8rem);
--size-display-2: clamp(1.6rem, 7.88vw, 7.1rem);
--size-title: clamp(1.9rem, 4.4vw, 3.4rem);
--size-label: 0.68rem;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
}
body.theme-paper ::selection { background: var(--accent); color: #fff; }
/* no papel o polegar é tinta em vez do fio claro do tema escuro; canto reto
para não brigar com o registro de cartaz, que não tem canto arredondado */
body.theme-paper { scrollbar-color: rgba(10, 10, 10, 0.28) transparent; }
body.theme-paper ::-webkit-scrollbar-thumb {
background: rgba(10, 10, 10, 0.28);
background-clip: content-box;
border-radius: 0;
}
body.theme-paper ::-webkit-scrollbar-thumb:hover {
background: rgba(10, 10, 10, 0.55);
background-clip: content-box;
}
/* grão: no escuro era ruído claro, no papel precisa ser tinta */
body.theme-paper .grain {
opacity: 0.16;
mix-blend-mode: multiply;
}
/* ---------- etiquetas: o trabalho do mono ---------- */
body.theme-paper .label {
font-family: var(--font-mono);
font-size: var(--size-label);
font-weight: 400;
letter-spacing: 0.1em;
color: var(--ink-dim);
}
body.theme-paper .label__accent { color: var(--accent); }
/* ---------- nav ---------- */
body.theme-paper .nav.is-scrolled {
background: color-mix(in srgb, var(--bg) 88%, transparent);
border-bottom-color: var(--line);
}
body.theme-paper .nav__brand {
font-family: var(--font-display);
font-weight: 900;
letter-spacing: -0.02em;
}
body.theme-paper .nav__pill {
border-radius: 0;
border: 1px solid var(--line);
background: transparent;
}
body.theme-paper .nav__tab {
border-radius: 0;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.theme-paper .nav__tab.is-active {
background: var(--ink);
color: var(--bg);
}
body.theme-paper .nav__cta,
body.theme-paper .nav__menu {
border-radius: 0;
border: 1px solid var(--ink);
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.theme-paper .nav__cta:hover {
background: var(--accent-ink);
border-color: var(--accent-ink);
color: #fff;
}
body.theme-paper .nav__cta:hover .nav__cta-dot { background: #fff; }
body.theme-paper .menu { background: var(--bg); }
body.theme-paper .menu__link {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.02em;
}
body.theme-paper .menu__link:hover,
body.theme-paper .menu__link:active em { font-style: normal; color: var(--accent-ink); }
body.theme-paper .menu__num { font-family: var(--font-mono); }
/* ---------- hero ---------- */
/* 100svh (não vh): no iOS a barra do Safari entra na conta do vh e empurra o
pé da hero para fora. svh é a altura MENOR, então nada some.
A primeira tela precisa terminar exatamente aqui: com a hero menor, a faixa
de números espiava pela dobra AINDA ESCONDIDA pelo reveal, e o usuário via
uma tarja preta vazia. */
body.theme-paper .hero {
min-height: 100svh;
align-items: stretch;
padding-block: clamp(6rem, 13vh, 8.5rem) clamp(1.5rem, 4vh, 2.5rem);
}
body.theme-paper .hero::before { content: none; } /* o wash roxo era do tema escuro */
/* NÃO usar flex:1 aqui: o .hero é um flex ROW, então flex-grow cresce na
horizontal e come as margens laterais do .wrap. Quem estica na vertical é
o align-items:stretch do pai; aqui só o margin-top:auto do pé é necessário. */
body.theme-paper .hero .wrap {
display: flex;
flex-direction: column;
}
body.theme-paper .hero__top {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: baseline;
gap: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--ink);
}
body.theme-paper .hero__top-mid { text-align: center; }
body.theme-paper .hero__top .label:last-child { text-align: right; }
body.theme-paper .hero__title {
font-family: var(--font-display);
font-size: var(--size-display-1);
font-weight: 900;
line-height: 0.88;
letter-spacing: -0.035em;
text-transform: uppercase;
/* margin-block:auto divide a folga da primeira tela em DUAS respirações
iguais, acima e abaixo do título. Empurrar só o pé para o fim da tela
junta toda a sobra num vão só, e um vão só o olho lê como buraco. */
margin-block: auto;
padding-top: clamp(0.6rem, 2vh, 1.4rem);
}
body.theme-paper .hero__line { display: block; }
/* a linha 2 é a que carrega o bloco: o texto preto mede o que mede e o
bloco vermelho toma TODO o resto da largura, até a margem direita. */
body.theme-paper .hero__line--mark {
font-size: var(--size-display-2);
display: flex;
align-items: stretch;
gap: 0;
/* O bloco vermelho é dimensionado pelo GLIFO, não pelo line-box: com a
altura do line-box (0.88 do h1) o acento do "Í" saía por cima e a
cauda do "Q" por baixo — e, em texto cor de papel, o que sai do bloco
simplesmente some. Daí line-height 1 + padding no bloco, e o alinhamento
central para o "O IN" preto acompanhar a caixa mais alta. */
line-height: 1;
align-items: center;
/* puxa de volta o padding superior do bloco, senão as duas linhas do
título abrem uma folga que o cartaz não tem */
margin-top: -0.17em;
}
body.theme-paper .hero__plain { flex: 0 0 auto; }
/* o bloco veste a palavra inteira e para onde ela para. flex:0 0 auto, não
flex:1 — se ele esticasse até a margem sobraria vermelho vazio, e foi
justamente essa sobra que fez nascer o quadrado decorativo que saiu daqui. */
/* papel sobre vermelhão dá 3,16:1, acima do piso 3:1 de TEXTO GRANDE e só
por isso passa. Se alguém diminuir --size-display-2 abaixo de 24px, este
bloco deixa de ser texto grande e reprova: remedir antes de encolher. */
body.theme-paper .hero__mark {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
/* AO APLICAR TEXTURA DE PAPEL AQUI, a regra é medida, não estética:
creme sobre vermelhão dá 3,16:1 e só passa por ser texto grande (piso 3).
A margem é de 5%, então a textura só pode ESCURECER — `background-blend-mode:
multiply` com o arquivo remapeado para a faixa ~216..252. Assim o pior caso
vira 3,33:1 e o melhor 4,28:1, ambos acima de hoje.
`overlay` e `screen` clareiam pixels e REPROVAM. Medido em 17/09/2026. */
background: var(--accent);
color: var(--bg);
padding: 0.16em 0.14em;
white-space: nowrap;
}
/* O fio em cima amarra o pé ao cabeçalho do cartaz. A etiqueta fica ACIMA
do parágrafo, não ao lado: ao lado ela apertava a medida do texto e os
botões não tinham com que alinhar à esquerda. */
body.theme-paper .hero__foot {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, auto);
align-items: start;
gap: clamp(1.5rem, 4vw, 3rem);
margin-top: auto;
padding-top: clamp(1.1rem, 3vh, 1.8rem);
border-top: 1px solid var(--ink);
}
body.theme-paper .hero__col--actions { justify-self: end; text-align: right; }
body.theme-paper .hero__sub {
margin-top: 0.7rem;
text-wrap: pretty;
max-width: 54ch;
color: var(--ink-dim);
font-size: 0.95rem;
line-height: 1.55;
text-wrap: pretty;
}
/* ---------- botões ---------- */
body.theme-paper .hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.7rem;
margin-top: 0.7rem;
}
body.theme-paper .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px; /* alvo de toque WCAG 2.2 */
padding: 0.7rem 1.4rem;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid var(--ink);
transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
body.theme-paper .btn--solid { background: var(--ink); color: var(--bg); }
body.theme-paper .btn--solid:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
body.theme-paper .btn--ghost:hover { background: var(--ink); color: var(--bg); }
/* ---------- faixa de números (a EMENDA entre hero e trabalho) ----------
Regra de `panel-stack-page-system-01`: as placas ENCOSTAM, e a segunda cor
mora na emenda, não dentro de uma seção. Com creme igual nos quatro lados o
painel virava ilha: o olho lia duas formas, não uma. Sem padding na seção,
ele toca o creme da hero em cima e o do trabalho embaixo, e o creme corre
contínuo pelas duas laterais. É isso que faz a ponte, não o enfeite. */
body.theme-paper .band { padding-block: 0; }
body.theme-paper .band__panel {
/* AO APLICAR TEXTURA DE PAPEL AQUI, o teto do pixel mais claro é #303030,
calculado e não chutado: acima disso o vermelhão dos numerais cai abaixo
de 3:1. O piso é 3 e não 4,5 porque o vermelho só pinta numeral de 41 a
86px (texto grande); o texto pequeno do painel são as legendas, que são
cor de papel e sobram de contraste.
E a amplitude importa tanto quanto o teto: uma versão em 18 níveis passou
no contraste e era INVISÍVEL na tela. 40 níveis (#050505..#2d2d2d) é o
ponto em que dá para ver e ainda sobra margem. Medido em 17/09/2026. */
background-color: var(--band);
color: var(--bg);
padding: clamp(2.4rem, 6vh, 3.6rem) clamp(1rem, 3vw, 2.5rem);
}
body.theme-paper .band__inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
body.theme-paper .band__stat { text-align: center; padding-inline: 1rem; }
body.theme-paper .band__stat + .band__stat { border-left: 1px solid rgba(244, 241, 234, 0.28); }
body.theme-paper .band__stat b {
display: block;
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(2.6rem, 7vw, 5.4rem);
line-height: 0.86;
letter-spacing: -0.045em;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
body.theme-paper .band__stat span {
display: block;
margin-top: 0.9rem;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(244, 241, 234, 0.72);
}
/* ---------- selected work ---------- */
body.theme-paper .work { padding-block: clamp(2.2rem, 5.5vh, 3.4rem) clamp(3.5rem, 9vh, 6rem); }
body.theme-paper .work__head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
}
body.theme-paper .work__title {
font-family: var(--font-display);
font-weight: 900;
font-size: var(--size-title);
line-height: 1;
letter-spacing: -0.03em;
text-transform: uppercase;
}
body.theme-paper .work__all {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-bottom: 1px solid var(--ink);
padding-bottom: 0.3rem;
transition: color 0.2s ease, border-color 0.2s ease;
}
body.theme-paper .work__all:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
/* ícone, não o glifo "→": na Archivo a seta sai com peso e inclinação de
texto e destoa de tudo que é desenhado na página */
body.theme-paper .work__all-arrow {
width: 15px; height: 15px; flex-shrink: 0;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
body.theme-paper .work__all:hover .work__all-arrow { transform: translateX(4px); }
body.theme-paper .work__grid {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1rem, 2.2vw, 1.6rem);
}
body.theme-paper .work__lead {
max-width: 58ch;
margin-top: -0.4rem;
margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
color: var(--ink-dim);
font-size: 0.95rem;
line-height: 1.55;
text-wrap: pretty;
}
body.theme-paper .card__link { display: block; }
/* Placa tipográfica para projeto SEM imagem. Não é enfeite: é a alternativa
honesta a inventar um screenshot. Mesma proporção e moldura do card com
foto, então a fileira não desalinha. Trocar por ![]()
quando houver print. */
body.theme-paper .card__plate {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 9;
border: 1px solid var(--ink);
background: var(--ink);
padding: 1rem;
text-align: center;
}
body.theme-paper .card__plate--alt { background: var(--accent); }
body.theme-paper .card__plate span {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(0.95rem, 1.5vw, 1.3rem);
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--bg);
}
body.theme-paper .card__client {
display: block;
margin-top: 0.3rem;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.05em;
color: var(--accent-ink);
}
body.theme-paper .card__num {
display: block;
font-family: var(--font-display);
font-weight: 900;
font-size: 1.15rem;
color: var(--accent-ink);
margin-bottom: 0.5rem;
}
body.theme-paper .card__frame {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 1px solid var(--ink);
background: var(--bg-raise);
}
body.theme-paper .card__frame img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.06);
transition: filter 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
body.theme-paper .card__link:hover .card__frame img,
body.theme-paper .card__link:focus-visible .card__frame img {
filter: grayscale(0) contrast(1);
transform: scale(1.03);
}
body.theme-paper .card__name {
display: block;
margin-top: 0.8rem;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1rem, 1.5vw, 1.25rem);
letter-spacing: -0.01em;
text-transform: uppercase;
transition: color 0.2s ease;
}
body.theme-paper .card__link:hover .card__name { color: var(--accent-ink); }
body.theme-paper .card__meta {
display: block;
margin-top: 0.15rem;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.05em;
color: var(--ink-dim);
}
/* ---------- quem é ---------- */
body.theme-paper .about {
padding-block: clamp(3.5rem, 9vh, 6rem);
border-top: 1px solid var(--line);
}
body.theme-paper .about__lead {
margin-top: 1rem;
max-width: 30ch;
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(1.7rem, 4.6vw, 3.8rem);
line-height: 1.02;
letter-spacing: -0.03em;
text-wrap: balance;
}
body.theme-paper .about__lead em { font-style: normal; color: var(--accent); }
/* REGRA DA PÁGINA: declaração grande atravessa a largura e o texto de apoio
desce em COLUNAS. Declaração numa coluna e texto na outra deixa sempre um
vão, porque as duas alturas nunca coincidem. */
body.theme-paper .about__cols,
body.theme-paper .manifesto__cols {
display: grid;
gap: clamp(1.5rem, 3.5vw, 3rem);
margin-top: clamp(2rem, 5vh, 3.2rem);
padding-top: clamp(1.2rem, 3vh, 1.8rem);
border-top: 1px solid var(--line);
}
body.theme-paper .about__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.theme-paper .manifesto__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.theme-paper .about__cols p,
body.theme-paper .manifesto__cols p {
font-size: 0.95rem;
line-height: 1.6;
text-wrap: pretty;
}
body.theme-paper .about__cols p { color: var(--ink-dim); }
body.theme-paper .manifesto__cols {
border-top-color: rgba(244, 241, 234, 0.3);
max-width: none;
margin-left: 0;
}
body.theme-paper .manifesto__cols p { color: rgba(244, 241, 234, 0.82); }
/* ---------- capacidades ----------
Linhas com fio, na mesma gramática dos cards. Numeradas porque
a página inteira numera (01/ nos projetos), e escaneáveis: o leitor acha o
que procura sem ler parágrafo. */
body.theme-paper .caps {
list-style: none;
margin-top: clamp(1.5rem, 4vh, 2.4rem);
}
body.theme-paper .cap {
display: grid;
grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.1fr);
align-items: start;
gap: clamp(1rem, 2.5vw, 2rem);
padding-block: clamp(1.1rem, 2.8vh, 1.7rem);
border-top: 1px solid var(--line);
}
body.theme-paper .cap:last-child { border-bottom: 1px solid var(--line); }
body.theme-paper .cap__num {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
color: var(--accent-ink);
padding-top: 0.35rem;
}
body.theme-paper .cap__name {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.05rem, 1.6vw, 1.35rem);
letter-spacing: -0.015em;
text-transform: uppercase;
line-height: 1.15;
}
body.theme-paper .cap__desc {
font-size: 0.92rem;
line-height: 1.5;
color: var(--ink-dim);
text-wrap: pretty;
}
body.theme-paper .cap__stack {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.05em;
line-height: 1.6;
color: var(--ink-dim);
text-align: right;
}
/* ---------- marcas ---------- */
body.theme-paper .brands {
padding-block: clamp(3rem, 7vh, 4.5rem);
border-top: 1px solid var(--line);
}
body.theme-paper .brands__row + .brands__row { margin-top: clamp(2.5rem, 6vh, 4rem); }
body.theme-paper .brands__title {
display: block;
text-align: center;
margin-bottom: clamp(1.2rem, 3vh, 1.8rem);
}
/* auto-fit resolve as duas fileiras sem media query: as 10 marcas cabem numa
linha no desktop e quebram sozinhas conforme a tela encolhe. */
body.theme-paper .brands__grid {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
gap: clamp(1.2rem, 2.5vw, 2rem);
align-items: center;
}
body.theme-paper .brands__item {
display: flex;
align-items: center;
justify-content: center;
min-height: 34px;
}
body.theme-paper .brands__item img {
max-width: 100%;
height: clamp(20px, 1.9vw, 26px);
width: auto;
object-fit: contain;
filter: grayscale(1) brightness(0);
opacity: 0.6;
transition: opacity 0.3s ease;
}
body.theme-paper .brands__item:hover img { opacity: 1; }
/* Produto próprio é assinatura, não logo de cliente: maior e mais presente.
Os três ficam JUNTOS e centrados na largura, não espalhados pelas pontas:
com space-between, três itens viram um na esquerda, um no meio e um na
direita, e o grupo deixa de ser lido como um conjunto. */
body.theme-paper .brands__grid--own {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: clamp(2.5rem, 7vw, 6rem);
}
/* 44px nos três: dois deles envolvem um com alvo de toque de 44px e o
terceiro não tem link, então sem isto o Compare Aqui assenta 10px acima */
body.theme-paper .brands__grid--own .brands__item {
justify-content: center;
min-height: 44px;
}
body.theme-paper .brands__grid--own img {
height: clamp(24px, 2.4vw, 34px);
opacity: 0.88;
}
/* alvo de toque: o logo sozinho pode ficar abaixo de 24px de altura */
body.theme-paper .brands__link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: 0.2rem;
transition: opacity 0.25s ease;
}
body.theme-paper .brands__link:hover img { opacity: 1; }
/* ---------- manifesto sobre IA ----------
Único bloco escuro entre a faixa de números e o fechamento. Existe para
separar "usa IA" de "usa IA com critério", que é o argumento comercial. */
body.theme-paper .manifesto {
background: var(--band);
color: var(--bg);
padding-top: clamp(3rem, 8vh, 5rem);
padding-bottom: clamp(3rem, 8vh, 5rem);
}
body.theme-paper .manifesto .label { color: rgba(244, 241, 234, 0.7); }
body.theme-paper .manifesto__title {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(1.7rem, 4.4vw, 3.6rem);
line-height: 1.02;
letter-spacing: -0.03em;
text-transform: uppercase;
max-width: 30ch;
margin-top: 1rem;
}
body.theme-paper .manifesto__title span { display: block; }
body.theme-paper .manifesto__title em { font-style: normal; color: var(--accent); }
/* ---------- marcas (faixa em marquee) ---------- */
body.theme-paper .brands {
padding-block: clamp(3rem, 7vh, 4.5rem);
border-top: 1px solid var(--line);
}
body.theme-paper .brands__title { display: block; text-align: center; }
body.theme-paper .collab__band {
margin-top: clamp(1.4rem, 3.5vh, 2.2rem);
border-top: 0;
padding-block: clamp(1rem, 2.5vh, 1.6rem);
}
/* NÃO usar brightness(0) aqui. Ele força todo pixel opaco a preto e destrói
qualquer logo que dependa de contraste INTERNO: Claro (círculo com o nome
vazado em branco), Seara e Itaú viravam mancha preta sólida e ficavam
irreconhecíveis. grayscale + contraste + brightness parcial escurece a
tinta e preserva o vazado. */
/* CAIXA de tamanho fixo, não altura fixa. Só a altura fazia o wordmark largo
(O Boticário, 7:1) render 255px ao lado de um símbolo quadrado de 33px.
Com a caixa, cada marca ocupa o mesmo espaço óptico e o object-fit resolve
a proporção de cada uma. */
body.theme-paper .collab__brand {
width: clamp(104px, 10vw, 150px);
height: clamp(30px, 2.8vw, 40px);
padding-inline: clamp(1rem, 2.2vw, 2rem);
box-sizing: content-box;
}
body.theme-paper .collab__brand img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
margin-inline: auto;
object-fit: contain;
filter: grayscale(1) contrast(1.15) brightness(0.45);
opacity: 0.85;
transition: filter 0.3s ease, opacity 0.3s ease;
}
body.theme-paper .collab__brand:hover img {
filter: grayscale(0);
opacity: 1;
}
/* ---------- produtos próprios ---------- */
body.theme-paper .products {
padding-block: clamp(3.5rem, 9vh, 6rem);
border-top: 1px solid var(--line);
}
body.theme-paper .products__title {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(1.6rem, 3.5vw, 2.9rem);
line-height: 1.04;
letter-spacing: -0.03em;
text-transform: uppercase;
margin-top: 1rem;
/* sem max-width apertada: com 24ch a segunda linha quebrava e sobrava
"EXISTISSE." sozinha numa terceira, o mesmo defeito do manifesto */
}
body.theme-paper .products__title span { display: block; }
body.theme-paper .products__title em { font-style: normal; color: var(--accent); }
body.theme-paper .products__grid {
list-style: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.5rem, 4vw, 3rem);
margin-top: clamp(2.2rem, 6vh, 3.6rem);
}
body.theme-paper .product {
border-top: 1px solid var(--ink);
padding-top: clamp(1rem, 2.5vh, 1.4rem);
}
body.theme-paper .product img {
height: clamp(22px, 2.2vw, 30px);
width: auto;
object-fit: contain;
object-position: left center;
}
body.theme-paper .product__link {
display: inline-flex;
align-items: center;
min-height: 44px; /* alvo de toque */
}
body.theme-paper .product__name {
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(1.1rem, 1.8vw, 1.5rem);
letter-spacing: -0.02em;
text-transform: uppercase;
}
body.theme-paper .product__desc {
margin-top: 0.5rem;
color: var(--ink-dim);
font-size: 0.92rem;
line-height: 1.55;
text-wrap: pretty;
}
/* ---------- pitch do fechamento ---------- */
body.theme-paper .closer__pitch {
max-width: 52ch;
font-size: 0.98rem;
line-height: 1.6;
color: rgba(244, 241, 234, 0.82);
text-wrap: pretty;
}
/* ==========================================================================
IDENTIDADE DA TRAJETÓRIA
A página fala de TEMPO, e nenhuma seção da home fala. Por isso ela não
repete o bloco vermelho nem a malha chapada de linhas: ganha tipo em
contorno, um fio do tempo de verdade e cartões nas certificações.
Mesmo sistema (papel, tinta, fio, mono), leitura diferente.
========================================================================== */
/* ---------- título em contorno ---------- */
body.theme-paper .hero--page { min-height: auto; }
body.theme-paper .hero--page .hero__title { margin-block: clamp(1.5rem, 5vh, 3rem); }
body.theme-paper .hero__outline {
-webkit-text-stroke: 2px var(--ink);
color: transparent;
/* paint-order faz o traço ficar ATRÁS do preenchimento; sem ele o stroke
come metade da haste da letra e o peso 900 vira 600 aos olhos */
paint-order: stroke fill;
}
@media (max-width: 640px) {
body.theme-paper .hero__outline { -webkit-text-stroke-width: 1.2px; }
}
/* ---------- a linha do tempo ----------
Um fio vertical contínuo com o ano cravado nele. É o que separa esta página
de uma lista: aqui a ordem cronológica é visível, não só declarada. */
body.theme-paper .track {
padding-block: clamp(3rem, 8vh, 5rem);
border-top: 1px solid var(--line);
}
body.theme-paper .journey {
list-style: none;
position: relative;
margin-top: clamp(1.8rem, 4.5vh, 2.8rem);
padding-left: clamp(4.5rem, 9vw, 8rem);
}
/* o fio do tempo */
body.theme-paper .journey::before {
content: '';
position: absolute;
left: clamp(4.5rem, 9vw, 8rem);
top: 0.6rem;
bottom: 2.4rem;
width: 1px;
background: var(--line);
}
/* o marcador de "hoje" fecha o fio embaixo */
body.theme-paper .journey::after {
content: 'hoje';
position: absolute;
left: clamp(4.5rem, 9vw, 8rem);
bottom: 0;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-ink);
background: var(--bg);
padding-block: 0.3rem;
}
body.theme-paper .journey__item {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
align-items: start;
gap: clamp(1rem, 2.5vw, 2.5rem);
padding: 0 0 clamp(2rem, 5vh, 3rem) clamp(1.6rem, 3vw, 2.6rem);
}
/* o ponto cravado no fio */
body.theme-paper .journey__item::before {
content: '';
position: absolute;
left: 0;
top: 0.75rem;
width: 9px;
height: 9px;
transform: translateX(-50%);
background: var(--accent);
border-radius: 50%;
}
/* o ano sai da coluna e vira a marcação do fio, em display grande:
numa página sobre tempo, o ano é o protagonista, não uma etiqueta */
body.theme-paper .journey__year {
position: absolute;
right: calc(100% + clamp(0.8rem, 2vw, 1.6rem));
top: 0;
width: max-content;
text-align: right;
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(0.95rem, 1.5vw, 1.25rem);
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--ink);
}
body.theme-paper .journey__role {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.1rem, 1.9vw, 1.6rem);
letter-spacing: -0.02em;
text-transform: uppercase;
line-height: 1.1;
}
body.theme-paper .journey__place {
display: block;
margin-top: 0.4rem;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.05em;
text-transform: none;
font-weight: 400;
color: var(--ink-dim);
}
body.theme-paper .journey__desc {
font-size: 0.92rem;
line-height: 1.6;
color: var(--ink-dim);
text-wrap: pretty;
}
body.theme-paper .journey__desc strong { color: var(--ink); font-weight: 700; }
/* ---------- formação ---------- */
body.theme-paper .education {
padding-block: clamp(3rem, 8vh, 5rem);
border-top: 1px solid var(--line);
}
body.theme-paper .education__list {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.5rem, 4vw, 3rem);
margin-top: clamp(1.4rem, 3.5vh, 2.2rem);
}
body.theme-paper .education__item {
display: grid;
grid-template-columns: 2.5rem minmax(0, 1fr);
gap: 0.3rem 1rem;
padding-top: clamp(1rem, 2.5vh, 1.4rem);
border-top: 1px solid var(--ink);
}
body.theme-paper .education__num {
grid-row: 1 / span 2;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
color: var(--accent-ink);
padding-top: 0.2rem;
}
body.theme-paper .education__name {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
letter-spacing: -0.015em;
text-transform: uppercase;
}
body.theme-paper .education__desc {
font-size: 0.92rem;
line-height: 1.55;
color: var(--ink-dim);
}
/* ---------- certificações em CARTÕES ----------
Grade, não linhas: a home já é feita de linhas, e repetir a mesma textura
aqui é o que faria a página parecer a mesma página com outro texto. */
/* O padding vive SÓ aqui. A seção era .about, que já paga padding no tema, e
o .certband pagava de novo: dava um vão enorme entre o fio e o rótulo. */
body.theme-paper .certs {
padding-block: clamp(3rem, 8vh, 5rem);
border-top: 1px solid var(--line);
margin-top: 0;
}
/* o .certband herda margin-top: 54px do style.css, que somava ao padding da
seção e empurrava o rótulo 127px para baixo do fio */
body.theme-paper .certband { margin-top: 0; }
body.theme-paper .certband__head {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: baseline;
gap: clamp(1rem, 3vw, 2.5rem);
padding-bottom: clamp(1.2rem, 3vh, 1.8rem);
border-bottom: 1px solid var(--ink);
margin-bottom: clamp(1.6rem, 4vh, 2.4rem);
}
body.theme-paper .certband__note {
max-width: 54ch;
font-size: 0.92rem;
line-height: 1.55;
color: var(--ink-dim);
}
body.theme-paper .certband__count { color: var(--accent-ink); white-space: nowrap; }
body.theme-paper .certband__grid {
list-style: none;
display: grid;
/* 228px, não 260: com 260 cabiam 4 por fileira e o 5º certificado sobrava
sozinho embaixo. 1320 - 4 vãos cabe 5 colunas de ~246. */
grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
gap: clamp(1rem, 2.2vw, 1.6rem);
}
body.theme-paper .certrow { border: 0; }
body.theme-paper .certrow__btn {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
width: 100%;
height: 100%;
text-align: left;
padding: clamp(1.1rem, 2.6vh, 1.5rem);
border: 1px solid var(--line);
background: transparent;
transition: border-color 0.25s ease, background 0.25s ease;
}
/* O hover NÃO levanta o fundo. Com --bg-raise o acento caía para 2,84:1, e
mesmo o --accent-ink dava só 4,52, que passa por 0,02 e não é margem.
Sobre o papel puro o acento volta a 5,04 e o hover se expressa pelo fio. */
body.theme-paper .certrow__btn:hover,
body.theme-paper .certrow__btn:focus-visible {
border-color: var(--ink);
}
body.theme-paper .certrow__btn:hover .certrow__name,
body.theme-paper .certrow__btn:focus-visible .certrow__name { color: var(--ink); }
body.theme-paper .certrow__num {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
color: var(--accent-ink);
}
body.theme-paper .certrow__name {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(0.98rem, 1.35vw, 1.15rem);
letter-spacing: -0.015em;
text-transform: uppercase;
line-height: 1.2;
}
body.theme-paper .certrow__meta {
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.05em;
color: var(--ink-dim);
}
body.theme-paper .certrow__see {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: auto;
padding-top: 0.8rem;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-dim);
transition: color 0.2s ease;
}
body.theme-paper .certrow__see svg { width: 15px; height: 15px; flex-shrink: 0; }
body.theme-paper .certrow__btn:hover .certrow__see { color: var(--accent-ink); }
body.theme-paper .certrow__btn:hover .certrow__see svg { transform: translateX(3px); }
body.theme-paper .certrow__see svg { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
/* ==========================================================================
IDENTIDADE DOS PROJETOS
A rota é um CATÁLOGO: destaque + índice. Nem a home nem a trajetória têm
essa estrutura. O acento do título é serifa itálica, terceiro tratamento da
família (home = bloco vermelho, trajetória = contorno, projetos = serifa).
========================================================================== */
body.theme-paper .hero__serif {
font-family: 'Gambetta', Georgia, serif;
font-style: italic;
font-weight: 500;
text-transform: none;
letter-spacing: -0.01em;
/* a serifa tem altura-x menor que a Archivo; sem o empurrão ela parece
menor do que é ao lado da grotesca */
font-size: 1.12em;
}
/* ---------- destaque ---------- */
body.theme-paper .feature {
padding-block: clamp(3rem, 8vh, 5rem);
border-top: 1px solid var(--line);
}
body.theme-paper .feature__head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding-bottom: clamp(1rem, 2.5vh, 1.4rem);
border-bottom: 1px solid var(--ink);
}
body.theme-paper .feature__chapter { color: var(--accent-ink); }
body.theme-paper .feature__card {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: stretch;
width: 100%;
text-align: left;
margin-top: clamp(1.6rem, 4vh, 2.4rem);
}
body.theme-paper .feature__frame {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
border: 1px solid var(--ink);
background: var(--bg-raise);
}
body.theme-paper .feature__frame img {
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transition: filter 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
body.theme-paper .feature__card:hover .feature__frame img,
body.theme-paper .feature__card:focus-visible .feature__frame img {
filter: grayscale(0);
transform: scale(1.03);
}
body.theme-paper .feature__body {
display: flex;
flex-direction: column;
align-items: flex-start;
}
body.theme-paper .feature__client { color: var(--accent-ink); }
body.theme-paper .feature__name {
display: block;
margin-top: 0.5rem;
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(1.6rem, 3.4vw, 2.8rem);
line-height: 1.02;
letter-spacing: -0.03em;
text-transform: uppercase;
}
body.theme-paper .feature__desc {
display: block;
margin-top: 1rem;
max-width: 48ch;
font-size: 0.95rem;
line-height: 1.6;
color: var(--ink-dim);
text-wrap: pretty;
}
body.theme-paper .feature__metrics {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 2rem;
margin-top: 1.4rem;
padding-top: 1.2rem;
border-top: 1px solid var(--line);
width: 100%;
}
body.theme-paper .feature__metrics span {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-dim);
}
body.theme-paper .feature__metrics b {
font-family: var(--font-display);
font-weight: 900;
font-size: 1.15rem;
letter-spacing: -0.02em;
color: var(--ink);
margin-right: 0.35rem;
}
body.theme-paper .feature__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 44px;
margin-top: auto;
padding-top: 1.4rem;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color 0.2s ease;
}
body.theme-paper .feature__cta svg {
width: 15px; height: 15px;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
body.theme-paper .feature__card:hover .feature__cta { color: var(--accent-ink); }
body.theme-paper .feature__card:hover .feature__cta svg { transform: translateX(4px); }
/* ---------- índice ---------- */
body.theme-paper .worklist { list-style: none; margin-top: clamp(1.4rem, 3.5vh, 2.2rem); }
body.theme-paper .row { border-top: 1px solid var(--line); }
body.theme-paper .row:last-child { border-bottom: 1px solid var(--line); }
body.theme-paper .row__link {
display: grid;
grid-template-columns: 3.5rem minmax(0, 1.4fr) minmax(0, 1.4fr) auto 2rem;
align-items: baseline;
gap: clamp(1rem, 2.5vw, 2rem);
width: 100%;
text-align: left;
padding-block: clamp(1rem, 2.6vh, 1.5rem);
transition: padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
body.theme-paper .row__link:hover { padding-left: 0.6rem; }
body.theme-paper .row__num {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
color: var(--accent-ink);
}
body.theme-paper .row__name {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.05rem, 1.7vw, 1.4rem);
letter-spacing: -0.02em;
text-transform: uppercase;
line-height: 1.15;
transition: color 0.2s ease;
}
body.theme-paper .row__meta,
body.theme-paper .row__year {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.05em;
color: var(--ink-dim);
}
body.theme-paper .row__year { font-variant-numeric: tabular-nums; }
body.theme-paper .row__arrow { width: 15px; height: 15px; align-self: center; justify-self: end; color: var(--ink-dim); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease; }
body.theme-paper .row__link:hover .row__name { color: var(--accent-ink); }
body.theme-paper .row__link:hover .row__arrow { transform: translateX(5px); color: var(--accent-ink); }
/* o preview que segue o cursor é o dispositivo próprio desta rota; no papel
ele ganha moldura de tinta em vez da sombra do tema escuro */
body.theme-paper .preview__item img,
body.theme-paper .preview__item--plate {
border: 1px solid var(--ink);
border-radius: 0;
}
body.theme-paper .preview__item--plate {
background: var(--ink);
color: var(--bg);
}
@media (max-width: 900px) {
body.theme-paper .feature__card { grid-template-columns: 1fr; }
body.theme-paper .row__link { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.3rem 1rem; }
body.theme-paper .row__num { grid-row: 1 / span 3; }
body.theme-paper .row__meta,
body.theme-paper .row__year { grid-column: 2; }
body.theme-paper .row__arrow { display: none; }
}
/* ---------- modal de case ----------
Um case é documento LONGO. A versão anterior era uma coluna só de 900px com
tudo empilhado: mídia, meta, texto e seis blocos iguais, um atrás do outro,
sem nenhum corte de ritmo. Aqui ele ganha cabeçalho fixo, faixa preta nos
números e blocos rotulados com fio, na mesma gramática das páginas. */
/* a largura mora no