/* ========================================================================== BEVET FUTURE — fundação do próximo sistema visual (healthtech premium, referência Apple Health × Stripe × Linear). Carregue por ÚLTIMO, depois de style.css e bevet.css. Não redefine os tokens da geração atual (--bv-… , --tinta, --verde) que o site em produção usa hoje — isso deixaria o site inteiro escuro nesta rodada, e a auditoria decidiu migrar por onda (marketing público primeiro, painel/CRM por último), não de uma vez. Em vez disso, este arquivo abre um namespace próprio (--bvf-*) e um conjunto de classes utilitárias (.bvf-*) que ficam prontas para uso e não afetam nenhuma página que ainda não foi migrada. Onda 01 (esta): fundação de token + utilitários, sem tocar em nenhuma página existente. Onda 02 em diante: home, público, auth, painel — cada uma passa a usar estas classes conforme entra na nova direção. ========================================================================== */ :root { /* ---------- superfície ---------- */ --bvf-obsidian: #03070D; /* fundo mais profundo — rodapé, faixa de fecho, letterbox de vídeo */ --bvf-midnight: #07111F; /* superfície principal do novo sistema — o "papel" dele */ --bvf-surface: #0C1929; /* painel/card elevado sobre midnight — primeiro degrau de profundidade */ --bvf-surface-2: #122336; /* segundo degrau — cabeçalho de tabela, estado ativo */ --bvf-line: rgba(140, 160, 188, .16); /* régua padrão sobre fundo escuro */ --bvf-line-strong: rgba(140, 160, 188, .30); /* régua de ênfase, borda de card elevado */ /* ---------- ação e dado ---------- */ --bvf-blue: #4D7CFE; /* electric blue — link, foco, hover, brilho. SÓ sobre fundo escuro, nunca com texto branco por cima (3.57:1, reprova AA) */ --bvf-blue-deep: #2854D9; /* preenchimento de botão primário — o único azul que aceita rótulo branco em cima (5.97:1, aprova AA) */ --bvf-cyan: #37D6D0; /* BEVET cyan — dado clínico, verificação, CRMV confirmado. 10.55:1 sobre midnight (AAA). Nunca em fundo claro (1.72:1) */ /* ---------- neutros e texto ---------- */ --bvf-ice: #EAF4FF; /* corpo de texto sobre escuro — 17:1, nunca branco puro */ --bvf-white: #F8FAFC; /* branco de sistema — título de maior peso, ícone */ --bvf-slate: #8CA0BC; /* texto secundário — neutro puxado pro azul, não cinza morto */ --bvf-slate-dim: #5E7290; /* meta, timestamp, texto terciário */ /* ---------- semântico (papel fixo, fora da paleta de ação) ---------- */ --bvf-ok: #27C98A; /* assinado, pago, confirmado */ --bvf-warn: #F5B942; /* pendência, prazo se aproximando */ --bvf-crit: #FF5C69; /* só o que bloqueia de fato: erro, cancelamento, não assinado */ --bvf-ok-t: rgba(39, 201, 138, .12); --bvf-warn-t: rgba(245, 185, 66, .12); --bvf-crit-t: rgba(255, 92, 105, .12); /* ---------- gradientes ---------- */ /* Assinatura da marca. Hero, faixa de fecho, borda de destaque. Um por página, nunca dois ao mesmo tempo. */ --bvf-gradient-primary: linear-gradient(115deg, #07111F 0%, #2854D9 58%, #37D6D0 100%); --bvf-gradient-secondary: linear-gradient(135deg, #07111F 0%, #4D7CFE 100%); /* Atmosfera de fundo em seção escura — sempre atrás do conteúdo. */ /* O lóbulo cíano fica atrás da coluna da direita (a visualização do produto), nunca atrás do headline — a 22% ele lavava o texto de verde. */ --bvf-gradient-ambient: radial-gradient(ellipse 95% 85% at 16% 2%, rgba(40, 84, 217, .50), transparent 64%), radial-gradient(ellipse 60% 55% at 94% 42%, rgba(55, 214, 208, .13), transparent 62%), var(--bvf-midnight); /* ---------- tipografia ---------- */ --bvf-sora: 'Sora', system-ui, -apple-system, sans-serif; /* headings — 600/700 */ --bvf-inter: 'Inter', system-ui, -apple-system, sans-serif; /* corpo e interface — 400/500/600 */ /* Escala editorial — display grande e compacto, tracking negativo faz a hierarquia (mesma lógica do sistema atual, fonte nova). */ --bvf-size-display: clamp(2.5rem, 5.6vw, 4.3rem); --bvf-size-h1: clamp(1.9rem, 4.2vw, 2.9rem); --bvf-size-h2: clamp(1.7rem, 3.4vw, 2.5rem); --bvf-size-h3: 1.12rem; --bvf-size-lede: clamp(1.02rem, 1.6vw, 1.18rem); --bvf-size-body: 1rem; --bvf-size-ui: .94rem; --bvf-size-label: .7rem; --bvf-size-data: 1.05rem; --bvf-size-porque: 1.28rem; /* título de linha em .bvf-porque — entre h3 e h2 */ --bvf-size-cta: clamp(1.9rem, 3.6vw, 2.8rem); /* frase de fecho — maior que h2, sem chegar a display */ --bvf-size-erro: clamp(3.2rem, 8vw, 5.6rem); /* numeral 404/500 — maior que display, decorativo */ /* ---------- espaçamento ---------- */ /* A escala de 8/12/24/40/96 do sistema atual já está correta — reaproveita. Só soma o respiro editorial maior que o hero/seção de produto pede. */ --bvf-space-xs: 8px; --bvf-space-sm: 12px; --bvf-space-md: 24px; --bvf-space-lg: 40px; --bvf-space-xl: 96px; --bvf-space-2xl: 120px; /* ---------- raio ---------- */ /* Zero, como o sistema atual — a nova direção troca cor e profundidade, não a lógica de forma. Régua e borda continuam fazendo a separação. */ --bvf-radius: 0px; /* ---------- borda ---------- */ --bvf-border: 1px solid var(--bvf-line); --bvf-border-strong: 1px solid var(--bvf-line-strong); /* ---------- sombra e brilho ---------- */ /* Sombra pesada só em overlay real (regra herdada do sistema atual). Brilho é o mecanismo novo — aparece só na ação primária, e só ativo (hover/focus), nunca em repouso. */ --bvf-shadow-float: 0 24px 60px rgba(3, 7, 13, .55); --bvf-glow-blue: 0 6px 26px -6px rgba(77, 124, 254, .55); --bvf-glow-cyan: 0 6px 24px -6px rgba(55, 214, 208, .45); /* ---------- motion ---------- */ --bvf-ease: cubic-bezier(.16, 1, .3, 1); --bvf-duration-fast: 150ms; --bvf-duration: 220ms; --bvf-duration-slow: 350ms; /* ---------- foco ---------- */ --bvf-focus: 2px solid var(--bvf-cyan); } /* ============================================================ utilitários Classes prontas para as próximas ondas consumirem. Tudo aqui é opt-in — nada sob .bvf-* é aplicado a um seletor global de página. */ .bvf-scope { background: var(--bvf-midnight); color: var(--bvf-ice); } /* ---------- superfícies ---------- */ .bvf-surface-obsidian { background: var(--bvf-obsidian); } .bvf-surface-midnight { background: var(--bvf-midnight); } .bvf-surface-elevated { background: var(--bvf-surface); border: var(--bvf-border); } .bvf-surface-glass { background: rgba(140, 160, 188, .07); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border: var(--bvf-border); } .bvf-gradient-primary { background: var(--bvf-gradient-primary); } .bvf-gradient-secondary { background: var(--bvf-gradient-secondary); } .bvf-gradient-ambient { background: var(--bvf-gradient-ambient); } /* ---------- tipografia ---------- */ .bvf-display, .bvf-h1, .bvf-h2, .bvf-h3 { font-family: var(--bvf-sora); color: var(--bvf-white); margin: 0; text-wrap: balance; } .bvf-display { font-weight: 700; font-size: var(--bvf-size-display); line-height: 1.02; letter-spacing: -.035em; } .bvf-h1 { font-weight: 700; font-size: var(--bvf-size-h1); line-height: 1.05; letter-spacing: -.032em; } .bvf-h2 { font-weight: 600; font-size: var(--bvf-size-h2); line-height: 1.08; letter-spacing: -.028em; } .bvf-h3 { font-weight: 600; font-size: var(--bvf-size-h3); line-height: 1.3; letter-spacing: -.012em; } .bvf-body { font-family: var(--bvf-inter); font-weight: 400; font-size: var(--bvf-size-body); line-height: 1.65; color: var(--bvf-ice); max-width: 62ch; } .bvf-lede { font-family: var(--bvf-inter); font-weight: 400; font-size: var(--bvf-size-lede); line-height: 1.55; color: var(--bvf-slate); max-width: 60ch; } .bvf-ui { font-family: var(--bvf-inter); font-weight: 500; font-size: var(--bvf-size-ui); color: var(--bvf-ice); } .bvf-label { font-family: var(--bvf-inter); font-weight: 600; font-size: var(--bvf-size-label); letter-spacing: .18em; text-transform: uppercase; color: var(--bvf-cyan); } /* Dado clínico — o substituto do IBM Plex Mono nesta direção. Continua inconfundível (peso 600 + tabular-nums + tracking + tinta cyan), só que sem abrir uma terceira família tipográfica. CRMV, valor, hora, dose. */ .bvf-data { font-family: var(--bvf-inter); font-weight: 600; font-size: var(--bvf-size-data); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--bvf-cyan); } /* ---------- réguas ---------- */ .bvf-trace { display: flex; align-items: center; gap: 12px; } .bvf-trace::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--bvf-line-strong), transparent); } .bvf-trace-node { width: 7px; height: 7px; flex: none; background: var(--bvf-cyan); box-shadow: 0 0 0 4px rgba(55, 214, 208, .14); } /* ---------- botões ---------- */ .bvf-btn { font-family: var(--bvf-inter); font-weight: 600; font-size: .92rem; letter-spacing: .005em; padding: 13px 22px; border-radius: var(--bvf-radius); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; transition: background var(--bvf-duration) var(--bvf-ease), border-color var(--bvf-duration) var(--bvf-ease), box-shadow var(--bvf-duration) var(--bvf-ease), color var(--bvf-duration) var(--bvf-ease); } .bvf-btn:focus-visible { outline: var(--bvf-focus); outline-offset: 3px; } .bvf-btn:disabled, .bvf-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; } .bvf-btn-primary { background: var(--bvf-blue-deep); color: var(--bvf-white); border-color: var(--bvf-blue-deep); } .bvf-btn-primary:hover { background: var(--bvf-blue); border-color: var(--bvf-blue); box-shadow: var(--bvf-glow-blue); } .bvf-btn-ghost { background: transparent; color: var(--bvf-ice); border-color: var(--bvf-line-strong); } .bvf-btn-ghost:hover { border-color: var(--bvf-blue); color: var(--bvf-white); } .bvf-btn-quiet { background: transparent; color: var(--bvf-slate); border-color: transparent; padding-left: 4px; padding-right: 4px; } .bvf-btn-quiet:hover { color: var(--bvf-cyan); } /* ---------- confiança / verificação ---------- */ .bvf-trust { display: inline-flex; align-items: center; gap: 11px; padding: 11px 16px; border: 1px solid rgba(55, 214, 208, .32); background: rgba(55, 214, 208, .07); border-radius: var(--bvf-radius); } .bvf-trust svg { width: 16px; height: 16px; flex: none; color: var(--bvf-cyan); } .bvf-trust b { display: block; font-family: var(--bvf-inter); font-size: .84rem; font-weight: 600; color: var(--bvf-white); } .bvf-trust span { display: block; font-family: var(--bvf-inter); font-size: .75rem; color: var(--bvf-slate); font-variant-numeric: tabular-nums; letter-spacing: .03em; } /* ---------- foco global dentro do escopo novo ---------- */ .bvf-scope :focus-visible { outline: var(--bvf-focus); outline-offset: 3px; } .bvf-scope ::selection { background: rgba(55, 214, 208, .22); } /* Movimento: já herda a regra global de prefers-reduced-motion definida em style.css (seletor universal *, *::before, *::after) — nenhuma regra adicional precisa ser duplicada aqui. */ /* ========================================================================== ONDA 02 — HERO DA HOME Só o hero e o cabeçalho migram nesta onda. O corpo da página continua claro de propósito: as seções abaixo do hero ainda usam a geração atual (.secao é transparente e herdaria um fundo escuro, deixando texto tinta sobre midnight). Elas entram nas ondas seguintes. ========================================================================== */ /* ---------- cabeçalho escuro, só nas páginas já migradas ---------- */ .bvf-page-dark .topo { background: rgba(7, 17, 31, .88); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--bvf-line); } .bvf-page-dark .marca img { filter: brightness(0) invert(1); } .bvf-page-dark .marca-nome { color: var(--bvf-white); } .bvf-page-dark .marca-sub { color: var(--bvf-slate); } .bvf-page-dark .nav a { font-family: var(--bvf-inter); font-weight: 500; color: var(--bvf-slate); transition: color var(--bvf-duration) var(--bvf-ease); } .bvf-page-dark .nav a:hover { color: var(--bvf-white); } .bvf-page-dark .nav a::after { background: var(--bvf-cyan); } .bvf-page-dark .menu-botao { color: var(--bvf-ice); border-color: var(--bvf-line-strong); } .bvf-page-dark .menu-botao:hover, .bvf-page-dark .menu-botao:focus-visible { background: rgba(140, 160, 188, .12); } .bvf-page-dark .pular-link { background: var(--bvf-blue-deep); color: var(--bvf-white); } .bvf-page-dark .topo :focus-visible { outline: var(--bvf-focus); outline-offset: 3px; } /* Achado de auditoria: style.css tem `a:focus-visible, button:focus-visible, .btn:focus-visible { outline: var(--laranja) }` (mapeia pra --bv-ink, quase preto) com especificidade (0,0,1,1) — maior que o `:focus-visible` genérico de bevet.css (0,0,1,0), então qualquer /