/* ============================================================ BFMIDI — LANDING (Site/) · TOKENS ------------------------------------------------------------ Só custom properties. Nenhuma regra de componente aqui. Carregar ANTES de css/style.css. DIREÇÃO: PRODUTO SOBRE BRANCO. O canvas claro e o azul vieram da referência pedida (morningstar.io). O que NÃO veio de lá é o valor exato do azul — ver o bloco AZUL abaixo; os deles reprovam em contraste e não podiam ser copiados como estão. TRÊS REGRAS GOVERNAM A PÁGINA INTEIRA: A) EXISTE UM MATERIAL ESCURO SÓ. Grafite é o corpo do aparelho. Quem o veste na página é a lâmina do seletor, a faixa do editor e o painel que substitui foto ausente — nada mais. Numa página branca, o escuro deixa de ser fundo e vira OBJETO: a lâmina e a controladora leem como a mesma peça de alumínio, e é isso que costura a dobra. B) AZUL É LUZ, NÃO ENFEITE. Ele só acende onde existe emissor: a barra do modelo ativo e o CTA. É o mesmo azul que o anel do footswitch 1 emite na foto logo abaixo do seletor — o indicador RIMA com o aparelho, não decora a página. C) SOMBRA DESCREVE LUZ SOBRE OBJETO, NUNCA ELEVAÇÃO DE UI. Sobre branco isso vira o vocabulário do estúdio: fundo infinito e sombra de contato sob a peça. Card não tem sombra — tem filete. ============================================================ */ :root { /* ---------- PAPEL ---------------------------------------- #FAFAFA é o branco do site de referência, adotado tal e qual: é o fundo que cobre 5,2 milhões de px² lá. Sobre ele o preto interno das fotos (recortes com alfa) para de ser buraco e passa a ser o corpo do produto. */ --paper: #FAFAFA; /* canvas da página */ --paper-2: #FFFFFF; /* placa elevada: célula de ficha, moldura de foto */ /* filete = LIMITE. Sobre papel ele é cinza, não branco. */ --hairline: #E4E4E7; --hairline-strong: #D5D5DA; /* Contorno de CONTROLE (botão fantasma). Mais escuro que o filete de propósito: o que identifica um controle precisa de 3:1; um divisor decorativo, não. */ --edge-control: #8E8E97; /* ---------- GRAFITE -------------------------------------- Amostrado do corpo anodizado nas fotos. Viés frio de 4 pontos no azul: alumínio fosco preto nunca é neutro. */ --graphite: #16161A; /* a lâmina do seletor, a faixa escura */ --graphite-lift: #212127; /* topo usinado da lâmina / leito do ativo */ /* ---------- TINTA ---------------------------------------- Contrastes medidos sobre --paper (#FAFAFA). */ --ink: #1A1A1A; /* 16,67:1 — títulos e números. É o preto da referência. */ --ink-2: #4E4E54; /* 7,92:1 (AAA) — corpo de texto */ --ink-3: #63636B; /* 5,70:1 (AA) — SÓ micro-rótulo; nunca corpo. Nasceu #6E6E76 (4,84:1): passava, mas o rótulo tem 10px e a margem sobre o mínimo era de 0,34. */ /* tinta sobre a lâmina escura */ --on-graphite: #F2F2F3; /* 16,13:1 */ --on-graphite-dim: #9A9AA2; /* 6,46:1 — aba inativa */ /* ---------- AZUL ----------------------------------------- A referência usa #0295CA e #1BB1FF. Nenhum dos dois entrou: medidos sobre o próprio papel #FAFAFA eles dão 3,27:1 e 2,29:1, abaixo do mínimo de 4,5:1 para texto. Copiá-los seria copiar um defeito. O azul daqui foi AMOSTRADO DA FOTO: os pixels do anel de LED aceso no footswitch 1 medem #005AFC no hero da 8SW+ e #004BFE nos anéis da vista de cima. É azul de LED, não azul de marca — e é por isso que a barra acesa do seletor pode rimar com o aparelho na foto logo abaixo dela. Três tons, um por FUNÇÃO, cada um medido no fundo em que realmente aparece: */ --blue: #0B57F0; /* MASSA: preenchimento do CTA, filetes. Branco sobre ele = 5,78:1 (AA). */ --blue-ink: #0A4CD8; /* TEXTO azul sobre papel = 6,62:1. */ --blue-lit: #3D8BFF; /* O LED ACESO, sobre a lâmina grafite = 5,44:1. O azul de massa ali daria só 3,32:1 e leria apagado, não aceso. */ /* o bloom da barra acesa. Núcleo curto (LED embutido) + halo largo (a luz sangrando no alumínio, como no anel real). */ --led-core: 0 0 12px 0 rgba(61, 139, 255, 0.90); --led-halo: 0 0 34px 4px rgba(61, 139, 255, 0.45); /* ---------- ESTÚDIO -------------------------------------- O vocabulário de foto de produto sobre branco: fundo infinito (o cinza que sobe atrás da peça) e sombra de contato (a elipse sob ela). Juntos, é o que faz o recorte POUSAR na página em vez de flutuar colado. */ --sweep: #EFEFF2; /* teto do fundo infinito */ --contact: rgba(26, 26, 32, 0.20); /* sombra de contato */ /* ---------- TIPOGRAFIA ----------------------------------- Mantida da versão anterior, e de propósito: a tipografia da referência é template de Wix (Arial em 249 elementos), então não havia o que aproveitar — copiá-la seria descer. Archivo é VARIÁVEL no eixo de largura (wdth 62–125). Os códigos de modelo (8SW+, NANO+) são PLACA DE IDENTIFICAÇÃO, e placa de metal é sempre semi-expandida. O mesmo arquivo serve o título em largura normal, sem segunda requisição. A mono é DE SISTEMA: micro-rótulos de 11px em caixa alta com 0.18em de tracking, tamanho em que SF Mono / Cascadia / Consolas são indistinguíveis. Custo zero. */ --font-display: "Archivo", "Arial Black", Helvetica, Arial, sans-serif; --font-body: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --wdth-plate: 115; /* eixo wdth da "placa" (nome de modelo) */ --fs-label: clamp(10px, 0.6vw, 11.5px); --ls-label: 0.18em; --fs-tab: clamp(15px, 2.05vw, 31px); --ls-tab: 0.005em; /* Título do hero. O teto de 66px é REALOCAÇÃO de orçamento vertical: a dobra é travada em 100svh, então cada pixel do título sai da foto. Medido em 1440x900 — a 78px sobravam 291px de altura para a controladora (401px de largura pintada, com `object-fit: contain`); a 66px ela vai a 517. */ --fs-h1: clamp(34px, 4.8vw, 66px); --ls-h1: -0.032em; --lh-h1: 0.90; --fs-h2: clamp(28px, 3.4vw, 46px); --ls-h2: -0.025em; --lh-h2: 0.96; --fs-lead: clamp(15px, 1.15vw, 18px); --lh-lead: 1.55; --fs-body: clamp(14.5px, 1.02vw, 16px); --lh-body: 1.6; /* ---------- RAIOS ---------------------------------------- "Cantos extremamente arredondados" é requisito do seletor. Ele e o CTA são pílula; o resto desce a escala. */ --r-pill: 999px; --r-card: 18px; --r-media: 14px; --r-chip: 6px; /* ---------- ESPAÇO (base 4px) ---------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-28: 112px; --maxw-page: 1240px; --maxw-fold: 1080px; --maxw-prose: 60ch; --sp-section: clamp(72px, 8vw, 128px); /* ---------- MOVIMENTO ------------------------------------ Uma curva só na página inteira. A barra acesa é o único movimento com personalidade; o resto é fade curto. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-slide: 0.44s; --dur-fade: 0.20s; /* anel de foco. #0B57F0 sobre papel = 5,53:1, bem acima dos 3:1 exigidos para elemento não-textual. */ --focus: var(--blue); } /* ============================================================ Reajustes por ALTURA. A dobra é travada em 100svh e precisa caber cabeçalho + seletor + título + foto + botões. Em notebook os saltos de tipografia por LARGURA não ajudam — quem falta é altura. O limiar é 880px (e não 768) porque 1536x864 é resolução comum de notebook e ficava de fora: sem o bloco, a controladora caía para 30% da largura da tela contra 37% logo abaixo do limiar. ============================================================ */ @media (max-height: 880px) and (min-width: 861px) { :root { /* O título cede primeiro, e o nome do modelo cede pouco: numa dobra espremida quem tem de sobreviver é o SELETOR, que é o elemento que o briefing põe em primeiro lugar. */ --fs-h1: clamp(30px, 3.6vw, 46px); --fs-tab: clamp(15px, 1.7vw, 25px); } } @media (max-width: 860px) { :root { --sp-section: clamp(56px, 9vw, 80px); --r-card: 14px; } }