/* ===================================================================== dvTheme — Navy Fosco (FINAL, deployável) Cola único no footer.php. Aplica em TODAS as páginas via . Objetivo: fim dos blocos brancos, cards em VIDRO FOSCO ("tipo PNG"), ritmo navy suave, contraste garantido, dourado (kickers/CTAs) preservado. NÃO altera o fundo do .hero-saas. Não cobre o canvas de partículas. Auto-contido, sem imagens/fontes externas. ===================================================================== */ :root{ --dv-navy: #0f1e33; /* base escura */ --dv-navy-2: #0c1c33; /* variação profunda */ --dv-navy-0: #0a1626; /* mais escuro (rodapé) */ --dv-navy-lite: #16283f; /* "claro" sutil (ex-branco) */ --dv-gold: #eab54c; --dv-gold-2: #d4af37; --dv-gold-3: #f4c15d; --dv-gold-soft: rgba(234,181,76,.26); --dv-ink: #eef3fb; /* texto claro forte */ --dv-ink-soft: #bccadd; /* texto secundário */ --dv-glass: rgba(15,30,51,.55); /* vidro padrão */ --dv-glass-2: rgba(22,40,63,.62); /* vidro sobre navy-lite */ --dv-glass-brd: rgba(234,181,76,.22); /* borda dourada sutil */ --dv-glass-brd2:rgba(255,255,255,.10); /* borda clara sutil */ --dv-shadow: 0 18px 48px -22px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06); --dv-radius: 16px; --dv-blur: saturate(130%) blur(14px); } /* ------------------------------------------------------------------ */ /* 1) BASE — navy contínuo por trás de tudo (fecha qualquer fresta */ /* branca e serve de fundo mesmo se o canvas faltar). */ /* ------------------------------------------------------------------ */ html,body{ background-color: var(--dv-navy) !important; } body{ color: var(--dv-ink); } /* ------------------------------------------------------------------ */ /* 2) SEÇÕES hoje brancas -> navy fosco translúcido. */ /* Bordas mais opacas (emenda invisível entre seções) + miolo mais */ /* translúcido (deixa as partículas douradas transparecerem). */ /* O HERO não é tocado. */ /* ------------------------------------------------------------------ */ .problem-section, .compare-section, .how-section, .dv-ai-sec, body:not(.home) .section{ background-color: transparent !important; background-image: linear-gradient(180deg, rgba(15,30,51,.94) 0%, rgba(22,40,63,.66) 50%, rgba(15,30,51,.94) 100%) !important; color: var(--dv-ink) !important; border-top: 0 !important; border-bottom: 0 !important; } /* Seções já escuras: normaliza o tom para casar no ritmo (sem cortes) */ .dv-video-sec, .final-cta{ background-color: var(--dv-navy) !important; color: var(--dv-ink) !important; } /* Topo de páginas internas: funde o inner-hero no corpo */ .inner-hero{ background-color: var(--dv-navy) !important; background-image: radial-gradient(1100px 460px at 50% -12%, rgba(234,181,76,.09), transparent 60%) !important; color: var(--dv-ink) !important; } /* ------------------------------------------------------------------ */ /* 3) CONTRASTE — texto claro dentro das superfícies escuras. */ /* Escopo em títulos/parágrafos/listas (não afeta botões/CTA). */ /* ------------------------------------------------------------------ */ .problem-section :where(h1,h2,h3,h4,h5,h6), .compare-section :where(h1,h2,h3,h4,h5,h6), .how-section :where(h1,h2,h3,h4,h5,h6), .dv-ai-sec :where(h1,h2,h3,h4,h5,h6), .dv-video-sec :where(h1,h2,h3,h4,h5,h6), .final-cta :where(h1,h2,h3,h4,h5,h6), .inner-hero :where(h1,h2,h3,h4,h5,h6), body:not(.home) .section :where(h1,h2,h3,h4,h5,h6){ color: var(--dv-ink) !important; } .problem-section :where(p,li,blockquote,figcaption,dd,dt), .compare-section :where(p,li,blockquote,figcaption,dd,dt), .how-section :where(p,li,blockquote,figcaption,dd,dt), .dv-ai-sec :where(p,li,blockquote,figcaption,dd,dt), .dv-video-sec :where(p,li,blockquote,figcaption,dd,dt), .final-cta :where(p,li,blockquote,figcaption,dd,dt), .inner-hero :where(p,li,blockquote,figcaption,dd,dt), body:not(.home) .section :where(p,li,blockquote,figcaption,dd,dt){ color: var(--dv-ink-soft) !important; } /* Links de texto dentro das seções: dourado legível (poupa botões) */ .problem-section a:not(.btn):not([class*="button"]):not([class*="btn"]):not([class*="cta"]), .compare-section a:not(.btn):not([class*="button"]):not([class*="btn"]):not([class*="cta"]), .how-section a:not(.btn):not([class*="button"]):not([class*="btn"]):not([class*="cta"]), .dv-ai-sec a:not(.btn):not([class*="button"]):not([class*="btn"]):not([class*="cta"]), .inner-hero a:not(.btn):not([class*="button"]):not([class*="btn"]):not([class*="cta"]), body:not(.home) .section a:not(.btn):not([class*="button"]):not([class*="btn"]):not([class*="cta"]){ color: var(--dv-gold-3) !important; } /* ------------------------------------------------------------------ */ /* 4) CARDS -> VIDRO FOSCO TRANSLÚCIDO ("transparente tipo PNG") */ /* ------------------------------------------------------------------ */ .pain-card, .compare-card, .darvigo-reveal, .dv-ai-card, .floating-metric, .feature-card, .card{ background: var(--dv-glass) !important; background: color-mix(in srgb, var(--dv-navy) 58%, transparent) !important; background-image: linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 40%) !important; -webkit-backdrop-filter: var(--dv-blur); backdrop-filter: var(--dv-blur); border: 1px solid var(--dv-glass-brd2) !important; border-top: 1px solid var(--dv-glass-brd) !important; /* fio dourado premium */ border-radius: var(--dv-radius) !important; box-shadow: var(--dv-shadow) !important; color: var(--dv-ink) !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; } /* Vidro um tom mais claro quando sobre seções navy-claro */ .compare-section .compare-card, .how-section .feature-card, .how-section .card, .problem-section .pain-card{ background: var(--dv-glass-2) !important; background: color-mix(in srgb, var(--dv-navy-lite) 62%, transparent) !important; } /* Card de IA com leve tom dourado */ .dv-ai-card{ background-image: linear-gradient(160deg, rgba(234,181,76,.10) 0%, rgba(255,255,255,0) 46%) !important; } /* Hover: eleva e acende a borda dourada */ .pain-card:hover, .compare-card:hover, .darvigo-reveal:hover, .dv-ai-card:hover, .floating-metric:hover, .feature-card:hover, .card:hover{ transform: translateY(-4px); border-color: var(--dv-gold-soft) !important; box-shadow: 0 26px 60px -22px rgba(0,0,0,.72), 0 0 0 1px var(--dv-gold-soft), inset 0 1px 0 rgba(255,255,255,.08) !important; } /* Texto interno dos cards: contraste garantido */ .pain-card :where(h1,h2,h3,h4,h5,h6,strong,b), .compare-card :where(h1,h2,h3,h4,h5,h6,strong,b), .darvigo-reveal :where(h1,h2,h3,h4,h5,h6,strong,b), .dv-ai-card :where(h1,h2,h3,h4,h5,h6,strong,b), .feature-card :where(h1,h2,h3,h4,h5,h6,strong,b), .card :where(h1,h2,h3,h4,h5,h6,strong,b){ color: var(--dv-ink) !important; } .pain-card :where(p,li,span,small,label,td,th), .compare-card :where(p,li,span,small,label,td,th), .darvigo-reveal :where(p,li,span,small,label,td,th), .dv-ai-card :where(p,li,span,small,label,td,th), .feature-card :where(p,li,span,small,label,td,th), .card :where(p,li,span,small,label,td,th){ color: var(--dv-ink-soft) !important; } /* Métrica flutuante: vidro mais forte (destaca sobre o mockup) + número dourado */ .floating-metric{ background: color-mix(in srgb, var(--dv-navy-2) 70%, transparent) !important; color: var(--dv-ink) !important; } .floating-metric :where(strong,b,.value,.num,[class*="value"],[class*="num"],h1,h2,h3){ color: var(--dv-gold-3) !important; } .floating-metric :where(span,small,label,p){ color: var(--dv-ink-soft) !important; } /* Imagens dentro de cards: cantos suaves */ .pain-card img,.compare-card img,.darvigo-reveal img, .dv-ai-card img,.feature-card img,.card img{ border-radius:12px; } /* ------------------------------------------------------------------ */ /* 5) KICKERS DOURADOS — preservados/realçados (vence o texto claro) */ /* ------------------------------------------------------------------ */ .section-kicker, [class*="kicker"]{ color: var(--dv-gold) !important; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; background: transparent !important; } /* ------------------------------------------------------------------ */ /* 6) PÍLULAS / CHIPS / TAGS soltas -> mini-vidro dourado coeso. */ /* Tokens seguros: [class~="tag"] (evita "vantagens/montagem" em */ /* PT), + chip/pill/badge/nicho por substring. Nunca pega links. */ /* ------------------------------------------------------------------ */ :where(.problem-section,.compare-section,.how-section,.dv-ai-sec, .final-cta,.inner-hero,.hero-saas,body:not(.home) .section) :is([class~="tag"],[class*="chip"],[class*="pill"],[class*="badge"], .nicho,.niche):not(a):not(button):not([class*="btn"]):not([class*="cta"]){ background: rgba(234,181,76,.10) !important; background: color-mix(in srgb, var(--dv-gold) 12%, transparent) !important; color: var(--dv-gold-3) !important; border: 1px solid var(--dv-glass-brd) !important; border-radius: 999px !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; text-shadow: none !important; } /* Chips do comparativo: neutros (preserva legibilidade de sim/não) */ .compare-card :is([class~="tag"],[class*="chip"],[class*="pill"],[class*="badge"]){ background: rgba(255,255,255,.06) !important; color: var(--dv-ink) !important; border: 1px solid var(--dv-glass-brd2) !important; } /* Se um "chip" for na verdade link/botão, não recebe o skin de pílula */ a[class~="tag"],a[class*="chip"],a[class*="pill"],a[class*="badge"], button[class~="tag"],button[class*="chip"],button[class*="pill"],button[class*="badge"]{ color: inherit; } /* ------------------------------------------------------------------ */ /* 7) NÃO QUEBRAR BOTÕES / CTAs DOURADOS */ /* ------------------------------------------------------------------ */ :is(a,button,.btn,[class*="btn"],[class*="button"],[class*="cta"], input[type="submit"],input[type="button"]){ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* CTA dourado mantém texto navy escuro legível (contraste AA) */ .btn-primary,.btn-gold,.cta-gold, [class*="btn-gold"],[class*="cta-primary"], .final-cta .btn,.hero-saas .btn-primary, :is(.btn,[class*="btn"],[class*="cta"])[style*="eab54c"], :is(.btn,[class*="btn"],[class*="cta"])[style*="d4af37"]{ color: #10203a !important; } /* Botão secundário/outline dentro do navy: vidro dourado */ .btn-outline,.btn-ghost, [class*="btn"][class*="outline"], [class*="btn"][class*="ghost"]{ background: rgba(234,181,76,.08) !important; color: var(--dv-gold-3) !important; border: 1px solid rgba(244,193,93,.42) !important; } /* ------------------------------------------------------------------ */ /* 8) BLOCOS BRANCOS RESIDUAIS: tabelas, painéis, divisores */ /* ------------------------------------------------------------------ */ .compare-section table, body:not(.home) .section table{ background: transparent !important; color: var(--dv-ink) !important; border-color: var(--dv-glass-brd2) !important; } .compare-section :where(th,td), body:not(.home) .section :where(th,td){ border-color: var(--dv-glass-brd2) !important; } .compare-section thead :where(th), body:not(.home) .section thead :where(th){ background: rgba(234,181,76,.10) !important; color: var(--dv-gold-2) !important; } .problem-section hr,.compare-section hr,.how-section hr, .dv-ai-sec hr,.final-cta hr,.inner-hero hr, body:not(.home) .section hr{ border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); } /* ------------------------------------------------------------------ */ /* 9) FALLBACK sem backdrop-filter (contraste garantido) */ /* ------------------------------------------------------------------ */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ .pain-card,.compare-card,.darvigo-reveal,.dv-ai-card, .floating-metric,.feature-card,.card{ background: rgba(13,26,46,.92) !important; } :where(.problem-section,.compare-section,.how-section,.dv-ai-sec, .final-cta,.inner-hero,.hero-saas,body:not(.home) .section) :is([class~="tag"],[class*="chip"],[class*="pill"],[class*="badge"],.nicho,.niche){ background: rgba(20,36,60,.95) !important; } } /* ------------------------------------------------------------------ */ /* 10) ACESSIBILIDADE — reduzir movimento */ /* ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce){ .pain-card,.compare-card,.darvigo-reveal,.dv-ai-card, .floating-metric,.feature-card,.card{ transition: none !important; } .pain-card:hover,.compare-card:hover,.darvigo-reveal:hover, .dv-ai-card:hover,.floating-metric:hover,.feature-card:hover,.card:hover{ transform: none !important; } }