/* tokens.css: única fonte de verdade de cor, tipografia, espaço e forma. Valores medidos no computed style da produção (brenoot.com) e normalizados conforme specs/DESIGN.md §9. ------------------------------------------------------------------ CONTRATO DE COR: duas camadas, uma regra só ------------------------------------------------------------------ 1. PALETA PRIVADA (--c-*). Pigmento cru, nomeado por COR. É privada: nenhum componente pode escrever var(--c-...). Cada tema tem a sua, com prefixo próprio (--c-* light, --c-d-* dark, --c-w-* creamy). 2. SEMÂNTICA (--color-*). Nomeada por PAPEL, nunca por cor. É a ÚNICA camada que componente enxerga. A verificação é um grep: `grep -r -- "var(--c-" site/ specs/` fora deste arquivo tem que voltar vazio. TEMA. Light é o default e mora no :root. Dark e creamy são scaffolds coerentes, ligados por [data-theme] no . Trocar de tema é reescrever a camada semântica inteira; nenhum componente muda, e não existe cor solta em componente nenhum para ficar para trás. As páginas de produção NÃO forçam tema: sem atributo, o site é light. O seletor de tema existe só em specs/_design-system.html, como ferramenta de preview. Contraste AA de cada tema está medido e tabelado em specs/DESIGN.md §10. */ :root { /* --------------------------------------------------------------- 1. PALETA PRIVADA, light --------------------------------------------------------------- */ --c-white: #FFFFFF; --c-gray-25: #FAFAFA; /* quase branco: só o disco do c-theme-toggle usa */ --c-gray-50: #F0F0F2; --c-gray-100: #F5F5F5; /* fundo do painel de /work, ver --color-surface-panel */ --c-gray-200: #E4E4E7; --c-gray-250: #D9D9D9; --c-gray-300: #E5E5E5; --c-gray-400: #C9C9C9; --c-gray-450: #6D6D6D; /* eyebrow sobre o painel de /work, ver --color-text-muted-panel */ --c-gray-500: #71717A; --c-gray-550: #555555; /* cor exata do spec do Figma pro c-hmw, não arredonda pro 600 (#5A5A62), próximo mas diferente */ --c-gray-600: #5A5A62; --c-gray-700: #3F3F46; --c-gray-900: #111113; /* verdes, três profundidades do mesmo acento. O 700 é o verde herdado da produção (só o c-details), o 600 é o link de texto, o 500 é o ponto de status. */ --c-green-700: #006B4F; --c-green-600: #1B7A4A; --c-green-500: #2FA96A; /* ocre/creme, vermelhão e azul: acentos de baixa frequência. */ --c-ochre-500: #E0A008; --c-ochre-400: #EBB840; --c-cream-100: #FBEEC6; --c-vermilion-500: #EA5A3D; --c-blue-700: #2F4E8F; --c-rose-300: #C4A8A8; /* placeholder de mídia, ver --color-surface-placeholder */ /* --------------------------------------------------------------- 2. SEMÂNTICA: superfície --------------------------------------------------------------- */ --color-bg: var(--c-white); --color-surface-subtle: var(--c-gray-50); /* pill do item de nav ativo */ /* Sem consumidor desde 28/08: era o hover da linha de work, removido porque a diferenciação passou a vir só das OUTRAS linhas apagando, não da hoveada mudando. Fica porque é um dos dois fundos que --color-text-muted-tint (abaixo) foi calibrado para cobrir. */ --color-surface-raised: var(--c-gray-200); /* vidro da float bar quando ela desgruda e vira fixa. O alfa só funciona com o blur atrás; sem blur o texto perde contraste, por isso existe o par --solid, consumido no @supports not do componente. */ --color-surface-blur: rgba(255, 255, 255, 0.5); --color-surface-blur-solid: rgba(255, 255, 255, 0.85); --blur-radius: 10px; /* fundo do do lightbox (::backdrop). Antes era um rgba solto dentro do componente, o único hex que restava fora desta camada. */ --color-scrim: rgba(17, 17, 19, 0.86); /* CONTROLE DE TEMA. O `c-theme-toggle`, o disco de 32px na linha do nome no header. Só `--color-control-icon` está em uso: o ícone precisa de cor própria porque não é texto nem link, não se encaixa em nenhum papel que já existisse. `--color-control-surface` e `--shadow-control-hover` ficaram sem consumidor no mesmo dia em que nasceram: o primeiro desenho tinha disco preenchido com sombra no hover, e o Breno pediu botão sem fundo nenhum, com borda emprestada de `--color-border` (a mesma do pill ativo da float bar) no lugar da sombra. Ficam registrados aqui por enquanto, não apagados: o fundo pode voltar a ser pedido, e os valores já estão calibrados por tema caso volte. */ --color-control-surface: var(--c-gray-25); --color-control-icon: var(--c-gray-700); --shadow-control-hover: 0 0 20px rgba(0, 0, 0, 0.2); /* SOBRE MÍDIA. Estes dois NÃO mudam por tema, e é decisão, não esquecimento: o disco do botão de play e o triângulo dentro dele sentam em cima de um still fotográfico, não em cima da página. Quem manda no contraste ali é a imagem, que é a mesma nos três temas. Se o disco seguisse --color-bg, no dark ele viraria um triângulo quase preto sobre um disco quase preto. Por isso o par está definido uma vez só, aqui, e nenhum bloco de tema o redeclara. */ --color-media-scrim: rgba(17, 17, 19, 0.55); --color-media-on-scrim: #FFFFFF; /* PLACEHOLDER DE MÍDIA. O rosa acinzentado que o Figma de `/visual-craft` usa nos retângulos de imagem/vídeo ainda não produzidos. TEMPORÁRIO, com data de validade: quando as imagens e os vídeos reais dos cinco projetos entrarem, o único consumidor (`c-project-showcase__media`) some e este token vai junto. */ --color-surface-placeholder: var(--c-rose-300); /* PAINEL. O cartão cinza-claro que carrega cada uma das três seções de `/work` (`c-work-panel`, components.css §36). Papel próprio, e por isso token próprio em vez de reusar `--color-surface-subtle`: o pill de nav ativo precisa APARECER contra o branco, o painel precisa quase sumir e servir só de moldura pro que está dentro. Os dois valores nascem diferentes no light (#F0F0F2 contra #F5F5F5) e convergem nos outros dois temas, onde a superfície tingida já é a mesma ideia. */ --color-surface-panel: var(--c-gray-100); /* --------------------------------------------------------------- 2b. SEMÂNTICA: borda e filete --------------------------------------------------------------- */ --color-border: var(--c-gray-200); /* borda do pill do item ativo */ --color-border-bar: var(--c-gray-250); /* borda da float bar */ --color-border-card: var(--c-gray-300); /* borda de imagem-card */ --color-rule: var(--c-gray-300); /* filete do divisor */ /* --------------------------------------------------------------- 2c. SEMÂNTICA: texto --------------------------------------------------------------- */ --color-text: var(--c-gray-900); /* títulos, nav, valores */ --color-text-body: var(--c-gray-700); /* corpo */ --color-text-muted: var(--c-gray-500); /* eyebrow, datas, rótulos, SÓ sobre --color-bg. Ver --color-text-muted-tint. */ --color-text-faint: var(--c-gray-400); /* glifo decorativo */ --color-text-hmw: var(--c-gray-550); /* só o c-hmw ("How might we"), cor exata do Figma, não a mesma escala de --color-text-muted */ /* --color-text-muted dá 4,83:1 sobre --color-bg e passa AA, mas cai pra 4,25:1 sobre --color-surface-subtle: a superfície tingida come a margem que o branco dava, e fica ABAIXO de 4,5:1. Este é o par calibrado pra qualquer rótulo/texto muted que precise sentar numa superfície tingida (--color-surface-subtle ou --color-surface-raised); 6,00:1 sobre a primeira, com folga real, não raspando o mínimo. Nome pelo PAPEL ("muted sobre tinta"), não pelo valor. */ --color-text-muted-tint: var(--c-gray-600); /* Terceiro degrau de muted, o do eyebrow dentro do painel de `/work`. Não é `--color-text-muted` (#71717A dá 4,43:1 sobre o painel, abaixo de AA) e não é `--color-text-muted-tint` (#5A5A62, escuro demais para o peso que o spec do Figma pede ali). #6D6D6D dá 4,74:1 sobre `--color-surface-panel`, passa AA com folga e é o valor exato do spec. Nos temas dark e creamy não há distinção a fazer: os dois apontam para o mesmo valor de `--color-text-muted-tint`. */ --color-text-muted-panel: var(--c-gray-450); /* --------------------------------------------------------------- 2d. SEMÂNTICA: acento Base preto/branco/cinza. O acento é exceção, e tem hierarquia: --color-link / --color-accent / --color-accent-strong o verde, o único acento de frequência alta: todo link de texto, o ponto de status, e o verde fundo herdado da produção que só o c-details usa. --color-accent-detail e --color-marker o ocre: marca-texto e detalhe pequeno/divisor. Nunca em texto corrido. --color-accent-emphasis e --color-accent-info vermelhão e azul, reservados a tag de categoria ou estado. Nunca como cor de link. --color-marker é separado de --color-accent-detail de propósito: o preenchimento do marca-texto precisa ser mais claro que o filete, e os dois divergem de vez em dark. ATENÇÃO DE CONTRASTE: --color-accent-emphasis é 3,48:1 sobre --color-bg no light. Passa AA só como TEXTO GRANDE (≥24px), que é exatamente o único consumidor hoje: o `.c-role` da headline da Home, em 32px. Não use em corpo de texto no light. Ver DESIGN.md §10. --------------------------------------------------------------- */ --color-link: var(--c-green-600); /* link de texto e hover */ --color-accent: var(--c-green-500); /* status dot, acento pequeno */ --color-accent-strong: var(--c-green-700); /* verde fundo do c-details */ --color-accent-detail: var(--c-ochre-500); /* detalhe raro, divisor, status "booked" */ --color-marker: var(--c-cream-100); /* preenchimento do marca-texto */ --color-accent-emphasis: var(--c-vermilion-500); /* tag de categoria / estado, só texto grande no light */ --color-accent-info: var(--c-blue-700); /* tag de categoria / estado */ /* apelido: o anel de foco (base.css §4) é o verde de link. */ --color-focus: var(--color-link); /* --------------------------------------------------------------- 2e. SEMÂNTICA: sombra As duas únicas SOMBRAS-TOKEN do site (c-photo-frame e c-work-preview; a primeira ganhou um terceiro consumidor, as folhas de /visual-craft, em 02/09). Ficam na camada de cor porque a densidade delas muda por tema: preto sobre branco no light, preto mais fechado no dark, marrom quente no creamy. --------------------------------------------------------------- */ --shadow-photo-frame: 0 2px 6px rgba(0, 0, 0, 0.06), 0 10px 21px -11px rgba(0, 0, 0, 0.10); --shadow-work-preview: 0 4px 10px rgba(0, 0, 0, 0.07), 0 18px 34px -16px rgba(0, 0, 0, 0.16); } /* ================================================================= TEMA DARK. Preto mais colorido do que puro. A paleta privada é própria (--c-d-*): reusar os nomes do light daria "--c-white: #0B0B0C", que é mentira de nome. Cada tema traz o seu pigmento e remapeia a MESMA lista semântica, na mesma ordem do :root. Relações de acento preservadas: verde continua sendo o acento de frequência alta em três profundidades, ocre continua sendo detalhe e marca-texto, vermelhão e azul continuam reservados a tag/estado. O que muda é a direção: no escuro os acentos sobem de luminosidade em vez de descer, e o marca-texto vira ocre ESCURO (o preenchimento claro do light comeria o texto claro). ================================================================= */ [data-theme="dark"] { /* paleta privada do dark */ --c-d-black: #0B0B0C; --c-d-gray-950: #17171A; --c-d-gray-900: #202024; --c-d-gray-800: #2A2A2F; --c-d-gray-700: #3A3A41; --c-d-gray-600: #4A4A52; --c-d-gray-400: #9A9AA4; --c-d-gray-350: #ADADB6; --c-d-gray-300: #B0B0B8; --c-d-gray-200: #C9C9D1; --c-d-gray-50: #F4F4F5; --c-d-green-500: #35C79A; --c-d-green-400: #3FBE83; --c-d-green-300: #4ADE9E; --c-d-ochre-500: #E0A008; --c-d-ochre-800: #5A4410; --c-d-vermilion-400: #F07A60; --c-d-blue-400: #7C9BDA; --c-d-rose-800: #4A3B3B; /* superfície */ --color-bg: var(--c-d-black); --color-surface-subtle: var(--c-d-gray-950); --color-surface-raised: var(--c-d-gray-900); --color-surface-blur: rgba(11, 11, 12, 0.55); --color-surface-blur-solid: rgba(11, 11, 12, 0.88); --color-scrim: rgba(0, 0, 0, 0.9); --color-surface-placeholder: var(--c-d-rose-800); --color-surface-panel: var(--c-d-gray-950); /* borda e filete */ --color-border: var(--c-d-gray-800); --color-border-bar: var(--c-d-gray-700); --color-border-card: var(--c-d-gray-800); --color-rule: var(--c-d-gray-800); /* texto */ --color-text: var(--c-d-gray-50); --color-text-body: var(--c-d-gray-200); --color-text-muted: var(--c-d-gray-400); --color-text-faint: var(--c-d-gray-600); --color-text-hmw: var(--c-d-gray-300); --color-text-muted-tint: var(--c-d-gray-350); --color-text-muted-panel: var(--c-d-gray-350); /* acento */ --color-link: var(--c-d-green-400); --color-accent: var(--c-d-green-300); --color-accent-strong: var(--c-d-green-500); --color-accent-detail: var(--c-d-ochre-500); --color-marker: var(--c-d-ochre-800); --color-accent-emphasis: var(--c-d-vermilion-400); --color-accent-info: var(--c-d-blue-400); /* controle de tema */ --color-control-surface: var(--c-d-gray-950); --color-control-icon: var(--c-d-gray-200); --shadow-control-hover: 0 0 12px rgba(0, 0, 0, 0.75); /* sombra: no escuro a sombra preta some no fundo; ela existe pra separar a moldura, então fecha o alfa em vez de clarear. */ --shadow-photo-frame: 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px 21px -11px rgba(0, 0, 0, 0.7); --shadow-work-preview: 0 4px 10px rgba(0, 0, 0, 0.55), 0 18px 34px -16px rgba(0, 0, 0, 0.75); } /* ================================================================= TEMA CREAMY. Papel creme e tinta marrom. Mesma lógica do dark: paleta privada própria (--c-w-*, de "warm") e o mesmo remapeamento semântico. O ajuste que este tema exige é o do OCRE. Num fundo já amarelado, o ocre do light (#E0A008) some como detalhe e o creme do marca-texto (#FBEEC6) fica indistinguível da página. Os dois descem de luminosidade juntos: o detalhe vira ocre queimado e o marca-texto vira um amarelo mais saturado, ainda claro o bastante para o texto preto sentar em cima com folga. ================================================================= */ [data-theme="creamy"] { /* paleta privada do creamy */ --c-w-cream-50: #FBF5E6; --c-w-cream-100: #F3E9D2; --c-w-cream-200: #EADFC2; --c-w-sand-300: #E3D5B4; --c-w-sand-400: #D8C79E; --c-w-sand-500: #C0AF88; --c-w-brown-500: #756A52; --c-w-brown-600: #5F553F; --c-w-brown-650: #574D3A; --c-w-brown-700: #4A4131; --c-w-brown-900: #241E12; --c-w-green-700: #0A5A40; --c-w-green-600: #1B6B42; --c-w-green-500: #2E8B58; --c-w-ochre-600: #A8760A; --c-w-ochre-200: #F2DC93; --c-w-vermilion-600: #C2452A; --c-w-blue-700: #2F4E8F; --c-w-rose-300: #D9BFAE; /* superfície */ --color-bg: var(--c-w-cream-50); --color-surface-subtle: var(--c-w-cream-100); --color-surface-raised: var(--c-w-cream-200); --color-surface-blur: rgba(251, 245, 230, 0.55); --color-surface-blur-solid: rgba(251, 245, 230, 0.88); --color-scrim: rgba(36, 30, 18, 0.86); --color-surface-placeholder: var(--c-w-rose-300); --color-surface-panel: var(--c-w-cream-100); /* borda e filete */ --color-border: var(--c-w-sand-300); --color-border-bar: var(--c-w-sand-400); --color-border-card: var(--c-w-sand-300); --color-rule: var(--c-w-sand-300); /* texto */ --color-text: var(--c-w-brown-900); --color-text-body: var(--c-w-brown-700); --color-text-muted: var(--c-w-brown-500); --color-text-faint: var(--c-w-sand-500); --color-text-hmw: var(--c-w-brown-650); --color-text-muted-tint: var(--c-w-brown-600); --color-text-muted-panel: var(--c-w-brown-600); /* acento */ --color-link: var(--c-w-green-600); --color-accent: var(--c-w-green-500); --color-accent-strong: var(--c-w-green-700); --color-accent-detail: var(--c-w-ochre-600); --color-marker: var(--c-w-ochre-200); --color-accent-emphasis: var(--c-w-vermilion-600); --color-accent-info: var(--c-w-blue-700); /* controle de tema */ --color-control-surface: var(--c-w-cream-100); --color-control-icon: var(--c-w-brown-700); --shadow-control-hover: 0 0 12px rgba(74, 65, 49, 0.3); /* sombra: marrom em vez de preto, senão a sombra fica cinza dentro de uma página quente e denuncia que veio de outro tema. */ --shadow-photo-frame: 0 2px 6px rgba(74, 65, 49, 0.10), 0 10px 21px -11px rgba(74, 65, 49, 0.18); --shadow-work-preview: 0 4px 10px rgba(74, 65, 49, 0.12), 0 18px 34px -16px rgba(74, 65, 49, 0.24); } :root { /* --------------------------------------------------------------- 3. TIPOGRAFIA --------------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Exposure', Georgia, 'Times New Roman', serif; /* `c-label` passou por três famílias na sessão de 28/08 (serifa itálica -> Plex Sans -> Instrument Serif) e pousou de volta em IBM Plex Serif, agora upright em vez de itálico. Sem token próprio: o valor seria idêntico a `--font-serif`, e o projeto não duplica token pro mesmo valor (mesma regra já aplicada a `--color-surface-subtle`). `c-label` e `c-work-card__label` consomem `--font-serif` direto. */ /* escala — não muda entre mobile e desktop, por decisão de design. `--type-display-size` existiu até 28/08 com 40px; caiu pra bater com `--type-title-size` (o título de case e o título de break point precisavam do mesmo tamanho, 32px, pedido do Breno) e foi removido por duplicar token pro mesmo valor — mesma regra já aplicada antes a `--color-surface-subtle` e `--font-label`. `.c-display` consome `--type-title-size` direto agora; só o `text-align: center` separa as duas classes. */ --type-title-size: 32px; --type-title-lh: 1.4; --type-name-size: 20px; --type-name-lh: 1.3; --type-caption-size: 12px; --type-caption-lh: 1.4; --type-headline-size: 32px; --type-headline-lh: 1.4; --type-body-size: 14px; --type-body-lh: 1.8; /* O rótulo de seção passou por duas famílias na mesma sessão de 28/08: serifa itálica 14px -> Plex Sans 12px -> Instrument Serif 14px, todo minúsculo (text-transform: lowercase no componente, base.css não mexe). Entrelinha 1.6 mantida da versão Plex Sans: serve igual de bem ao tamanho maior. */ --type-label-size: 14px; --type-label-lh: 1.6; --type-label-tracking: 0.06em; /* corpo pequeno pede tracking */ --type-eyebrow-size: 12px; --type-eyebrow-lh: 1.8; --type-eyebrow-sm-size: 10px; --type-eyebrow-sm-lh: 1.8; --type-glyph-size: 8px; --type-glyph-lh: 1.8; --type-hmw-size: 16px; --type-hmw-lh: 1.8; /* 29px, spec do Figma — só o c-hmw usa */ /* VITRINE DE PROJETO (`c-project-showcase`, /visual-craft). A ÚNICA exceção à regra de "sem escala responsiva" que a linha lá em cima declara, e a razão é de layout, não de gosto: no desktop a coluna de texto tem 232px de largura, medidos no Figma, e o corpo de 14px quebra em três palavras por linha ali dentro. O Figma resolve com 12px, e as quebras de linha do PNG só fecham nesse tamanho. No mobile a coluna volta a ser a coluna de leitura inteira e o corpo volta pro 14px do resto do site. O título anda no sentido contrário pelo mesmo motivo: 20px onde há largura sobrando (mobile) e 16px dentro da coluna estreita. */ --type-showcase-title-size: var(--type-name-size); --type-showcase-title-lh: 1.4; --type-showcase-body-size: var(--type-body-size); --type-showcase-body-lh: var(--type-body-lh); --tracking-caption: -0.32px; /* respiro entre a IMAGEM e a legenda que a descreve — dedicado, não o `--space-6` genérico, porque este valor precisa continuar sendo SEMPRE o mesmo aqui mesmo que a escala de espaço geral do site mude por outro motivo em outro lugar. Constante em toda largura de viewport: não é o token que varia (nunca foi), é o gap VISÍVEL que crescia por causa de letterbox — corrigido em components.css. */ --figure-caption-gap: var(--space-6); /* --------------------------------------------------------------- 4. ESPAÇO — múltiplos de 4 --------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 10px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; --space-11: 104px; /* ritmo vertical entre blocos do main */ --rhythm: var(--space-7); /* mobile */ /* --------------------------------------------------------------- 5. FORMA --------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* casco do painel de /work e do tile de thumbnail */ --radius-pill: 50px; /* item de nav */ --radius-bar: 200px; /* casco da float bar */ --radius-full: 999px; --border-hairline: 1px solid var(--color-border); /* Sem sombra em lugar nenhum. A produção não usa box-shadow uma única vez — separação é sempre filete de 1px ou espaço. */ /* --------------------------------------------------------------- 6. LAYOUT --------------------------------------------------------------- */ --measure: 600px; /* largura da coluna de conteúdo */ --gutter: var(--space-6); /* avatar — dois tamanhos, um por layout de header. Vira 116px acima do breakpoint, junto com a troca de coluna para linha. */ --avatar: 58px; /* FLOAT BAR — a nav global. Os quatro primeiros valem nos dois estados; --floatbar-top só existe no estado fixo. */ --floatbar-pad: var(--space-2); /* 8px, casco */ --floatbar-gap: var(--space-4); /* 16px entre itens */ --floatbar-top: var(--space-4); /* respiro do topo quando flutua */ /* Um valor só para os três estados do link (default, hover, ativo) — só cor de fundo/borda muda entre eles, nunca o tamanho da caixa. */ --floatbar-link-pad: var(--space-1) var(--space-6); /* GALERIAS — família de três componentes que dividem a mesma escala: `c-media-carousel` (faixa horizontal, vários itens), `c-media-stepper` (um estado por vez, no mesmo espaço) e `c-gallery-marquee` (faixa em loop infinito, sem controle manual). O que fica fixo é a ALTURA: a largura de cada figura sai da proporção da própria imagem, então imagens de tamanhos diferentes se alinham pela mesma linha de base. Alturas nomeadas pelo papel, não pelo valor. */ --gallery-height-card: 314px; /* cartão de estado, quase quadrado */ --gallery-height-panel: 480px; /* painel/recorte de tela — padrão */ --gallery-height-screen: 760px; /* tela de celular inteira */ --gallery-height-marquee: 450px; /* tela larga da faixa em loop — ver c-gallery-marquee */ --gallery-height-photo: 320px; /* foto emoldurada na faixa em loop do About */ --gallery-height-showcase: 530px; /* peça visual na faixa de /visual-craft — medida no Figma */ /* VITRINE DE PROJETO — `c-project-showcase`, a faixa de projeto de `/visual-craft`. Três medidas tiradas a pixel do Figma (frame de 1491px): a coluna de texto tem 232px, o respiro dela até a mídia tem 32px, e a faixa inteira recua 44px de cada lado, que é onde o divisor largo começa e termina. O recuo é o único que muda no breakpoint: no mobile a faixa empilha e volta a usar a gutter da página. */ --showcase-inset: var(--gutter); --showcase-text: 232px; --showcase-gap: var(--space-7); /* no mobile a galeria inteira encolhe na mesma proporção, em vez de cada altura ter um segundo valor. Vira 1 acima do breakpoint. */ --gallery-scale: 0.8; /* carrossel */ --carousel-gap: var(--space-6); /* 24px entre uma figura e a próxima */ /* stepper */ --stepper-height: var(--gallery-height-panel); --stepper-dot: 8px; /* diâmetro do círculo, dentro do ícone */ --stepper-dot-active: 16px; /* caixa do ícone — mesma para os dois estados */ /* MARQUEE — parâmetros do `c-gallery-marquee`, componente reutilizável de galeria em loop, usado em Digital Subscriptions (Quick stories) e em "my photographies" (About), sem nada específico de nenhum dos dois conteúdos. O tamanho da imagem NÃO mora aqui — é `--gallery-height-marquee`, ali em cima, na mesma família das outras galerias. `--marquee-speed` é o mesmo parâmetro das libs de marquee: pixels por segundo, sem unidade. É a ÚNICA perilha de calibragem — o JS lê o valor e empurra `scrollLeft` nesse ritmo a cada quadro (ver main.js). Trocar 45 aqui muda a velocidade em qualquer largura de tela. */ --marquee-speed: 45; /* px/s */ --marquee-gap: var(--space-6); /* respiro entre uma tela e a próxima */ /* MOLDURA DE FOTO — `c-photo-frame`, o passe-partout branco que envolve toda foto pessoal do About. Valores do Figma, arredondados. O RADIUS mora só na moldura: a foto dentro dela é retangular, sem canto arredondado nenhum. É o que dá a leitura de papel fotográfico dentro de uma borda, e não de card. A ALTURA é o parâmetro, nunca a largura — mesma convenção das três galerias acima. Cada instância redeclara `--photo-frame-h` e a largura de cada foto sai da proporção dela. 160px é só o default. */ --photo-frame-pad: var(--space-1); /* 4px de passe-partout */ --photo-frame-radius: 4px; --photo-frame-h: 160px; /* PILHA EM LEQUE — `c-photo-stack`, as 5 fotos de "off screen". O overlap é margem negativa (as fotos se sobrepõem de verdade, não é ilusão de transform), e o hover levanta a foto sob o cursor. Ângulo por posição fica no componente, não aqui: é desenho, não escala. Estes três tokens (`-h`, `-w`, `-overlap`) só valem a partir do desktop (≥1000px, ver query mais abaixo) — é o único tamanho fixo em px que resta. Abaixo do desktop o leque usa porcentagem do próprio contêiner (components.css, `.c-photo-stack__item`), pra encher a coluna de leitura exatamente, sem depender de um valor em px por breakpoint — pedido do Breno depois de sobra/estouro em larguras intermediárias como 606px. */ --photo-stack-w: calc(var(--photo-stack-h) * 0.7); /* Também por `calc()` sobre a largura (não mais um px fixo por breakpoint): mantém a MESMA proporção de sobreposição (35% do cartão) em qualquer tamanho. */ --photo-stack-overlap: calc(var(--photo-stack-w) * -0.35); /* quanto uma foto entra na anterior */ /* Respiro do TITULO ate a galeria, nas duas secoes de foto. Maior de proposito que o --space-2 (8px) que .c-label usa em toda outra secao: foto emoldurada tem peso visual e sombra propria, e com o respiro padrao a galeria fica colada no titulo. As outras secoes seguem nos 8px de sempre; este token vale so aqui. */ --photo-section-gap: var(--space-6); /* 24px mobile; abre no breakpoint */ --photo-stack-lift: -20px; /* subida no hover */ --photo-stack-straighten: 0.35; /* fração do ângulo que sobra no hover */ /* PAINEL DE /work: `c-work-panel` (components.css §36), o cartão cinza que carrega cada uma das três seções da página. Os valores são os do Figma, com uma exceção deliberada: nenhuma LARGURA entra aqui. As larguras do Figma vêm de frames fixos (a coluna de lá mede uns 446px, a do site mede 600) e hardcodar qualquer uma delas quebraria a coluna fluida. O que é token é o que não depende da largura: respiro, raio e proporção. */ --panel-pad: var(--space-2); /* 8px, o casco */ --panel-gap: var(--space-6); /* 24px entre um painel e o próximo */ --panel-head-gap: var(--space-2); /* 8px do cabeçalho até a mídia */ --panel-media-radius: var(--radius-md); /* 12px, toda mídia interna */ --panel-title-tracking: -0.01em; /* só o título do painel; o resto do site não aperta */ /* PROPORÇÕES. As três fontes de Quick Stories têm razões diferentes (460x290, 460x355, 460x353) e a capa do case tem outra (600x338): sem proporção fixa os três thumbnails fechariam em alturas diferentes e a linha de base da fileira se perderia. Mesma decisão (e mesmo motivo) do `c-cover-strip` §29. */ --panel-media-ratio: 2 / 1; --panel-thumb-ratio: 4 / 3; /* THUMBNAIL de Quick Stories: tile branco de 4px com a imagem dentro. 16 − 4 = 12, então o raio de fora e o de dentro ficam concêntricos sem precisar de conta no componente. */ --panel-thumb-pad: var(--space-1); /* 4px */ --panel-thumb-radius: var(--radius-lg); /* 16px */ --panel-thumb-gap: var(--space-1); /* 4px no mobile; abre no breakpoint */ /* LEQUE de Visual Craft: as 5 polaroides. A moldura, o raio e a sombra vêm inteiros do `c-photo-frame` (§21), o mesmo componente do leque do About; o que muda aqui é só a geometria da fileira. A LARGURA DO CARTÃO É FLUIDA e sai de uma conta só, sem breakpoint: 5 cartões menos 4 sobreposições de 36px ocupam `5w − 144px`, e isso precisa caber na largura interna do painel com folga pro giro. Daí `w ≤ (100% − folga + 144px) / 5`. Com 44px de folga reservada, a conta vira `(100% + 100px) / 5` e resolve sozinha em qualquer largura: 130px (o teto) na coluna de 600px, uns 82px num iPhone de 375px, uns 71px num de 320px. Nenhum degrau, nenhum valor por viewport. A FOLGA existe porque `rotate()` não muda a caixa de layout, só a pintura: um cartão girado 6,66° é uns 10px mais largo do que ocupa. 44px cobre as duas pontas com margem e é o que garante que o leque inteiro fique dentro dos 8px de padding do painel. */ --fan-card-max: 130px; --fan-overlap: -36px; --fan-bulge-room: 100px; /* = 144px de sobreposição − 44px de folga pro giro */ --fan-card-ratio: 0.7; /* mesmo retrato do leque do About */ /* PILHA DE PROJETO — `c-project-stack`, a peça inteira de `/visual-craft` depois que a página virou galeria pura (01/09). Parente do `c-photo-stack` do About pelo desenho (cartões iguais, sobreposição por margem negativa, ângulo pequeno por item) e diferente dele pelo papel: ali cada foto é um assunto solto, aqui a pilha inteira é UM item clicável que representa um projeto. O CARTÃO É IGUAL PARA TODA IMAGEM, retrato, e a fonte entra por `object-fit: cover`. É o oposto da convenção das galerias do site ("a altura manda, a largura é livre"), e de propósito: as fontes aqui vão de print de desktop 2204x1096 a tela de celular 340x840, e altura comum com largura livre daria cartões de 400px ao lado de cartões de 90px — pilha de baralho não, colagem sem eixo. Cartão igual é o que faz cinco peças de proporções diferentes lerem como um maço de fotos. O corte é aceitável porque a pilha é PREVIEW: o clique abre a imagem inteira no lightbox. A LARGURA DO CARTÃO NUNCA É UM PIXEL FIXO: sai sempre de `100% / --stack-span-max` (components.css), resolvida contra a célula da grade — mesma conta em qualquer viewport acima de 700px desde que a corrida virou grade de duas colunas contida em 02/09 (não escapa mais pela direita em rolagem horizontal). É por isso que só a proporção do cartão mora aqui como token; a largura em si é sempre percentual, nunca em px. */ --stack-card-ratio: 0.68; /* retrato, o mesmo espírito do 0.7 do c-photo-stack */ --stack-overlap: 0.45; /* fração do cartão que entra no anterior */ /* Respiro vertical entre uma pilha e a próxima e horizontal entre as duas colunas (>=700px, o segundo fica inerte numa coluna só). Os dois eram 56/80px; caíram pra 40 nos dois em 02/09 — pedido do Breno pra aproximar os projetos, e o mesmo valor nos dois eixos é de propósito: com as folhas maiores e menos espalhadas (ver `--sheet-overlap`), o vão em volta de cada pilha some por dentro, e não teria sentido esse vão continuar desigual entre linha e coluna. `--space-8` porque 40px já é um degrau nomeado da escala; não sobrou motivo pro valor solto de antes. */ --stack-gap: var(--space-8); --stack-gallery-gap-col: var(--space-8); /* TETO DA GRADE — acima desta largura de página, as duas colunas param de crescer. Sem isto, a grade de 2 colunas (a partir de 700px, ver components.css §35) preenche o viewport inteiro; num monitor bem largo as duas pilhas continuam centralizadas cada uma na própria coluna, mas a coluna em si fica enorme, e o vão entre as duas pilhas cresce junto — elas se afastam quanto mais largo o monitor. 1024px é o valor pedido pelo Breno: o espaçamento que a grade tem NESSA largura vira o teto pra qualquer coisa maior; o que sobra de viewport além disso vira margem externa (via `margin-inline: auto` em `.c-project-gallery`), não espaço extra entre os projetos. Tablet e mobile não usam este token: a grade já é mais estreita que 1024px lá, então o teto fica inerte sozinho, sem precisar de media query pra isso. */ --gallery-freeze-w: 1024px; /* folga vertical reservada pro `--dy` de cada cartão e pra sombra da moldura. Fixa: é ela que mantém TODAS as legendas na mesma linha de base, por mais que os cartões subam e desçam dentro da pilha. */ --stack-pile-pad: var(--space-5); --stack-caption-gap: var(--space-6); --stack-fan: 10px; /* abertura do leque no hover */ --stack-lift: -6px; /* subida da pilha inteira no hover */ --type-stack-caption-size: 16px; --type-stack-caption-lh: 1.4; /* ESCALA DA PILHA. 1 em toda largura; o breakpoint de 1000px (mesmo limiar do leque do About, logo abaixo) reescreve pra 0.9 — pedido do Breno pra encolher só o desktop uns 10%, sem mexer no tablet nem no mobile. Aplicado como `width` de `.c-project-stack__pile` (components.css §35), não como `transform: scale()`: a pilha é um item de FLUXO normal dentro do `