/* ============================================================================= DRIVER-PLUS.CSS — Complementos específicos da landing do Driver+ ----------------------------------------------------------------------------- Carregado DEPOIS de todo o design system Aurora. Contém apenas o que os componentes .ds-* não cobrem: as cores semânticas de sinal (🟢🟡🔴), os cartões de sinal, o card de análise de lucro, os chips das marcas parceiras e alguns ajustes finos de ordem/coluna. Tudo lê tokens do DS quando possível. ========================================================================== */ :root { /* Página forçada em tom escuro (o DS já é dark, reforçamos o contexto). */ color-scheme: dark; /* Fundo das seções mais escuro que o padrão do DS (#0a1120) — um azul quase preto, para dar mais contraste com os cartões/imersivos por cima e destacar ainda mais a foto full-bleed da hero. Sobrescreve só o token semântico --surface-page (não o --color-paper-050 bruto), então outros tokens que leem a cor base diretamente (ex: --text-on-accent) não mudam. */ --surface-page: #05070d; /* ------------------------------------------------------------------------- Cores de sinal — única adição de paleta. Tons de joia para conviver com o fundo azul-meia-noite; cada cor tem uma variante -glow (alpha) p/ a "luz". ------------------------------------------------------------------------- */ --dp-signal-good: #34d399; /* verde esmeralda — Ótima */ --dp-signal-good-glow: rgb(52 211 153 / 0.35); --dp-signal-mid: #e0c25c; /* âmbar dourado — Regular (harmoniza c/ o acento) */ --dp-signal-mid-glow: rgb(224 194 92 / 0.35); --dp-signal-low: #f87171; /* vermelho coral — Baixa */ --dp-signal-low-glow: rgb(248 113 113 / 0.35); } /* Pílulas/eyebrows que não devem esticar dentro de flex-columns. */ .dp-inline-start { align-self: flex-start; } /* ========================================================================= LUZ AMBIENTE GLOBAL ------------------------------------------------------------------------- Camada fixa atrás de tudo (z-index:-1, abaixo do conteúdo mas acima do background do body). É ela que dá ao vidro dos cards algo para refratar — sem isso, translucidez sobre fundo chapado vira só "cinza transparente". Fixed + radial puro: não há repaint por scroll nem filter:blur(). ========================================================================= */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(46rem 46rem at 88% 6%, rgb(212 175 55 / 0.10), transparent 70%), radial-gradient(52rem 52rem at 2% 44%, rgb(36 64 110 / 0.35), transparent 72%), radial-gradient(40rem 40rem at 72% 88%, rgb(212 175 55 / 0.07), transparent 70%); } /* Auras por seção — o helper .ds-aura vem do DS; aqui só a cor e a posição, que são decisões editoriais desta página. */ .dp-aura--signal { --aura-x: 50%; --aura-y: 8%; --aura-size: 56rem; --aura-opacity: 0.7; } .dp-aura--privacy { --aura-x: 18%; --aura-y: 44%; --aura-size: 44rem; --aura-color: radial-gradient(closest-side, rgb(52 211 153 / 0.13), transparent); } .dp-aura--cta { --aura-x: 50%; --aura-y: 52%; --aura-size: 50rem; } /* O DS obriga quem hospeda uma aura a recortá-la (.ds-section:has(> .ds-aura) → overflow: clip). Isso só é invisível se o corte cair na CAUDA do radial, onde ele já é transparente. No Sinalizador não caía: com --aura-y: 8% e o diâmetro travado em max-width:130vw (~507px num aparelho de 390px), quase metade do orbe ficava acima do topo da seção e era cortada com o dourado ainda aceso — uma faixa horizontal reta marcando a divisão com a §Assistente. Descer o centro mantém o brilho no alto da seção (a intenção editorial) e joga a borda do círculo para dentro da seção, onde o alpha já é zero. As auras de Privacidade (y 44%) e CTA (y 52%) já ficam contidas. */ @media only screen and (max-width: 767px) { .dp-aura--signal { --aura-y: 26%; --aura-size: 34rem; } } /* ========================================================================= MARCADOR DE SEÇÃO — filete dourado antes do eyebrow. Um detalhe pequeno e consistente que amarra as 11 seções sem depender de ilustração; aplica-se só aos eyebrows de cabeçalho, não a toda .ds-mono. ========================================================================= */ .ds-section-header .ds-mono, .dp-split-2 .ds-mono { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-ink-500); } .ds-section-header .ds-mono::before, .dp-split-2 .ds-mono::before { content: ""; width: 1.5rem; height: 1px; flex: 0 0 auto; background: linear-gradient(90deg, transparent, var(--brand-accent-vivid)); } /* ========================================================================= NAVBAR — três cápsulas de vidro independentes (logo · links · ações) ------------------------------------------------------------------------- Em vez de uma única pílula contínua, o nav vira três blocos flutuantes com respiro entre eles: a marca (círculo), os links (pílula) e as ações (botão dourado + toggle mobile). Ao rolar, as cápsulas de vidro ganham mais opacidade e sombra — o CTA dourado já se destaca por si. ========================================================================= */ /* O sticky vive no
(filho direto do body, altura = página inteira), não no