/* ===================================================================== 4pbox — Landing 4pbox.com.br · TOKENS --------------------------------------------------------------------- HERDADOS do Design System 4pBox do BackOffice (Claude/Projects/4pbox/.../backoffice-4pshop/docs/design-system/). Princípios mantidos: "cinza + peso, não cor" · borda antes de sombra · 1 acento racionado · escuro é o tema canônico. O QUE MUDA aqui (adaptação back-office → marketing): - Escala tipográfica ampliada no topo (display de marketing) - Espaçamento de SEÇÃO generoso (o DS original é denso por design) - Tokens de largura de leitura (medida de texto) ===================================================================== */ :root { /* ---------- Escala neutra ink (idêntica ao DS) ---------- */ --ink-50: 220 14% 98%; --ink-100: 220 14% 96%; --ink-200: 220 13% 91%; --ink-300: 220 12% 84%; --ink-400: 220 10% 64%; --ink-500: 220 9% 46%; --ink-600: 220 11% 36%; --ink-700: 222 13% 26%; --ink-800: 222 15% 16%; --ink-900: 222 18% 11%; --ink-950: 222 20% 7%; /* ---------- Superfícies — tema ESCURO como canônico (hero do DS) ---------- */ --background: 222 18% 7%; /* quase-preto frio, nunca #000 */ --foreground: 220 14% 96%; --surface: 222 17% 9%; /* faixas alternadas */ --card: 222 16% 10%; /* +1 de elevação */ --card-foreground: 220 14% 96%; --muted: 222 15% 14%; --muted-foreground: 220 10% 64%; /* ---------- Ação primária = inversão de tom ---------- */ --primary: 220 14% 98%; /* branco no escuro */ --primary-foreground: 222 18% 9%; --primary-hover: 220 14% 92%; --primary-active: 220 13% 86%; /* ---------- Acento único, racionado (azul-ardósia) ---------- */ --brand: 214 60% 62%; /* #6496d8 — variante escura do DS */ --brand-foreground: 222 18% 9%; --ring: 214 60% 62%; /* ---------- Paleta funcional de dados (do DS, seção data-viz) ---------- Serve para CLASSIFICAR: distinguir um perfil do outro, uma etapa da seguinte, um canal de receita do vizinho. Não cria hierarquia (isso continua sendo peso tipográfico + escala de cinza) e não decora — se a cor não estiver separando coisas, ela não entra. */ --chart-1: 214 90% 64%; /* azul */ --chart-2: 160 65% 50%; /* verde */ --chart-3: 38 95% 60%; /* âmbar */ --chart-4: 258 85% 72%; /* violeta */ --chart-5: 340 80% 66%; /* rosa */ /* ---------- Bordas ---------- */ --border: 222 14% 18%; --border-strong: 222 13% 24%; /* ---------- Tipografia ---------- */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-display: 'Inter Tight', var(--font-sans); /* Escala ampliada para marketing (DS: display 40px · aqui hero até 64px) */ --fs-hero: clamp(2.125rem, 1.3rem + 3.6vw, 4rem); /* 34 → 64px */ --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); /* 28 → 40px */ --fs-h3: 1.375rem; /* 22px */ --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* 17 → 20px */ --fs-body: 1rem; /* 16px (marketing lê melhor que 14) */ --fs-sm: 0.875rem; --fs-overline: 0.6875rem; --tracking-tight: -0.02em; --tracking-overline: 0.14em; /* ---------- Espaçamento (grid 4px do DS) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* Respiro de SEÇÃO — a grande diferença vs. back-office. ⚠️ Este token é o maior item isolado de altura da página: ele conta DUAS vezes por seção (topo e base). No valor antigo (até 128px) eram 256px por seção — mais que a metade de uma dobra em notebook. Quem manda aqui é a ALTURA da janela, não a largura: veja o bloco de `max-height` no fim deste arquivo. A máscara da faixa alternada (.section--surface) acompanha este valor; não voltar a fixá-la em 120px. */ --section-y: clamp(3.5rem, 2rem + 5vw, 7rem); /* 56 → 112px */ --page-gutter: 24px; --content-max: 1160px; --measure: 68ch; /* largura de leitura confortável */ /* ---------- Raio (do DS: sóbrio) ---------- */ --radius-sm: 4px; --radius-md: 6px; --radius: 8px; --radius-xl: 12px; /* ---------- Movimento (do DS) ---------- */ --duration-fast: 120ms; --duration-base: 160ms; --duration-slow: 240ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); } @media (max-width: 767px) { :root { --page-gutter: 16px; } } /* ---------- Respiro de seção por ALTURA de tela ---------- Notebook é largo e baixo: a janela típica tem ~695px de altura útil (1536×695 medido na máquina do Thiago) e a de 1280×600 sobra só 527px depois do header. Um respiro calibrado pela LARGURA dá 108px justamente onde falta altura. Por isso o corte é por `max-height`, e só no desktop (`min-width: 1000px`) — em celular a página rola de qualquer jeito e o respiro pequeno do clamp já vale. Mesma lógica da dobra do hero em sections.css. Em tela alta (1920×950 e afins) nada muda: o respiro generoso continua, que é onde ele cabe e faz diferença. */ @media (min-width: 1000px) and (max-height: 820px) { :root { --section-y: 4rem; } /* 64px — poupa 89px por seção */ } @media (min-width: 1000px) and (max-height: 700px) { :root { --section-y: 3rem; } /* 48px — poupa 121px por seção */ } /* Tema claro alternativo (seções de contraste, se necessário). ⚠️ A paleta --chart-* acima é calibrada para fundo escuro. Se algum dia uma seção usar .theme-light, essas cinco precisam ser reescalonadas no DS (mais escuras) antes de aparecer sobre branco — não improvisar aqui. */ .theme-light { --background: 0 0% 100%; --foreground: 222 18% 11%; --surface: 220 14% 98%; --card: 0 0% 100%; --card-foreground: 222 18% 11%; --muted: 220 14% 96%; --muted-foreground: 220 9% 46%; --primary: 222 18% 11%; --primary-foreground: 0 0% 100%; --primary-hover: 222 18% 16%; --brand: 222 47% 40%; --border: 220 13% 91%; --border-strong: 220 12% 84%; }