/* Direção visual v4 — "HÉLIO" Pop art brasileiro × futurismo utópico. Um croma só (amarelo-sinal), preto de impressão e branco de papel. Sem cyberpunk, sem retrô. Regra de contraste inegociável (medida, não estimada): sinal sobre tinta 16,5:1 OK — pode ser texto tinta sobre sinal 16,5:1 OK — pode ser prancha inteira tinta sobre papel 18,1:1 OK — leitura longa sinal sobre papel 1,15:1 NÃO — amarelo em fundo claro é massa, nunca letra */ /* ---------- raiz da escala ---------- Toda a escala tipográfica é em rem, então ela depende do font-size do — que o Astra define pelo customizador. Local ele estava em 14,59px e no servidor em 17px: a MESMA página saía 16% maior no ar, e o título do contato transbordava em 360px por causa disso. Fixar em 100% torna o desenho independente do customizador e ainda respeita quem aumentou a fonte no navegador. Este arquivo só é carregado na página HÉLIO, então a regra não alcança o resto do site. */ html { font-size: 100%; } /* ---------- tipografia auto-hospedada (53KB no total) ---------- */ @font-face { font-family: "Archivo Black"; src: url("../fonts/archivo-black-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; src: url("../fonts/archivo-var-latin.woff2") format("woff2"); font-weight: 100 900; /* variável: um arquivo cobre 400/600/800 */ font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } :root { /* ---------- paleta HÉLIO ---------- O preto é TINTA, não fundo: vale para borda, contorno, texto e título. Nenhuma superfície do site usa preto puro — as bandas escuras são grafite, com viés frio para casar com o papel. */ --h-paper: #f4f5f2; --h-paper-2: #ffffff; --h-ink: #0b0b0c; /* só como tinta */ --h-graphite: #23272b; /* banda escura — amarelo 11,9:1 · papel 13,9:1 */ --h-graphite-2: #2c3136; /* superfície elevada (cards, blog) */ --h-graphite-deep: #1a1d20; /* painel de arte — amarelo 13,3:1 */ --h-signal: #ffe500; --h-signal-2: #f5ce00; --h-slate: #6e7073; --h-mist: #9a9ca1; /* ---------- ponte para as pranchas ainda não convertidas (F3) ---------- Elas foram escritas para fundo escuro + texto claro. Mantê-las em "tinta" preserva o contraste correto do amarelo como texto; virá-las para papel agora tornaria todo rótulo de acento ilegível (1,15:1). */ --c-void: #23272b; --c-void-2: #1f2327; --c-surface: #2c3136; --c-surface-glass: rgba(44, 49, 54, 0.72); --c-line: rgba(255, 255, 255, 0.14); --c-line-strong: rgba(255, 255, 255, 0.24); --c-ink: #f4f5f2; --c-ink-soft: #c3c5c8; --c-ink-faint: #9a9ca1; --c-accent: #ffe500; --c-accent-rgb: 255, 229, 0; --c-accent-ink: #0b0b0c; /* o brilho neon era vocabulário cyberpunk — pop art é chapado */ --glow-sm: none; --glow-md: none; --glow-lg: none; /* ---------- tipografia ---------- */ --f-display: "Archivo Black", "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif; /* nota: a raiz da escala é fixada em html { font-size: 100% } logo abaixo */ --f-body: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif; --f-mono: var(--f-body); /* a mono saiu junto com o registro cyberpunk */ /* Escala fluida — a manchete é fechada pela linha mais longa, nunca pelo gosto: acima disso a palavra vaza e é cortada silenciosamente. */ --t-xs: clamp(0.72rem, 0.69rem + 0.12vw, 0.8rem); --t-sm: clamp(0.85rem, 0.81rem + 0.18vw, 0.95rem); --t-base: clamp(1rem, 0.94rem + 0.25vw, 1.12rem); --t-lg: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); --t-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); --t-3xl: clamp(2.5rem, 1.7rem + 3.6vw, 4.8rem); --t-4xl: clamp(2.9rem, 1.8rem + 5.2vw, 6.4rem); /* Fechado pela linha mais longa da manchete ("Criatividade"), medida com Range — não pelo gosto. A razão largura/corpo dessa linha é 7,525; a escala é a reta que a mantém dentro da prancha em 360px e em 1280px, com ~4% de folga. Com a manchete presa a uma coluna de 603px ela media 758px e transbordava por baixo do retrato; agora ocupa a prancha inteira e por isso pode crescer de 6,3rem para 8,5rem. */ --t-5xl: clamp(2.2rem, 0.24rem + 10.33vw, 8.5rem); --container: 1180px; --rule: 5px; /* calha grossa de HQ */ } /* Archivo Black já é o peso máximo: pedir bold ao navegador gera falso-negrito e engorda a mancha. */ h1, h2, h3, h4, .lfb-h1, .lfb-h2, .lfb-h3 { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.025em; text-wrap: balance; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Abertura por corte (quadro de HQ), não fade. Só esconde quando o JS confirmou que vai animar — sem JS, JS lento ou falha do observer, o conteúdo nasce visível. */ @media (prefers-reduced-motion: no-preference) { .lfb-js .lfb-reveal { clip-path: inset(0 100% 0 0); opacity: 0.001; transition: clip-path 0.62s cubic-bezier(0.16, 0.84, 0.34, 1), opacity 0.3s ease; } .lfb-js .lfb-reveal.is-in { clip-path: inset(0 0 0 0); opacity: 1; } }