/* ============================================================ RBBT — TOKENS GLOBAIS ------------------------------------------------------------ Este é o ÚNICO arquivo que você precisa editar para mudar a aparência do site inteiro. Ele tem 3 camadas: 1. AJUSTE RÁPIDO → as ~15 variáveis que mudam tudo 2. PALETA CRUA → nomes de cor do design system 3. SEMÂNTICA → o que cada cor/medida significa na página (o CSS de layout só consome esta camada) Regra prática: mexa na camada 1. Se precisar de mais controle, desça para a 2 e a 3. Nunca escreva um hex direto no main.css. ============================================================ */ /* ============================================================== FONTE DE TÍTULO — PP Neue Machina (Inktrap) -------------------------------------------------------------- Mesma fonte de título do site anterior (rbbtlab.ai). É uma fonte PAGA da fundição Pangram Pangram — os arquivos aqui foram copiados do site antigo, que é da própria RBBT. Antes de publicar este site em um domínio novo, confirme com a Pangram Pangram (ou verifique os termos da licença já comprada) se ela cobre o novo domínio — a maioria das licenças de webfont é por domínio. Só 3 pesos existem: 300 (Light — o mais usado no site antigo, em título, subtítulo e wordmark da nav), 400 (Regular) e 800 (Ultrabold). Não invente pesos intermediários (500/600) para --font-display. ============================================================== */ @font-face { font-family: 'PP Neue Machina'; src: url('../_assets/fonts/PPNeueMachina-InktrapLight.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Neue Machina'; src: url('../_assets/fonts/PPNeueMachina-InktrapRegular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Neue Machina'; src: url('../_assets/fonts/PPNeueMachina-InktrapUltrabold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; } :root { /* ========================================================== 1 · AJUSTE RÁPIDO ========================================================== */ /* Marca */ --brand-accent: #3f6dff; /* azul elétrico — cor mestre da RBBT */ --brand-sales: #45cf82; /* verde — RBBT Sales */ --brand-social: #f05eae; /* rosa — RBBT Social */ --brand-canvas: #040506; /* fundo da página (quase preto) */ --brand-action: #e6e6e6; /* preenchimento dos botões primários */ --brand-action-text: #454647; /* texto sobre o botão primário */ /* Tipografia — dois papéis, duas fontes. --font-display: só em títulos, headline do hero e wordmark da nav. --font-sans: todo o texto corrido, botões, nav, badges, listas. */ --font-display: 'PP Neue Machina', var(--font-sans); --font-sans: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Números de destaque e glifos de ícone (24–32px/500), conforme o DESIGN.md. No macOS, system-ui já resolve para SF Pro — sem download extra. */ --font-numeric: 'SF Pro Text', 'SF Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* Escala / ritmo */ --page-max-width: 1200px; /* largura máxima do conteúdo */ --page-gutter: 24px; /* respiro lateral no mobile */ --section-gap: 90px; /* espaço vertical entre seções (reduzido em 25%) */ --radius-card: 20px; /* raio dos cards */ --radius-panel: 24px; /* raio dos painéis grandes (CTA, mídia) */ --radius-control: 10px; /* raio de botões e inputs */ /* Vidro — a assinatura do Raycast. Suba o alpha do fill para deixar as superfícies mais sólidas; desça para deixá-las mais translúcidas. */ --glass-fill: rgba(13, 15, 18, 0.37); --glass-fill-hover: rgba(20, 22, 26, 0.46); --glass-border: rgba(142, 140, 144, 0.20); /* cinza quente, não neutro */ --glass-border-hover: rgba(142, 140, 144, 0.42); --blur-glass: 36px; /* painéis e cards */ --blur-nav: 48px; /* barra de navegação */ --blur-soft: 16px; /* elementos pequenos (badges, pills) */ /* Movimento — durações pensadas para hover ficar fluido, não instantâneo. Menos que ~200ms o olho lê como "corte seco"; a partir daí, o movimento tem tempo de ser percebido como um gesto contínuo. */ --motion-press: 160ms; /* só o :active — o clique precisa parecer imediato */ --motion-fast: 320ms; /* hover de botões, badges, links, ícones pequenos */ --motion-base: 540ms; /* cards, painéis, imagens — superfícies maiores */ --motion-nav: 780ms; /* header: encolher, mudar fundo e borda juntos */ --motion-slow: 950ms; /* revelação no scroll, entrada de página */ /* --ease-out é a curva "fluida" padrão daqui pra frente: início rápido, cauda longa e suave, sem solavanco — use em qualquer hover/transform que precise parecer um gesto, não um corte. --ease-spring fica reservado a elementos pequenos e lúdicos (o diamante da logo) — em superfícies grandes o overshoot lê como exagero, não como fluidez. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-quint: cubic-bezier(0.23, 1, 0.32, 1); /* saída longa e suave — revelação no scroll */ --ease-smooth: cubic-bezier(0.4, 0, 0.22, 0.96); /* fades e trocas de cor */ --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); /* leve overshoot — só em elementos pequenos */ /* Atmosfera do hero (troque para mudar o "clima" da abertura). Os três --hero-beam-* são as barras diagonais difusas atrás do título: violeta na frente, azul elétrico no meio, orquídea ao fundo. Troque os três por tons de uma mesma família e a abertura inteira muda de clima sem tocar no main.css. */ /* O nome histórico --hero-glow-warm permanece como alias da cor principal: assim, qualquer uso legado acompanha o azul de marca sem criar uma segunda fonte de verdade na paleta. */ --hero-glow-warm: var(--brand-accent); --hero-glow-cool: #143ca3; --hero-glow-deep: #02193b; --hero-beam-near: #7b4dff; /* violeta — a barra dominante */ --hero-beam-mid: #3f6dff; /* azul elétrico */ --hero-beam-far: #a86bff; /* orquídea, mais clara e mais ao fundo */ --hero-beam-halo: #2a1673; /* índigo profundo — o halo em volta das barras */ /* Variação Sales — mesma hierarquia de profundidade do hero principal, agora em verdes para a página carregar a cor mestre do produto. */ --hero-sales-near: #45cf82; /* verde principal */ --hero-sales-mid: #239760; /* verde de sustentação */ --hero-sales-far: #8aefb4; /* verde claro ao fundo */ --hero-sales-halo: #0d4a31; /* verde profundo do halo */ --hero-sales-deep: #021d14; /* base escura do wash */ /* Quanto as barras se deslocam com o cursor (parallax do hero). 0px desliga o efeito sem mexer no JS. */ --hero-parallax: 22px; /* ========================================================== 2 · PALETA CRUA (nomes do design system) ========================================================== */ --color-void-black: #040506; --color-ink: #07080a; --color-obsidian: #111214; --color-graphite: #1b1c1e; --color-slate: #2f3031; --color-hairline: #363739; --color-iron: #454647; --color-smoke: #6a6b6c; --color-ash: #9c9c9d; --color-mist: #e6e6e6; --color-pure-white: #ffffff; --color-coral-pulse: #ff6363; --color-ember-hush: #452324; --color-electric-sky: #63a1ff; --color-cobalt-edge: #143ca3; --color-deep-space: #02193b; --color-signal-green: #4ade80; /* status "ativo" — única cor funcional fora do coral */ --color-signal-amber: #fbbf24; /* status "em desenvolvimento" */ /* ========================================================== 3 · SEMÂNTICA ========================================================== */ /* Superfícies */ --surface-canvas: var(--brand-canvas); --surface-card: var(--color-ink); --surface-recessed: var(--color-obsidian); --surface-badge: var(--color-graphite); --surface-accent-tint: var(--color-ember-hush); /* Status — só para indicadores funcionais (integrações, selos de estado). Nunca use fora desse contexto; o resto do sistema é achromático + coral. */ --status-live: var(--color-signal-green); --status-dev: var(--color-signal-amber); /* Texto */ --text-primary: var(--color-pure-white); --text-secondary: var(--color-ash); --text-muted: var(--color-smoke); --text-inverse: var(--brand-action-text); /* Bordas e traços */ --border-hairline: var(--color-hairline); --border-faint: rgba(255, 255, 255, 0.08); --border-inset: rgba(255, 255, 255, 0.05); /* Escala tipográfica — valores fixos do design system */ --text-eyebrow: 11px; --text-nano: 9px; --text-micro: 12px; --text-label: 13px; --text-label-lg: 14px; --text-body: 16px; --text-body-lg: 18px; --text-subheading: 20px; --text-heading-sm: 24px; --text-heading: 32px; --text-heading-lg: 56px; --text-display: 64px; /* Escala fluida — o que o layout realmente usa */ --type-hero: clamp(34px, 6.2vw, var(--text-heading-lg)); --type-section: clamp(26px, 3.6vw, var(--text-heading)); --type-card: clamp(19px, 2.2vw, var(--text-heading-sm)); --type-lede: clamp(16px, 1.6vw, var(--text-body-lg)); /* Entrelinhas e tracking */ --leading-tight: 1.15; --leading-snug: 1.25; --leading-body: 1.6; --tracking-eyebrow: 0.073em; --tracking-mono: 0.05em; /* PP Neue Machina fecha o tracking em tamanho grande — mesmo valor usado no site antigo (-2% no hero, -1% nos títulos menores). Nunca tracking positivo em --font-display: essa fonte não é a Inter, o "whisper" do DESIGN.md original não se aplica aqui. */ --tracking-display: -0.02em; --tracking-display-sm: -0.01em; /* Pesos — 500/600/700 só existem em Montserrat (--font-sans). PP Neue Machina (--font-display) só tem 300 / 400 / 800. */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-ultrabold: 800; /* Espaçamento — grade de 8px */ --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-80: 80px; --space-96: 96px; --space-120: 120px; /* Raios — escala do Raycast (4·6·8·12·16·20·24) */ --rounding-xs: 4px; --rounding-sm: 6px; --rounding-normal: 8px; --rounding-md: 12px; --rounding-lg: 16px; --rounding-xl: 20px; --rounding-xxl: 24px; --radius-pill: 9999px; --radius-badge: 8px; --radius-nav: 16px; /* Elevação --shadow-glass é a receita exata do raycast.com: sombra ambiente larga, hairline preto de meio pixel e o brilho branco de 0.5px no topo. */ --shadow-glass: 0 4px 40px 8px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(0, 0, 0, 0.8), inset 0 0.5px rgba(255, 255, 255, 0.30); --shadow-glass-hover: 0 12px 48px 8px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.8), inset 0 0.5px rgba(255, 255, 255, 0.45); /* Alternativa opaca ("keyboard key" do DESIGN.md). Não está em uso — troque --shadow-glass por esta nos cards se quiser superfícies sólidas. */ --shadow-key: rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.14) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset; --shadow-action: rgba(0, 0, 0, 0.03) 0px 7px 3px 0px, rgba(0, 0, 0, 0.25) 0px 4px 4px 0px; /* Brilho superior de meio pixel, isolado para reuso */ --highlight-top: inset 0 0.5px rgba(255, 255, 255, 0.30); /* Cromo da navegação (o blur vem de --blur-nav, na camada 1). 64px = 56px +15% — hero e scroll-padding usam este token, então sobem junto automaticamente. */ --nav-height: 64px; }