@font-face {
font-family: "Space Mono";
src: local("Space Mono");
}
/* fonte de verdade do design (Figma usa "Carbona Variable" em quase todo
texto mono do site — poema do about, títulos/listas do services, labels
do work etc., ver PROJECT_NOTES.md). Arquivo próprio da licença do
usuário, self-hosted (era só uma tentativa de local() antes, pra "Space
Mono", que falha silenciosamente em quem não tem a fonte instalada no
sistema — esse aqui carrega de verdade pra todo mundo).
4º arquivo testado (ver PROJECT_NOTES.md pro histórico dos 3 anteriores —
1º vinha sempre inclinado, 2º tinha o eixo "wght" declarado mas sem
dados de verdade, 3º era estático só com o peso Regular). Esse aqui
(Carbona_Variable_Regular.ttf) é BEM maior que os anteriores (525KB) e
tem os eixos "wght"/"slnt" com dados de verdade (`gvar`/`avar`
presentes, conferido no binário) — variable font completa. `font-weight:
1 999` (faixa, não um número fixo) deixa o `font-weight` normal do CSS
(que os elementos do site já usam) mapear pro eixo "wght" de verdade. */
@font-face {
font-family: "Carbona Variable";
src: url("fonts/Carbona_Variable_Regular.ttf") format("truetype");
font-weight: 1 999;
font-style: normal;
font-display: swap;
}
body {
/* garante o eixo de inclinação em 0 (reto) explicitamente — mesmo motivo
do 2º arquivo testado, que tinha um padrão de eixo diferente de 0;
tag de eixo que não existe numa fonte é ignorada sem efeito colateral */
font-variation-settings: "slnt" 0;
}
:root {
--bg: #12171f;
--fg: #ffffff;
--fg-rgb: 255, 255, 255;
--line: #2e343a;
--menu-bg: #2e343a;
/* cor de texto/ícone pras seções que usam "--menu-bg" de fundo (menu
overlay, .clients, festivals/manifesto do about etc.) — no escuro é a
mesma cor de "--fg" (branco), então historicamente nunca precisou de
uma variável própria; separada agora porque no CLARO ela NÃO é igual a
"--fg" (ver bloco [data-theme="light"] abaixo) */
--menu-fg: #ffffff;
--menu-fg-rgb: 255, 255, 255;
--font-mono: "Carbona Variable", "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--font-display: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif;
--font-menu: "Manrope", var(--font-mono);
--edge: clamp(16px, 1.1vw, 24px);
--icon: clamp(20px, 1.6vw, 27px);
}
/* modo claro: paleta tirada do Figma (node 14003:7, "home" — link do
usuário), nas seções que NÃO são cobertas por vídeo/foto (onde dá pra ver
a cor de fundo de verdade: rodapé/CTA e a grade de logos das produtoras).
Duas famílias de cor, uma pra cada fundo que o site já usa:
- "--bg" (fundo principal, #12171f no escuro) vira BRANCO puro (#fff) no
claro — medido no rodapé/CTA do Figma (fundo 100% rgb(255,255,255) em
vários pontos). O texto/ícone por cima ("--fg") vira #12171f — ou seja,
a MESMA cor que era o fundo escuro agora é o texto claro (medido no
ícone "X"/Twitter do rodapé: rgb(18,23,31), bate exato com o
"--bg" escuro original).
- "--menu-bg" (fundo secundário, #2e343a no escuro — menu aberto,
.clients, festivals/manifesto do about) vira um LILÁS/cinza claro
(#c2c0c8) no claro — medido na grade de logos das produtoras do Figma
(fundo 100% rgb(194,192,200) em vários pontos, incluindo os 4 cantos).
O texto/logo por cima ("--menu-fg") vira #2e343a — de novo, a MESMA
cor que era esse fundo escuro agora é o texto claro (medido no logo
"GREAT" da mesma grade: rgb(46,52,58), bate exato com o "--menu-bg"
escuro original). Era antes um "invert(1)" cru (branco constant, sem
essa 2ª família de cor nenhuma) — usuário reportou e pediu pra seguir
esse Figma à risca. */
:root[data-theme="light"] {
--bg: #ffffff;
--fg: #12171f;
--fg-rgb: 18, 23, 31;
--line: #d8d4cc;
--menu-bg: #c2c0c8;
--menu-fg: #2e343a;
--menu-fg-rgb: 46, 52, 58;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-mono);
/* "clip" em vez de "hidden": evita barra de rolagem horizontal sem quebrar
position:sticky em nenhuma página (hidden em qualquer ancestral desativa
sticky dos descendentes) */
overflow-x: clip;
/* "background-color" (não a abreviação "background"!) — achado testando o
modo claro nesta tarefa: transicionar a abreviação "background" (que
empacota cor+imagem+posição+repeat juntos) quando só a COR muda via
variável CSS (var(--bg) trocando de valor) deixa o navegador "travado"
no valor antigo pra sempre nesse elemento (bug/limitação real,
reproduzido e confirmado: "--bg" media corretamente o valor novo,
"background-color" computado não atualizava nunca, nem esperando bem
mais que os 0.4s da transição). "background-color" sozinho (só a cor,
sem o resto do pacote) não tem esse problema. */
transition: background-color .4s ease, color .4s ease;
}
img { max-width: none; }
a { color: inherit; text-decoration: none; }
button {
background: none;
border: none;
cursor: pointer;
color: inherit;
padding: 0;
}
.icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: var(--icon);
height: var(--icon);
opacity: .92;
transition: opacity .2s ease, transform .2s ease;
}
.icon-btn:hover { opacity: 1; transform: scale(1.08); }
.icon-btn img { width: 100%; height: 100%; display: block; }
/* ícones/logos brancos (arquivos , não dá pra pintar com "color") —
continuam usando "invert(1)" pra virar escuro no modo claro. Não é a cor
EXATA do Figma pra essas imagens especificamente (branco invertido vira
preto puro, #000, não o #12171f/#2e343a medido no Figma) — mas a
diferença é mínima no tamanho que esses ícones aparecem, e evita ter que
reconverter cada arquivo (a fidelidade de cor de verdade importa mais nos
FUNDOS e no TEXTO, que já usam os valores exatos via "--bg"/"--menu-bg"/
"--fg"/"--menu-fg" acima). ".client-logo" e ".mobile-footer-social-icon"/
".mobile-footer-wordmark" entraram na lista agora — antes ficavam de fora
de propósito porque suas seções (.clients/.mobile-footer) tinham fundo
sempre escuro, ignorando o tema; isso mudou (ver comentário em ".clients"
mais abaixo), então os logos precisam inverter junto agora. */
:root[data-theme="light"] .icon-btn img,
:root[data-theme="light"] .brand-mark,
:root[data-theme="light"] .hero-logo-mark,
:root[data-theme="light"] .hero-logo-bracket,
:root[data-theme="light"] .contact-wordmark,
:root[data-theme="light"] .contact-social,
:root[data-theme="light"] .client-logo img,
:root[data-theme="light"] .mobile-footer-wordmark,
:root[data-theme="light"] .mobile-footer-social-icon img {
filter: invert(1);
}
/* --- controles fixos (menu / idioma / modo) --- */
.site-controls {
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 500;
display: flex;
align-items: center;
gap: clamp(10px, 1.2vw, 23px);
transition: opacity .25s ease, visibility .25s ease;
}
.site-controls.left { left: var(--edge); }
.site-controls.right { right: var(--edge); }
body.menu-open .site-controls.right {
opacity: 0;
visibility: hidden;
}
/* logo fixo do canto (home, mobile) — ver @media(max-width:720px) pro
resto do estilo; nunca aparece no desktop */
.home-logo-fixed { display: none; }
/* --- menu overlay --- */
.menu-overlay {
position: fixed;
inset: 0;
z-index: 400;
background: var(--menu-bg);
/* texto/colchete (".menu-link"/".menu-bracket" abaixo, ambos sem "color"/
"border-color" próprios) herdam esta cor — combina com o fundo em
qualquer tema, sem precisar de "invert()" (são texto/borda de verdade,
não imagem) */
color: var(--menu-fg);
visibility: hidden;
transform: translateX(-100%);
transition: transform .55s cubic-bezier(.65,0,.35,1), visibility 0s linear .55s;
}
.menu-overlay.open {
visibility: visible;
transform: translateX(0);
transition: transform .55s cubic-bezier(.65,0,.35,1);
}
.menu-links {
position: relative;
width: 100%;
height: 100%;
}
.menu-link {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-menu);
font-weight: 400;
font-size: clamp(20px, 2.416vw, 46.39px);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--menu-fg);
white-space: nowrap;
opacity: .92;
transition: opacity .2s ease;
}
.menu-link--center { transform: translate(-50%, -50%); }
.menu-link:hover { opacity: 1; }
.menu-link.is-active { font-weight: 800; opacity: 1; }
.menu-link:not(.is-active).has-active { opacity: .3; }
/* colchete que envolve do "X" de fechar até o item ativo — mesmo motivo "["
recorrente do site (about/contact/work), 3 lados só, sem borda embaixo.
left/top/height fixos (sempre começa logo depois do hambúrguer/X); a
largura vem do inline style de cada página (varia com o item ativo) */
.menu-bracket {
position: absolute;
left: 14%;
top: 25.3%;
height: 26.6%;
border: 15px solid var(--menu-fg);
border-bottom: none;
pointer-events: none;
}
/* só a home tem esse elemento sem nenhum item "ativo" de verdade pra
envolver (Trabalhos/Serviços/Sobre/Contato são só destinos, nenhum
representa "você está aqui") — escondido no desktop; o mobile mostra ele
de qualquer forma, decorativo (ver @media max-width:720px, que usa uma
seletor mais específico pra vencer esta regra) */
.home-page .menu-bracket { display: none; }
/* work.html: o hambúrguer/overlay novo (Figma node 14043:1562) só existe pro
mobile — no desktop ".work-page .site-controls.left" fica escondido (ver
work.css), então o overlay nunca abre lá; escondemos o colchete aqui
também, por segurança/redundância (mesmo padrão da home acima) */
.work-page .menu-bracket { display: none; }
/* --- hero --- */
.hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 560px;
overflow: hidden;
}
/* cada vídeo mantém a proporção do tamanho NATIVO do arquivo (nunca
cortado nem esticado — ver fitHeroVideo/heroVideoScale em script.js): em
telas de 1920px+ aparece no tamanho nativo exato; entre 1280 e 1920px o
tamanho acompanha a largura da tela (escala proporcional); abaixo de
1280px fica travado no tamanho mínimo. Se ainda assim for maior que a
tela, o excesso simplesmente não aparece (overflow:hidden aqui e em
.hero, igual qualquer conteúdo centralizado maior que a área visível) */
.hero-video-frame {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--bg);
opacity: 0;
transform: scale(1.08);
transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.19,1,.22,1);
}
.hero-video-frame.is-visible {
opacity: 1;
transform: scale(1);
}
/* tamanho (width/height em px) definido via JS = resolução nativa exata do
vídeo (ver fitHeroVideo em script.js) — nunca cortado nem esticado, só
centralizado via left/top 50% + translate(-50%,-50%); a troca de
width/height anima suavemente entre um vídeo e outro (não é um corte
abrupto) */
.hero-video {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
pointer-events: none;
opacity: 0;
transition: opacity .9s ease, width .6s cubic-bezier(.19,1,.22,1), height .6s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1);
}
.hero-video.is-visible { opacity: 1; }
/* troca entre vídeos vira um slide com fade: o que está saindo desliza pra
fora à esquerda E dá fade-out ao mesmo tempo (perde .is-visible — ver
handleHeroVideoEnded em script.js), enquanto o próximo entra deslizando
da direita. Desloca 100vw (não 100%, que seria relativo ao próprio
tamanho do vídeo, variável por arquivo) — garante que fica bem fora da
tela não importa o tamanho nativo do vídeo. Opacidade e transform com a
mesma duração (.9s) pra sentir como um movimento só, mais suave. */
.hero-video.is-offscreen-right { transform: translate(calc(-50% + 100vw), -50%); }
.hero-video.is-offscreen-left { transform: translate(calc(-50% - 100vw), -50%); }
/* usado só no instante de posicionar o próximo vídeo fora da tela à direita
ANTES de soltar a transição — sem isso, esse posicionamento inicial
também deslizaria (entraria "andando" desde o centro), em vez de já
nascer fora da tela pronto pra deslizar de lá pra cá */
.hero-video.no-transition { transition: none; }
/* fica fixo no centro da tela por cima dos vídeos o tempo todo (não some
mais entre um vídeo e outro) — só a entrada inicial (ao carregar a
página) é que anima, via .is-visible, e nunca mais é removida depois */
.hero-logo {
position: absolute;
left: 50%;
top: 50%;
width: clamp(190px, 17.92vw, 344px);
text-align: left;
z-index: 10;
pointer-events: auto;
opacity: 0;
transform: translate(-50%, -50%) translateY(22px);
transition: opacity .8s ease, transform .8s cubic-bezier(.19,1,.22,1);
}
.hero-logo.is-visible {
opacity: 1;
transform: translate(-50%, -50%) translateY(0);
}
.hero-logo-eyebrow {
display: block;
font-family: var(--font-display);
font-size: clamp(15px, 1.57vw, 30px);
letter-spacing: .04em;
margin-bottom: clamp(2px, .5vw, 8px);
}
.hero-logo-mark-wrap { position: relative; width: 100%; overflow: visible; }
/* overflow:visible é essencial aqui: quando o colchete "empurra" o resto da
palavra pra direita (#heroLogoPushGroup, ver comentário abaixo), o texto
ultrapassa o viewBox original do SVG — por padrão os navegadores recortam
qualquer conteúdo fora do viewBox (nem que seja um