/* ========================================================================== NEXUS DIGITAL SOLUTIONS — tokens.css ÚNICA FONTE DE ESTILO DA MARCA. Edite AQUI cores, fontes, escala e espaço; todos os blocos herdam. Nada de estilo de marca hardcoded nos blocos. -------------------------------------------------------------------------- Direção: Slash (ouro sobre obsidian, hairlines, pill) + Eich Studio (hero tipográfico caps, ritmo por respiro). ZERO glow/sombra decorativa. v2 (rodada Grimmes): canvas preto puro #000 com gradiente cinza-chumbo atmosférico por seção; superfícies/hairlines neutras (sem cast azul). v8 (08/08/2026) — SITE FLUIDO: toda a escala de tipo e o respiro de seção passam a ser clamp() de verdade (mín. pensado pra 320px, máx. pro desktop), o gutter é fluido e o container usa min() — nada de saltos entre breakpoints e ZERO scroll horizontal de 320px a 1920px. Alvos de toque mínimos de 44px em botões/links de menu. Visual intacto: mesmas cores, mesma Outfit, flat, hairlines, zero glow. ========================================================================== */ :root { /* ---- COR · canvas e superfícies (v2: preto puro, neutro, sem cast azul) ---- */ --bg: #000000; /* canvas da página — preto puro */ --bg-tint: #0d0d0d; /* cinza-chumbo do gradiente atmosférico de seção */ --surface-1: #101010; /* cards, tiles */ --surface-2: #161616; /* painéis elevados, hover de card */ --hairline: #1f1f1f; /* borda 1px — ÚNICO separador (nunca sombra) */ --hairline-2: #2a2a2a; /* borda de hover / inputs em foco neutro */ /* ---- v9 · SUPERFÍCIE CLARA (exceção, não é tema) ---- Só pra card cujo LOGO foi desenhado pra fundo claro e some no escuro (hoje: tile do DDD no bloco 03). Branco levemente quente pra não brigar com o ouro. Se um dia entrar outro logo assim, reusar estes tokens. */ --surface-light: #F5F5F4; /* fundo do card claro */ --text-dim-on-light: #5A5A55; /* legenda sobre o card claro (par do --text-dim) */ /* ---- COR · acento OURO (o único acento da agência) ---- */ --gold: #C9A227; /* base — botões, números, destaques */ --gold-hi: #E7C45A; /* hover / highlight */ --gold-dim: rgba(201, 162, 39, 0.35); /* bordas douradas discretas */ --ink-on-gold: #07140E; /* texto sobre botão dourado */ /* ---- COR · texto (corpo NUNCA branco puro) ---- */ --text-strong: #EAEEF5; /* headings, valores */ --text-body: #A6B0BF; /* parágrafos */ --text-dim: #6B7686; /* legendas, meta, placeholders */ /* ---- COR · funcional (só formulário) ---- */ --error: #D96A5B; /* erro de validação — dessaturado, sem alarde */ /* ---- TIPO · Outfit em tudo (Google Fonts, carregada no ) ---- */ --font: 'Outfit', -apple-system, 'Segoe UI', sans-serif; /* escala — hierarquia por TAMANHO, não por peso máximo. v8: mínimos recalculados pra caber em 320px sem estourar linha */ --fs-display: clamp(31px, 6.6vw, 84px); /* H1 hero */ --fs-h2: clamp(26px, 4.4vw, 52px); /* headline de seção */ --fs-h3: clamp(18px, 2vw, 22px); /* título de card */ --fs-stat: clamp(42px, 7vw, 88px); /* números gigantes */ --fs-body: clamp(15px, 0.9vw, 16px); --fs-body-lg: clamp(16px, 1.6vw, 19px); /* subtítulos de seção */ --fs-eyebrow: 12px; --fs-btn: 13px; --track-tight: -0.025em; /* display apertado */ --track-wide: 0.2em; /* eyebrows / botões uppercase */ /* ---- GEOMETRIA ---- */ --radius-card: 12px; --radius-input: 10px; --radius-pill: 999px; /* ---- LAYOUT (v8: gutter e respiro fluidos) ---- */ --container: 1200px; --gutter: clamp(18px, 4.2vw, 24px); --section-pad: clamp(64px, 9vw, 150px); /* respiro vertical entre seções */ --tap: 44px; /* alvo de toque mínimo (mobile) */ } /* ========================================================================== BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text-body); font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* v8: trava qualquer vazamento lateral. `clip` (e não `hidden`) porque não cria contexto de scroll — a nav sticky continua funcionando. */ overflow-x: clip; } /* v8: nada de imagem esticada nem estourando a coluna */ img, svg { display: block; max-width: 100%; } img { height: auto; } /* v8: quebra palavra gigante (URL, nome longo) em vez de gerar scroll lateral */ h1, h2, h3, p, li, a, span, summary { overflow-wrap: break-word; } a { color: inherit; text-decoration: none; } ::selection { background: var(--gold); color: var(--ink-on-gold); } /* ========================================================================== UTILITÁRIOS COMPARTILHADOS (usados por todos os blocos) ========================================================================== */ /* v8: min() + margin-inline — o container encolhe sozinho e nunca passa da largura da tela, em qualquer viewport */ .container { width: min(100%, var(--container)); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); } /* hairline de topo — o separador oficial entre seções (nunca sombra). v2: cada seção nasce num cinza-chumbo quase imperceptível sob a hairline e escorre pro preto puro — gradiente ATMOSFÉRICO de fundo, não glow. */ .section--rule { border-top: 1px solid var(--hairline); background: linear-gradient(180deg, var(--bg-tint) 0%, rgba(0, 0, 0, 0) 46%); } /* ---- ritmo de cabeçalho de seção: eyebrow → h2 → sub ---- */ .eyebrow { display: block; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } .h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--track-tight); line-height: 1.08; color: var(--text-strong); max-width: 21ch; } .h2--caps { text-transform: uppercase; } .section-sub { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--text-body); max-width: 56ch; margin-top: 20px; } /* centrado (hero, números, parceiros) */ .center { text-align: center; } .center .h2, .center .section-sub { margin-left: auto; margin-right: auto; } /* ---- botões: pill, uppercase — UM preenchido por viewport, resto ghost ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font); font-size: var(--fs-btn); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; padding: 18px 34px; min-height: var(--tap); /* v8: alvo de toque */ border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; white-space: nowrap; } /* preenchido — a ação principal do viewport */ .btn--solid { background: var(--gold); color: var(--ink-on-gold); } .btn--solid:hover { background: var(--gold-hi); } /* ghost — o mesmo CTA quando outro preenchido está por perto */ .btn--ghost { border-color: var(--hairline-2); color: var(--text-strong); background: transparent; } .btn--ghost:hover { border-color: var(--gold); color: var(--gold-hi); } /* ---- card base ---- */ .card { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-card); } /* ========================================================================== v8 · CAMADA MOBILE COMPARTILHADA Só o que vale pra TODAS as páginas. Ajuste de grid por bloco fica no CSS do próprio bloco (senão o inline do index.html sobrescreve). ========================================================================== */ @media (max-width: 640px) { /* botão: full-width dentro do container, nunca espremido nem cortado */ .btn { width: 100%; max-width: 420px; padding: 17px 24px; white-space: normal; text-align: center; } /* o CTA já vem centralizado nos blocos .center / *__cta */ .h2 { max-width: 100%; } .section-sub { max-width: 100%; } } /* ---- acessibilidade ---- */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }