/* ============================================================ FOCUS SALES EXPERTS USA — brand.css ⚠️ A ÚNICA fonte de cor, fonte e raio do site inteiro. Quando a identidade definitiva chegar, ESTE é o arquivo que muda (junto com assets/brand/logo.svg). Nenhum outro arquivo pode ter um #hex, um font-family literal ou um border-radius fixo — tudo consome estas custom properties. Tipografia: identidade definitiva, recebida em 12/09/2026 (Datatype + Akt + Data, self-hosted em assets/fonts/). Paleta: ainda PROVISÓRIA — o pacote de marca trouxe logo (preto) e as 3 fontes, mas nenhuma cor oficial. Mantido o azul-vazio profundo / glow ciano do moodboard (Direção 2 — Futurista) até Antonio confirmar uma paleta. Ver ARQUITETURA-US.md §6. 02/10/2026: a paleta EN agora é CLARA (pedido do Antonio na reunião de entrega). Papéis (--bg, --fg, --card…) + [data-surface] no fim do :root; a paleta crua continua aqui porque o BR ainda lê dela. ============================================================ */ /* ---------- Fontes de marca (self-hosted, ver assets/fonts/) ---------- Datatype e Akt são fontes variáveis (wdth/wght num único arquivo); Data é estática. Licenças em assets/fonts/LICENSE-*.txt. */ @font-face { font-family: "Datatype"; src: url("../assets/fonts/Datatype-Variable.woff2") format("woff2-variations"), url("../assets/fonts/Datatype-Variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; } @font-face { font-family: "Akt"; src: url("../assets/fonts/Akt-Variable.woff2") format("woff2-variations"), url("../assets/fonts/Akt-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Data"; src: url("../assets/fonts/Data-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } :root { /* ---------- Superfícies ---------- */ --void: #05070D; /* fundo base, quase preto azulado */ --deep: #0A1120; /* seções escuras */ --deep-2: #0D1526; /* seções escuras, variante */ --surface: #111A2E; /* cards sobre fundo escuro */ --surface-2:#16223B; /* cards em hover / estado elevado */ --paper: #EEF1F6; /* o respiro claro (interlúdio, insights) */ --paper-2: #E3E8F0; /* superfície de card sobre o claro */ /* ---------- Texto ---------- */ --ice: #EDF2FA; /* texto principal sobre escuro */ --muted: #90A2BE; /* texto secundário sobre escuro */ --muted-2: #647289; /* texto terciário sobre escuro (legendas, meta) */ --ink: #0A0F1C; /* texto principal sobre claro */ --ink-muted:#4C5A72; /* texto secundário sobre claro */ /* ---------- Sinal (o acento cromático — usar com parcimônia) ---------- */ --signal: #4FA8FF; --signal-2: #7CE7FF; --signal-ink: #04121F; /* texto sobre um fundo --signal sólido */ /* ---------- Linhas / bordas ---------- */ --line: rgba(237,242,250,.12); --line-soft:rgba(237,242,250,.07); --line-on-paper: rgba(10,15,28,.12); /* ---------- Sombra / glow ---------- */ --glow-signal: 0 0 60px rgba(79,168,255,.35); --glow-soft: 0 0 40px rgba(79,168,255,.16); --shadow-card: 0 24px 60px -24px rgba(0,0,0,.55); /* ---------- Tipografia ---------- Display: Datatype (variable, eixos wdth+wght) esticada — o motivo "futurista" do moodboard, e o mesmo corte angular do símbolo da marca. Corpo: Akt, humanista e legível. Mono/label: Data — geométrica, cantos cortados, usada só em doses curtas (eyebrow, ticker, números). */ --font-display: "Datatype", "Arial Narrow", sans-serif; --font-body: "Akt", -apple-system, "Segoe UI", sans-serif; --font-mono: "Data", "JetBrains Mono", "SF Mono", Consolas, monospace; /* --font-label: etiquetas, botões, badges e contadores em caixa alta. A Data (--font-mono) tem só 44 glifos: A–Z, espaço e ! + , - . / : ; ? Não tem dígito, não tem acento, não tem · → — %. Em português isso é fatal: "COTAÇÃO" vira "COTACAO" (o glifo acentuado aponta para a letra sem acento, então o acento some sem erro nenhum) e qualquer número cai numa fonte de fallback no meio da palavra — é o "parece que muda a fonte". O BR usa este token no lugar da Data em tudo que é texto; a Data fica só onde a string é escrita à mão em A–Z (ver br/css/story.css). O EN continua na Data: inglês não tem acento e o site está aprovado. */ --font-label: "Akt", -apple-system, "Segoe UI", sans-serif; --display-stretch: 118%; /* font-stretch aplicado nos títulos */ --display-stretch-hero: 122%; /* ---------- Forma ---------- Futurista = cantos cortados, não arredondados. --cut é o tamanho do chanfro (clip-path); --radius só existe para elementos que realmente precisam de curva (pills, inputs redondos, avatar). */ --radius: 3px; --radius-pill: 999px; --cut: 20px; --cut-sm: 12px; /* ---------- Layout ---------- */ --maxw: 1280px; --maxw-narrow: 760px; --maxw-read: 66ch; --gutter: clamp(20px, 5vw, 64px); /* ---------- Catálogo BR (adicionados 15/09/2026 — ver ARQUITETURA-BR.md §8.1) ---------- Usados só pelo catálogo em português. NUNCA alterar um token acima por causa do BR — isso mudaria o site em inglês sem ninguém perceber. Só adicionar aqui. */ --photo-bg: #FFFFFF; /* fundo da foto de produto — foto de fornecedor vem em branco */ --signal-on-paper: #1A5FB8; /* acento/link legível sobre --paper (--signal dá ~2,3:1, insuficiente) */ --danger: #D64545; /* erro de formulário */ --danger-on-paper: #B3261E; --success: #1F6E49; /* confirmação (painel, envio) — ajustado p/ 4,5:1 sobre --paper */ --warning-bg: #FFF4D6; /* aviso "dados legais vazios" no painel */ --warning-ink: #6B4E00; --paper-card: #FFFFFF; /* cartão/superfície elevada sobre --paper (produto, forms, steps) */ /* ---------- Tema claro do EN (adicionado 02/10/2026) ---------- O Antonio pediu o site mais claro (reunião de 01/10). O EN consome PAPÉIS (--bg, --fg, --card…), não a paleta crua; cada [data-surface] redefine os papéis (regras logo depois do :root). A paleta crua acima fica intacta porque o BR ainda lê dela. Só adicionar aqui. */ --navy: #0E2240; /* "janela" escura — azul de verdade, não preto */ --navy-2: #16305A; /* card sobre --navy */ --blue: #1A5FB8; /* faixa azul sólida (mesmo valor de --signal-on-paper) */ --white: #FFFFFF; --header-h: 73px; /* altura do .topbar.is-solid — medida em 02/10/2026 (desktop e celular). Se mexer no padding/logo do header, remedir. */ /* Papéis — o valor do :root é a superfície clara padrão (--paper) */ --bg: var(--paper); --bg-alt: var(--white); --bg-sunk: var(--paper-2); --card: var(--white); --fg: var(--ink); --fg-2: var(--ink-muted); --fg-3: #56637A; /* ≥4,5:1 em paper, paper-2 e branco */ --border: rgba(10,15,28,.12); --border-soft: rgba(10,15,28,.07); --border-strong: rgba(10,15,28,.24); --border-accent: rgba(26,95,184,.40); --accent: var(--signal); /* PREENCHIMENTO: botão, ponto, linha, luz */ --accent-fg: var(--signal-on-paper); /* TEXTO em acento: eyebrow, link, número */ --accent-2: var(--signal); --accent-tint: rgba(79,168,255,.12); --accent-glow: 0 12px 30px -12px rgba(79,168,255,.65); --shadow: 0 1px 2px rgba(10,15,28,.05), 0 18px 40px -26px rgba(10,15,28,.28); --field-bg: var(--white); --glass: rgba(255,255,255,.80); /* legenda sobre vídeo claro */ --watermark: rgba(10,15,28,.05); --header-bg: rgba(5,7,13,.82); /* era literal no components.css */ --scrim-hero: linear-gradient(90deg, rgba(238,241,246,.94) 0%, rgba(238,241,246,.78) 34%, rgba(238,241,246,0) 66%), linear-gradient(180deg, rgba(238,241,246,0) 72%, rgba(238,241,246,.9) 100%); --scrim-hero-mobile: linear-gradient(180deg, rgba(238,241,246,.5) 0%, rgba(238,241,246,.86) 55%, rgba(238,241,246,.96) 100%); --scrim-scene: linear-gradient(180deg, rgba(238,241,246,0) 74%, rgba(238,241,246,.55) 100%); --scrim-photo: linear-gradient(180deg, transparent 55%, rgba(14,34,64,.55) 100%); --map-land: var(--white); --map-border: rgba(10,15,28,.14); --map-origin: rgba(26,95,184,.08); --map-market: rgba(79,168,255,.12); /* mercado antes de a rota chegar */ --map-market-on: rgba(79,168,255,.32); /* mercado com a rota acesa */ /* ---------- Movimento ---------- */ --ease: cubic-bezier(.16,.84,.24,1); --ease-in: cubic-bezier(.55,0,.85,.35); --dur-fast: .22s; --dur: .45s; --dur-slow: .8s; } /* ---------- Superfícies do EN (02/10/2026) ---------- [data-surface] redefine os papéis para tudo que estiver dentro. .topbar e .site-footer são sempre escuros — o cabeçalho ficou como estava, a pedido do cliente. O BR também tem .topbar/.site-footer, mas o CSS dele não lê nenhum papel, então isto não muda nada lá. */ [data-surface="paper"] { --bg: var(--paper); --card: var(--white); } [data-surface="white"] { --bg: var(--white); --card: var(--paper); } [data-surface="sunk"] { --bg: var(--paper-2); --card: var(--white); } [data-surface="navy"] { --bg: var(--navy); --bg-alt: var(--navy); --bg-sunk: var(--navy); --card: var(--navy-2); --fg: var(--ice); --fg-2: var(--muted); --fg-3: #7E8DA6; --border: rgba(237,242,250,.14); --border-soft: rgba(237,242,250,.08); --border-strong: rgba(237,242,250,.28); --border-accent: rgba(79,168,255,.45); --accent-fg: var(--signal); --accent-2: var(--signal-2); --accent-tint: rgba(79,168,255,.14); --shadow: var(--shadow-card); --field-bg: var(--deep); --glass: rgba(14,34,64,.78); } [data-surface="blue"] { --bg: var(--blue); --card: rgba(255,255,255,.08); --fg: var(--white); --fg-2: #D1DFF1; --fg-3: #D1DFF1; --border: rgba(255,255,255,.22); --border-soft: rgba(255,255,255,.12); --accent: var(--white); --accent-fg: var(--white); --accent-2: var(--signal-2); } [data-surface="dark"], .topbar, .site-footer { --bg: var(--void); --bg-alt: var(--deep); --bg-sunk: var(--deep-2); --card: var(--surface); --fg: var(--ice); --fg-2: var(--muted); --fg-3: var(--muted-2); --border: var(--line); --border-soft: var(--line-soft); --border-strong: rgba(237,242,250,.24); --border-accent: rgba(79,168,255,.4); --accent-fg: var(--signal); --accent-2: var(--signal-2); --accent-tint: rgba(79,168,255,.09); --accent-glow: var(--glow-signal); --shadow: var(--shadow-card); --field-bg: var(--deep); } /* Corte de canto padrão — canto superior-direito chanfrado. Aplicado via classe utilitária, nunca redeclarado fora daqui. */ .cut-corner { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); } .cut-corner-sm { clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%); } .cut-corner-both { clip-path: polygon( var(--cut-sm) 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)), 0 var(--cut-sm) ); }