/* ===== TEMA LIGHT — Softprox ===== Aplico só quando . Escuro é o padrão (sem atributo). Ilhas escuras (mockups) continuam escuras via :is() reasserta no fim. */ :root[data-theme="light"]{ color-scheme:light; } /* --- base --- */ [data-theme="light"] body{ background:#f4f5f8; color:#454a54; } [data-theme="light"]{ scrollbar-color:#c6cad3 #e9ebf0; } [data-theme="light"] ::-webkit-scrollbar-track{ background:#e9ebf0; } [data-theme="light"] ::-webkit-scrollbar-thumb{ background:#c6cad3; border-color:#e9ebf0; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background:#1F7A63; } [data-theme="light"] ::selection{ background:rgba(31,122,99,.22); } /* --- superfícies escuras -> claras --- */ [data-theme="light"] .card{ background:#ffffff; border-color:rgba(20,22,28,.09); } [data-theme="light"] .sp-dark, [data-theme="light"] .sp-darkbg{ background:#ffffff !important; } [data-theme="light"] .sp-dark-green{ background:#ffffff !important; } [data-theme="light"] .sp-ctabg{ background:#eceef3; } [data-theme="light"] .bg-surface{ background:#eceef3; } [data-theme="light"] .bg-base{ background:#ffffff; } [data-theme="light"] [style*="171719"]{ background:#eceef3 !important; } [data-theme="light"] .bg-\[\#1b1c20\]{ background:#ffffff !important; } [data-theme="light"] .bg-\[\#171719\]{ background:#eceef3 !important; } [data-theme="light"] .bg-\[\#191a1d\]{ background:#eceef3 !important; } /* --- header / footer (injetados pelo chrome.js) --- */ [data-theme="light"] header{ background:rgba(255,255,255,.72) !important; -webkit-backdrop-filter:saturate(180%) blur(12px) !important; backdrop-filter:saturate(180%) blur(12px) !important; border-color:rgba(20,22,28,.08) !important; } [data-theme="light"] footer{ background:#ffffff !important; border-color:rgba(20,22,28,.08); } [data-theme="light"] #mobileMenu{ background:#ffffff !important; border-color:rgba(20,22,28,.09) !important; } [data-theme="light"] .sp-lang-menu{ background:#ffffff !important; border-color:rgba(20,22,28,.1) !important; box-shadow:0 12px 30px rgba(20,22,28,.14) !important; } /* --- textos --- */ [data-theme="light"] .text-white{ color:#15171d; } [data-theme="light"] .text-zinc-200{ color:#2a2e37; } [data-theme="light"] .text-zinc-300{ color:#3c414b; } [data-theme="light"] .text-zinc-400{ color:#565b65; } [data-theme="light"] .text-zinc-500{ color:#6f757f; } [data-theme="light"] .text-zinc-600{ color:#8b919b; } [data-theme="light"] .text-green{ color:#1F7A63; } [data-theme="light"] .text-gradient{ background:linear-gradient(90deg,#0f9d73,#1F7A63,#0f9d73); background-size:200% auto; -webkit-background-clip:text; background-clip:text; } /* --- véus brancos -> escuros --- */ [data-theme="light"] .border-white\/5{ border-color:rgba(20,22,28,.07); } [data-theme="light"] .border-white\/10{ border-color:rgba(20,22,28,.1); } [data-theme="light"] .border-white\/15{ border-color:rgba(20,22,28,.14); } [data-theme="light"] .divide-white\/5 > * + *{ border-color:rgba(20,22,28,.07); } [data-theme="light"] .divide-white\/5{ border-color:rgba(20,22,28,.07); } [data-theme="light"] .bg-white\/5{ background:rgba(20,22,28,.04); } [data-theme="light"] .bg-white\/8{ background:rgba(20,22,28,.05); } [data-theme="light"] .bg-white\/10{ background:rgba(20,22,28,.06); } [data-theme="light"] .bg-white\/12{ background:rgba(20,22,28,.07); } [data-theme="light"] .bg-white\/\[\.02\]{ background:rgba(20,22,28,.025); } [data-theme="light"] .bg-white\/\[\.03\]{ background:rgba(20,22,28,.03); } [data-theme="light"] .bg-white\/\[\.04\]{ background:rgba(20,22,28,.035); } [data-theme="light"] .bg-white\/\[\.05\]{ background:rgba(20,22,28,.04); } [data-theme="light"] .ring-white\/5{ --tw-ring-color:rgba(20,22,28,.07); } [data-theme="light"] .hover\:bg-white\/\[\.02\]:hover{ background:rgba(20,22,28,.03); } [data-theme="light"] .hover\:bg-white\/5:hover{ background:rgba(20,22,28,.05); } [data-theme="light"] .hover\:bg-white\/10:hover{ background:rgba(20,22,28,.06); } [data-theme="light"] .hover\:border-white\/20:hover{ border-color:rgba(20,22,28,.2); } [data-theme="light"] .hover\:border-white\/25:hover{ border-color:rgba(20,22,28,.25); } /* --- inputs --- */ [data-theme="light"] .lf-input, [data-theme="light"] .qz-input{ background:#ffffff; border-color:rgba(20,22,28,.14); color:#15171d; } [data-theme="light"] .lf-input::placeholder, [data-theme="light"] .qz-input::placeholder{ color:#9096a0; } /* --- chips verdes ficam ok no claro --- */ [data-theme="light"] .bg-green\/12{ background:rgba(31,122,99,.16); } [data-theme="light"] .bg-green\/10{ background:rgba(31,122,99,.14); } /* --- hero: imagem escura de circuito baixa a opacidade no claro --- */ [data-theme="light"] .hero-photo{ opacity:.10; } [data-theme="light"] .aura{ background:radial-gradient(760px circle at 50% -10%, rgba(31,122,99,.14), transparent 60%), radial-gradient(500px circle at 88% 6%, rgba(31,122,99,.08), transparent 55%); } /* ================= ILHAS ESCURAS (mockups) — continuam dark ================= Os mockups são "telas de app" e usam as mesmas classes; reasserto os valores escuros dentro deles com maior especificidade pra vencerem o override. */ [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide,.hero-cover) .text-white{ color:#ffffff; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide,.hero-cover) .text-zinc-200{ color:#e4e4e7; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide,.hero-cover) .text-zinc-300{ color:#d4d4d8; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide,.hero-cover) .text-zinc-400{ color:#a1a1aa; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide,.hero-cover) .text-zinc-500{ color:#8b8e97; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide,.hero-cover) .text-green{ color:#1F7A63; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide,.hero-cover) .bg-white\/5{ background:rgba(255,255,255,.05); } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide,.hero-cover) .bg-white\/8{ background:rgba(255,255,255,.08); } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide,.hero-cover) .bg-white\/10{ background:rgba(255,255,255,.1); } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide,.hero-cover) .bg-white\/\[\.04\]{ background:rgba(255,255,255,.04); } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide,.hero-cover) .bg-white\/\[\.05\]{ background:rgba(255,255,255,.05); } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide,.hero-cover) .border-white\/5{ border-color:rgba(255,255,255,.06); } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide,.hero-cover) .border-white\/10{ border-color:rgba(255,255,255,.1); } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide,.hero-cover) .bg-green\/12{ background:rgba(31, 122, 99,.12); } /* botão de tema no rodapé */ .sp-theme-tg{ display:inline-flex; align-items:center; justify-content:center; height:36px; width:36px; border-radius:10px; border:1px solid rgba(255,255,255,.1); color:#9a9da4; transition:color .18s, border-color .18s; background:transparent; cursor:pointer; } .sp-theme-tg:hover{ color:#1F7A63; border-color:rgba(31,122,99,.4); } .sp-theme-tg svg{ height:17px; width:17px; } [data-theme="light"] .sp-theme-tg{ border-color:rgba(20,22,28,.14); color:#6f757f; } /* ===== correções de componentes com cor FIXA no CSS (2ª passada) ===== */ /* superfícies escuras extras -> claras */ [data-theme="light"] .panel, [data-theme="light"] .sp-fx, [data-theme="light"] .svc-mcard, [data-theme="light"] .faq details, [data-theme="light"] .ac{ background:#ffffff !important; border-color:rgba(20,22,28,.09); } [data-theme="light"] .qz-card{ background:linear-gradient(180deg,#ffffff,#f6f7f9) !important; border-color:rgba(20,22,28,.09); } /* hovers escuros -> claros (mantendo o "lift") */ [data-theme="light"] .card:hover{ background:#f7f8fb !important; box-shadow:0 20px 44px -26px rgba(20,22,28,.22), 0 8px 22px -18px rgba(31,122,99,.28) !important; } [data-theme="light"] .svc-card:hover{ background:#f1f3f8 !important; box-shadow:0 14px 30px -20px rgba(31,122,99,.35), 0 6px 16px -14px rgba(20,22,28,.18) !important; } [data-theme="light"] .sp-fx:hover{ background:#f7f8fb !important; box-shadow:0 15px 28px rgba(20,22,28,.1), 0 0 0 1px rgba(31,122,99,.25) !important; } [data-theme="light"] .svc-mcta:hover, [data-theme="light"] .btn-green:hover, [data-theme="light"] .cta .btn:hover{ background:#16624F !important; } /* textos fixos claros -> escuros */ [data-theme="light"] .svc-ic{ color:#6f757f; } [data-theme="light"] .svc-card > span:last-child{ color:#3c414b; } [data-theme="light"] .svc-mtitle, [data-theme="light"] .svc-mprice strong, [data-theme="light"] .faq summary, [data-theme="light"] .ac-q, [data-theme="light"] .qz-q{ color:#15171d; } [data-theme="light"] .qz-opt{ color:#2a2e37; } [data-theme="light"] .svc-mdesc, [data-theme="light"] .svc-mprice, [data-theme="light"] .svc-mlist li, [data-theme="light"] .svc-mic, [data-theme="light"] .sp-ic, [data-theme="light"] .faq details p, [data-theme="light"] .ac-a p, [data-theme="light"] .qz-chip, [data-theme="light"] .svc-mclose, [data-theme="light"] .rev-nav{ color:#565b65; } /* quiz: opções e caixa no claro */ [data-theme="light"] .qz-opt{ border-color:rgba(20,22,28,.11); background:rgba(20,22,28,.015); } [data-theme="light"] .qz-opt:hover{ border-color:rgba(31,122,99,.5); background:rgba(31,122,99,.07); } [data-theme="light"] .qz-opt.qz-on{ background:rgba(31,122,99,.12); color:#0b7a58; } [data-theme="light"] .qz-ck{ border-color:rgba(20,22,28,.18); } /* menu mobile: textos */ [data-theme="light"] #mobileMenu a:not(.bg-green){ color:#2a2e37; } [data-theme="light"] #mobileMenu .mm-title{ color:#15171d; } [data-theme="light"] #mobileMenu .mm-sub, [data-theme="light"] #mobileMenu .mm-ic{ color:#6f757f; } /* marquee: chips (cor inline) */ [data-theme="light"] #mq-track span{ color:#5a6069 !important; } /* hover verde vence o override de text-zinc-* (empate de especificidade + ordem) */ [data-theme="light"] .hover\:text-green:hover{ color:#1F7A63 !important; } [data-theme="light"] a:hover .text-green, [data-theme="light"] .hover\:underline:hover{ color:#1F7A63; } /* ===== números 01/02/03 do "como funciona" ===== */ [data-theme="light"] .cf-num{ color:rgba(20,22,28,.09) !important; } [data-theme="light"] .sp-fx:hover .cf-num, [data-theme="light"] .sp-fx.is-tap .cf-num{ color:rgba(31,122,99,.5) !important; } /* ===== BLOG ===== */ /* cards do índice */ [data-theme="light"] .postcard{ background:#ffffff !important; border-color:rgba(20,22,28,.09) !important; box-shadow:0 4px 10px -4px rgba(20,22,28,.1), 0 12px 28px -16px rgba(20,22,28,.16), 0 0 0 1px rgba(20,22,28,.06) !important; } /* artigos: prosa */ [data-theme="light"] article h1, [data-theme="light"] article h2, [data-theme="light"] article h3, [data-theme="light"] article h4, [data-theme="light"] article strong{ color:#15171d; } [data-theme="light"] article p, [data-theme="light"] article li, [data-theme="light"] article blockquote{ color:#3f4550; } [data-theme="light"] article .lede{ color:#565b65; } /* capa do card do blog (div com gradiente escuro inline) = ILHA ESCURA: o conteúdo (ART) continua claro-sobre-escuro */ [data-theme="light"] .postcard [style*="linear-gradient"] .text-white{ color:#ffffff; } [data-theme="light"] .postcard [style*="linear-gradient"] .text-zinc-200{ color:#e4e4e7; } [data-theme="light"] .postcard [style*="linear-gradient"] .text-zinc-300{ color:#d4d4d8; } [data-theme="light"] .postcard [style*="linear-gradient"] .text-zinc-400{ color:#a1a1aa; } [data-theme="light"] .postcard [style*="linear-gradient"] .text-zinc-500{ color:#8b8e97; } [data-theme="light"] .postcard [style*="linear-gradient"] .bg-white\/5{ background:rgba(255,255,255,.05); } [data-theme="light"] .postcard [style*="linear-gradient"] .bg-white\/\[\.06\]{ background:rgba(255,255,255,.06); } [data-theme="light"] .postcard [style*="linear-gradient"] .border-white\/5{ border-color:rgba(255,255,255,.06); } [data-theme="light"] .postcard [style*="linear-gradient"] .border-white\/10{ border-color:rgba(255,255,255,.1); } /* ===== artigos: inverte as variáveis (resolve CTA + prosa de uma vez) ===== */ [data-theme="light"]{ --bg:#f4f5f8; --card:#ffffff; --text:#15171d; --text2:#3f4550; --muted:#565b65; } /* ===== hero: pill "Software sob medida" (bg escuro fixo) ===== */ [data-theme="light"] .bg-\[\#191a1f\]{ background:rgba(31,122,99,.1) !important; } /* ===== segurança: se algum mockup usar .card, continua escuro ===== */ [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide,.hero-cover) .card{ background:#2b2d33; border-color:rgba(255,255,255,.07); } /* =================================================================== POLIMENTO PREMIUM (tema claro) — elevação, superfícies e contraste O que faz o claro parecer premium: cards que "flutuam" com sombra suave real (não o anel branco do dark, que some no branco). =================================================================== */ [data-theme="light"] body{ background:#f4f6f9; color:#4b5563; } /* hierarquia de superfície: seções alternadas um tom mais frio */ [data-theme="light"] .bg-surface, [data-theme="light"] .sp-ctabg, [data-theme="light"] [style*="171719"]{ background:#eef1f5 !important; } /* ---- ELEVAÇÃO dos cards (o "flutuar" no branco) ---- */ [data-theme="light"] .card, [data-theme="light"] .panel, [data-theme="light"] .postcard, [data-theme="light"] .qz-card, [data-theme="light"] .faq details, [data-theme="light"] .ac, [data-theme="light"] .svc-mcard{ background:#ffffff !important; border-color:rgba(17,24,39,.06) !important; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 24px -8px rgba(16,24,40,.10) !important; } [data-theme="light"] .card:hover, [data-theme="light"] .panel:hover, [data-theme="light"] .sp-fx:hover{ background:#ffffff !important; box-shadow:0 6px 14px -4px rgba(16,24,40,.08), 0 24px 44px -14px rgba(16,24,40,.18), 0 0 0 1px rgba(31,122,99,.3) !important; } [data-theme="light"] .postcard:hover{ box-shadow:0 8px 18px -6px rgba(16,24,40,.1), 0 28px 52px -16px rgba(16,24,40,.2) !important; } /* o card destacado dos planos (MAIS ESCOLHIDO) pop mais forte + anel verde */ [data-theme="light"] .sp-dark-green{ box-shadow:0 2px 6px rgba(16,24,40,.05), 0 18px 40px -12px rgba(31,122,99,.28) !important; border-color:rgba(31,122,99,.5) !important; } /* chips de serviço: elevação leve */ [data-theme="light"] .svc-card{ box-shadow:0 1px 2px rgba(16,24,40,.04) !important; } [data-theme="light"] .svc-card:hover{ box-shadow:0 10px 22px -10px rgba(31,122,99,.4), 0 4px 10px -6px rgba(16,24,40,.14) !important; } /* depoimentos ficam no trilho sem sombra (intencional) — mantém */ [data-theme="light"] #revTrack .card{ box-shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 20px -8px rgba(16,24,40,.1) !important; } /* contraste de texto mais crisp/premium */ [data-theme="light"] .text-white{ color:#111827; } [data-theme="light"] .text-zinc-300{ color:#374151; } [data-theme="light"] .text-zinc-400{ color:#4b5563; } [data-theme="light"] .text-zinc-500{ color:#6b7280; } [data-theme="light"]{ --text:#111827; --text2:#374151; --muted:#5b6472; } /* ===== MOCKUPS no tema claro ===== São "telas de produto" variadas (algumas escuras, outras claras tipo a loja). No claro, as claras se perdiam no fundo branco → dou uma sombra/moldura pros PAINÉIS brancos dos mockups separarem da página. */ [data-theme="light"] :is(#mockStage,.ms-slide,.svc-mmock-slide) .bg-white{ box-shadow:0 1px 3px rgba(16,24,40,.09), 0 16px 36px -12px rgba(16,24,40,.22); } /* o palco do mockup do hero ganha um leve respiro (não cola no fundo) */ [data-theme="light"] #mockStage{ border-radius:22px; } /* ===== depoimentos: setas + bolinhas no claro ===== */ [data-theme="light"] .rev-nav{ background:rgba(255,255,255,.92); border-color:rgba(17,24,39,.12); color:#5b6472; box-shadow:0 1px 2px rgba(16,24,40,.06), 0 6px 16px -6px rgba(16,24,40,.14); } [data-theme="light"] .rev-nav:hover{ border-color:rgba(31,122,99,.45); color:#1F7A63; } [data-theme="light"] .rev-dot{ background:rgba(17,24,39,.16); } [data-theme="light"] .rev-dot.on{ background:#1F7A63; } /* ===== hero: setas do carrossel de mockup (.ms-nav) no claro ===== */ [data-theme="light"] .ms-nav{ background:rgba(255,255,255,.92) !important; border-color:rgba(17,24,39,.12) !important; color:#5b6472 !important; box-shadow:0 1px 2px rgba(16,24,40,.06), 0 6px 16px -6px rgba(16,24,40,.14); } [data-theme="light"] .ms-nav:hover{ background:#1F7A63 !important; border-color:#1F7A63 !important; color:#0e1e16 !important; } /* ============================================================ FIX RAIZ DOS MOCKUPS: a moldura é .panel (mesma classe dos cards "Como funciona"). No hero ela DEVE ficar escura (é a "tela do produto"). Reasserto escuro dentro do #mockStage. ============================================================ */ [data-theme="light"] #mockStage .panel{ background:linear-gradient(168deg,#191a20,#131418) !important; border-color:transparent !important; box-shadow:0 30px 64px -22px rgba(16,24,40,.42), 0 8px 24px -12px rgba(16,24,40,.24) !important; } /* garante que o conteúdo do mockStage NÃO herde o texto escuro do tema claro */ [data-theme="light"] #mockStage{ color:#e7e7ea; } /* ===== fix: variáveis do artigo vencem o :root do blog.css (especificidade) ===== */ :root[data-theme="light"]{ --bg:#f4f6f9; --card:#ffffff; --text:#111827; --text2:#374151; --muted:#5b6472; } /* garante o box de CTA e a prosa claros mesmo com var perdendo */ [data-theme="light"] article .cta{ background:#ffffff !important; border-color:rgba(31,122,99,.3) !important; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 28px -10px rgba(16,24,40,.12); } [data-theme="light"] article .cta h3{ color:#111827 !important; } [data-theme="light"] article .cta p{ color:#5b6472 !important; } /* ===== "O que entregamos": miniatura da automação clara (consistência) ===== */ [data-theme="light"] .bg-\[\#212226\]{ background:#eef1f5 !important; } /* ===== dropdown de idioma: item selecionado (era color:#fff = invisível no claro) ===== */ [data-theme="light"] .sp-lang-opt.sp-on{ background:rgba(17,24,39,.05); color:#111827; } [data-theme="light"] .sp-lang-opt:hover{ background:rgba(17,24,39,.05); color:#111827; } [data-theme="light"] .sp-lang-mopt.sp-on{ background:rgba(31,122,99,.14); color:#0b7a58; border-color:rgba(31,122,99,.5); } [data-theme="light"] #sp-lang-tg:hover, [data-theme="light"] .sp-lang.open #sp-lang-tg{ background:rgba(17,24,39,.04); border-color:rgba(17,24,39,.15); } /* ===== hero: imagem de fundo (circuito escuro) invertida pro tema claro ===== */ [data-theme="light"] .hero-photo{ opacity:.5 !important; filter:invert(1) hue-rotate(180deg) brightness(1.02); } /* ===== hero: bolinhas do carrossel + legenda "Imagens ilustrativas" ===== */ [data-theme="light"] .ms-dot{ background:rgba(17,24,39,.18); } [data-theme="light"] .ms-dot.active{ background:#1F7A63; } /* ===== hero: legenda "Imagens ilustrativas" (.ms-note) mais legível ===== */ [data-theme="light"] .ms-note{ color:#5b6472 !important; } [data-theme="light"] .ms-note .text-zinc-200{ color:#1f2937 !important; } /* ===== "O que entregamos": formas das ilustrações visíveis no claro ===== */ [data-theme="light"] #entregamos .bg-white\/\[\.03\]{ background:rgba(17,24,39,.05) !important; } [data-theme="light"] #entregamos .bg-white\/5{ background:rgba(17,24,39,.07) !important; } [data-theme="light"] #entregamos .bg-white\/8{ background:rgba(17,24,39,.09) !important; } [data-theme="light"] #entregamos .bg-white\/10{ background:rgba(17,24,39,.11) !important; } [data-theme="light"] #entregamos .bg-white\/12{ background:rgba(17,24,39,.13) !important; } [data-theme="light"] #entregamos .bg-white\/15{ background:rgba(17,24,39,.15) !important; } [data-theme="light"] #entregamos .bg-white\/20{ background:rgba(17,24,39,.18) !important; } [data-theme="light"] #entregamos .bg-white\/25{ background:rgba(17,24,39,.22) !important; } /* ===== hero: textura de fundo um pouco mais escura/presente no claro ===== */ [data-theme="light"] .hero-photo{ opacity:.62 !important; filter:invert(1) hue-rotate(180deg) brightness(.86) contrast(1.06) !important; } /* ===== hovers no claro: sombra NEUTRA escura (não verde) ===== */ [data-theme="light"] .card:hover, [data-theme="light"] .panel:hover, [data-theme="light"] .sp-fx:hover{ box-shadow:0 6px 14px -4px rgba(16,24,40,.1), 0 24px 44px -14px rgba(16,24,40,.2), 0 0 0 1px rgba(17,24,39,.06) !important; } [data-theme="light"] .svc-card:hover{ box-shadow:0 8px 20px -10px rgba(16,24,40,.22), 0 3px 8px -4px rgba(16,24,40,.12) !important; } /* o card destacado dos planos mantém um leve anel verde (é o accent "mais escolhido") */ [data-theme="light"] .sp-dark-green:hover{ box-shadow:0 8px 18px -6px rgba(16,24,40,.14), 0 24px 46px -16px rgba(31,122,99,.28) !important; } /* ===== "entregamos": formas com mais contraste (wireframe visível) ===== */ [data-theme="light"] #entregamos .bg-white\/\[\.03\]{ background:rgba(17,24,39,.08) !important; } [data-theme="light"] #entregamos .bg-white\/5{ background:rgba(17,24,39,.11) !important; } [data-theme="light"] #entregamos .bg-white\/8{ background:rgba(17,24,39,.14) !important; } [data-theme="light"] #entregamos .bg-white\/10{ background:rgba(17,24,39,.17) !important; } [data-theme="light"] #entregamos .bg-white\/12{ background:rgba(17,24,39,.2) !important; } [data-theme="light"] #entregamos .bg-white\/15{ background:rgba(17,24,39,.24) !important; } [data-theme="light"] #entregamos .bg-white\/20{ background:rgba(17,24,39,.3) !important; } [data-theme="light"] #entregamos .bg-white\/25{ background:rgba(17,24,39,.36) !important; } /* ===== "entregamos": molduras dos devices (celular/janela) visíveis no claro ===== */ [data-theme="light"] #entregamos .bg-base{ background:#e7eaf0 !important; } [data-theme="light"] #entregamos .border-white\/12{ border-color:rgba(17,24,39,.2) !important; } [data-theme="light"] #entregamos .border-white\/10{ border-color:rgba(17,24,39,.16) !important; } [data-theme="light"] #entregamos .border-white\/5{ border-color:rgba(17,24,39,.1) !important; } /* ===== ícones de contato/redes (.contact-ic) no claro ===== */ [data-theme="light"] .contact-ic{ background:#eef1f5; border-color:rgba(17,24,39,.1); color:#5b6472; } [data-theme="light"] .contact-ic.em{ background:rgba(17,24,39,.06); border-color:rgba(17,24,39,.12); } /* ===== botão de tema: bare (sem badge), discreto, hover muda a cor ===== */ .sp-theme-tg{ height:28px !important; width:28px !important; border:0 !important; background:transparent !important; color:#71767d !important; box-shadow:none !important; transition:color .18s ease, transform .25s ease; padding:0; } .sp-theme-tg:hover{ color:#1F7A63 !important; transform:rotate(20deg); } .sp-theme-tg svg{ height:17px; width:17px; } [data-theme="light"] .sp-theme-tg{ color:#9096a0 !important; } [data-theme="light"] .sp-theme-tg:hover{ color:#1F7A63 !important; } /* ============================================================ CONTRASTE canvas × cards (tema claro): o fundo estava quase branco = cards sumiam. Fundo mais cinza → cards brancos saltam (mesmo princípio do dark: card mais claro que o fundo). ============================================================ */ [data-theme="light"] body{ background:#e7eaf0 !important; } /* seções alternadas: um tom distinto do canvas */ [data-theme="light"] .bg-surface, [data-theme="light"] .sp-ctabg, [data-theme="light"] [style*="171719"]{ background:#eef0f5 !important; } /* cards com definição maior pra separar do canvas */ [data-theme="light"] .card, [data-theme="light"] .panel, [data-theme="light"] .postcard, [data-theme="light"] .qz-card, [data-theme="light"] .faq details, [data-theme="light"] .ac, [data-theme="light"] .svc-mcard, [data-theme="light"] .svc-card{ border-color:rgba(17,24,39,.09) !important; box-shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 22px -6px rgba(16,24,40,.12) !important; } /* ===== botão de tema: hover temático (sol=amarelo no dark, lua=azul no claro) ===== */ .sp-theme-tg:hover{ color:#fbbf24 !important; } [data-theme="light"] .sp-theme-tg:hover{ color:#3b82f6 !important; } /* ===== botão de tema: um pouco maior ===== */ .sp-theme-tg{ height:34px !important; width:34px !important; } .sp-theme-tg svg{ height:21px !important; width:21px !important; } /* ============================================================ REFINO PREMIUM (tema claro) — paleta slate, profundidade real Canvas mais profundo + cards com sombra em camadas + slate text. ============================================================ */ [data-theme="light"] body{ background:#e2e5ec !important; color:#475569 !important; } [data-theme="light"] .bg-surface, [data-theme="light"] .sp-ctabg, [data-theme="light"] [style*="171719"]{ background:#eaedf2 !important; } /* cards: branco com borda fina + sombra em 3 camadas (premium/soft) */ [data-theme="light"] .card, [data-theme="light"] .panel, [data-theme="light"] .postcard, [data-theme="light"] .qz-card, [data-theme="light"] .faq details, [data-theme="light"] .ac, [data-theme="light"] .svc-mcard, [data-theme="light"] .svc-card{ background:#ffffff !important; border-color:rgba(15,23,42,.08) !important; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 4px 10px -3px rgba(15,23,42,.06), 0 14px 30px -12px rgba(15,23,42,.10) !important; } [data-theme="light"] .card:hover, [data-theme="light"] .panel:hover, [data-theme="light"] .sp-fx:hover{ box-shadow:0 2px 4px rgba(15,23,42,.05), 0 8px 18px -6px rgba(15,23,42,.1), 0 26px 50px -16px rgba(15,23,42,.18) !important; border-color:rgba(15,23,42,.11) !important; } [data-theme="light"] .svc-card:hover{ box-shadow:0 2px 6px rgba(15,23,42,.06), 0 12px 26px -12px rgba(15,23,42,.16) !important; } /* textos em slate (mais refinado que zinc) */ [data-theme="light"] .text-white{ color:#0f172a; } [data-theme="light"] .text-zinc-200{ color:#1e293b; } [data-theme="light"] .text-zinc-300{ color:#334155; } [data-theme="light"] .text-zinc-400{ color:#475569; } [data-theme="light"] .text-zinc-500{ color:#64748b; } [data-theme="light"] .text-zinc-600{ color:#94a3b8; } [data-theme="light"] .border-white\/5{ border-color:rgba(15,23,42,.07); } [data-theme="light"] .border-white\/10{ border-color:rgba(15,23,42,.1); } :root[data-theme="light"]{ --text:#0f172a; --text2:#334155; --muted:#64748b; --card:#ffffff; --bg:#e2e5ec; } /* ============================================================ REFINO v2 — referência big tech (Vercel/Linear/shadcn/Stripe): fundo CLARO + card branco definido pela BORDA nítida + sombra sutil. ============================================================ */ [data-theme="light"] body{ background:#f5f6f8 !important; } [data-theme="light"] .bg-surface, [data-theme="light"] .sp-ctabg, [data-theme="light"] [style*="171719"]{ background:#eef0f4 !important; } /* cards: branco, BORDA nítida (o recorte premium) + sombra sutil em camadas */ [data-theme="light"] .card, [data-theme="light"] .panel, [data-theme="light"] .postcard, [data-theme="light"] .qz-card, [data-theme="light"] .faq details, [data-theme="light"] .ac, [data-theme="light"] .svc-mcard, [data-theme="light"] .svc-card{ background:#ffffff !important; border-color:rgba(15,23,42,.11) !important; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 4px 12px -4px rgba(15,23,42,.07) !important; } [data-theme="light"] .card:hover, [data-theme="light"] .panel:hover, [data-theme="light"] .sp-fx:hover{ border-color:rgba(15,23,42,.16) !important; box-shadow:0 2px 4px rgba(15,23,42,.05), 0 10px 24px -8px rgba(15,23,42,.12), 0 20px 44px -16px rgba(15,23,42,.1) !important; } [data-theme="light"] .svc-card:hover{ border-color:rgba(31,122,99,.5) !important; box-shadow:0 2px 4px rgba(15,23,42,.05), 0 10px 22px -10px rgba(15,23,42,.14) !important; } /* ===== efeito "quadradinhos" (.tile) visível no tema claro ===== */ [data-theme="light"] .tile{ background-color:rgba(31,122,99,.18) !important; } :root[data-theme="light"]{ --fx-tile:rgba(31,122,99,.16); } /* ===== barra de scroll no tema claro: polegar verde (igual espírito do dark) ===== */ [data-theme="light"]{ scrollbar-color:#63c6a6 #e7eceb !important; } [data-theme="light"] ::-webkit-scrollbar-track{ background:#e7eceb !important; } [data-theme="light"] ::-webkit-scrollbar-thumb{ background:#63c6a6 !important; border:3px solid #e7eceb !important; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background:#1F7A63 !important; } /* --- Verde MAIS PROFUNDO no tema claro (o #1F7A63 fica claro demais no branco). Dark mantém #1F7A63; claro usa #1F7A63. Mantenho o padrão rgb()/var(--tw-*-opacity) pra as variações de opacidade (bg-green/12, etc.) continuarem funcionando. --- */ [data-theme="light"] .text-green{ color:rgb(31 122 99/var(--tw-text-opacity,1)) } [data-theme="light"] .bg-green{ background-color:rgb(31 122 99/var(--tw-bg-opacity,1)) } [data-theme="light"] .border-green{ border-color:rgb(31 122 99/var(--tw-border-opacity,1)) } [data-theme="light"] .ring-green{ --tw-ring-color:rgb(31 122 99/var(--tw-ring-opacity,1)) } [data-theme="light"] .fill-green{ fill:rgb(31 122 99/var(--tw-fill-opacity,1)) } [data-theme="light"] .stroke-green{ stroke:rgb(31 122 99/var(--tw-stroke-opacity,1)) } [data-theme="light"] .text-gradient{ background-image:linear-gradient(90deg,#1F7A63,#2a9b7c,#1F7A63) } [data-theme="light"] .btn-green{ background:#1F7A63; color:#fff } [data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background:#1F7A63 } [data-theme="light"] ::selection{ background:rgba(31,122,99,.18) } /* --- Cards do TEMA CLARO com mais DEFINIÇÃO (estavam quase invisíveis no cinza claro): borda mais nítida + sombra em camadas + hairline ring. Sem fundo pesado. Preservo o card destacado dos planos (.sp-dark-green, tem tratamento verde próprio). --- */ [data-theme="light"] .card:not(.sp-dark-green){ border-color:rgba(16,24,40,.14) !important; box-shadow:0 1px 2px rgba(16,24,40,.05), 0 12px 28px -12px rgba(16,24,40,.20), 0 0 0 1px rgba(16,24,40,.05) !important; } [data-theme="light"] .card:not(.sp-dark-green):hover{ border-color:rgba(31,122,99,.40) !important; box-shadow:0 3px 8px rgba(16,24,40,.08), 0 26px 52px -18px rgba(16,24,40,.26), 0 0 0 1px rgba(31,122,99,.30) !important; } /* --- Hover do verde SEMPRE mais escuro (Robson): no claro o botão vai de #1F7A63 -> #16624F (o hover global #16624F clareava no tema claro). --- */ [data-theme="light"] .btn-green:hover{ background:#16624F !important } [data-theme="light"] .sp-dark-green .btn-green:hover, [data-theme="light"] a.btn-green:hover{ background:#16624F !important } /* Setas do marquee no MESMO emerald do tema claro (eram #1F7A63 fixo no SVG) */ [data-theme="light"] #mq-track svg{ stroke:#1F7A63 !important } /* ================================================================ TEMA CLARO — consistência total (Robson): verde EMERALD #1F7A63 em tudo, hovers mais escuros (#16624F), MOCKUP claro (hero + modal), faixa visível. ================================================================ */ /* MOCKUP claro (reverte o force-dark que deixava tela escura nos 2 temas) */ [data-theme="light"] #mockStage .panel, [data-theme="light"] #svc-mmock, [data-theme="light"] .svc-mmock-slide{ background:#ffffff !important; } [data-theme="light"] #mockStage{ color:#334155 !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .text-white{ color:#0f172a !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .text-zinc-200{ color:#334155 !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .text-zinc-300{ color:#475569 !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .text-zinc-400{ color:#64748b !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .text-zinc-500{ color:#94a3b8 !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .text-green{ color:#1F7A63 !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .bg-white\/5{ background:rgba(15,23,42,.045) !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .bg-white\/8{ background:rgba(15,23,42,.06) !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .bg-white\/10{ background:rgba(15,23,42,.07) !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .bg-white\/\[\.04\]{ background:rgba(15,23,42,.035) !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .bg-white\/\[\.05\]{ background:rgba(15,23,42,.045) !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .bg-white\/\[\.06\]{ background:rgba(15,23,42,.05) !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .border-white\/5{ border-color:rgba(15,23,42,.08) !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .border-white\/10{ border-color:rgba(15,23,42,.11) !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .bg-green\/12{ background:rgba(31,122,99,.12) !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .bg-green\/15{ background:rgba(31,122,99,.14) !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .card{ background:#f6f7f9 !important; border-color:rgba(15,23,42,.08) !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) svg line[stroke*="255"]{ stroke:rgba(15,23,42,.09) !important; } [data-theme="light"] .ms-nav:hover{ background:#1F7A63 !important; border-color:#1F7A63 !important; color:#fff !important; } /* Botão do MODAL de serviço = emerald + hover mais escuro */ [data-theme="light"] .svc-mcta{ background:#1F7A63 !important; color:#fff !important; } [data-theme="light"] .svc-mcta:hover{ background:#16624F !important; } /* FAIXA (marquee) visível no claro + texto legível */ [data-theme="light"] .sp-mqband{ background:#eceef3 !important; border-top-color:rgba(15,23,42,.08) !important; border-bottom:1px solid rgba(15,23,42,.08); } [data-theme="light"] #mq-track span{ color:#5b6472 !important; } /* NAV: hover/ativo = emerald */ [data-theme="light"] .navlink.active, [data-theme="light"] .navlink:hover{ color:#1F7A63 !important; } [data-theme="light"] .navlink::after{ background:#1F7A63 !important; } /* WhatsApp flutuante = verde mais forte (emerald) no claro */ [data-theme="light"] .wa-float{ background:#1F7A63 !important; } [data-theme="light"] .wa-float:hover{ background:#16624F !important; } /* --- Hover-verde que faltava (classes compiladas do Tailwind) + botões secundários --- */ [data-theme="light"] .group:hover .group-hover\:text-green{ color:#1F7A63 !important; } [data-theme="light"] .hover\:bg-green\/8:hover{ background:rgba(31,122,99,.09) !important; } [data-theme="light"] a:hover .text-green{ color:#16624F !important; } /* Botões verdes: TEXTO BRANCO (emerald é escuro o bastante) */ [data-theme="light"] .btn-green{ color:#ffffff !important; } /* Botões SECUNDÁRIOS (ghost/outline): hover emerald, texto branco no preenchimento */ [data-theme="light"] .btn-ghost::before{ background:#1F7A63 !important; } [data-theme="light"] .btn-ghost:hover{ border-color:#1F7A63 !important; color:#ffffff !important; } [data-theme="light"] .btn-ghost:hover svg{ color:#ffffff !important; } /* Ícones que acendem no hover = emerald */ [data-theme="light"] .group:hover .group-hover\:text-green svg, [data-theme="light"] a:hover svg.text-green{ color:#1F7A63 !important; } /* --- Menu MOBILE: hover/ativo emerald + CTA com texto BRANCO --- */ [data-theme="light"] #mobileMenu a:not(.bg-green):hover{ color:#1F7A63 !important; } [data-theme="light"] #mobileMenu .mm-item:hover .mm-ic, [data-theme="light"] #mobileMenu .mm-item:hover .mm-title, [data-theme="light"] #mobileMenu .mm-active .mm-ic, [data-theme="light"] #mobileMenu .mm-active .mm-title{ color:#1F7A63 !important; } /* Texto ESCURO usado sobre verde (#0e1e16) vira BRANCO no claro (emerald é escuro) */ [data-theme="light"] .text-\[\#0e1e16\]{ color:#ffffff !important; } [data-theme="light"] a.bg-green,[data-theme="light"] .bg-green.text-\[\#0e1e16\]{ color:#ffffff !important; } /* Seletor de idioma (mobile) ativo = emerald */ [data-theme="light"] .sp-lang-mopt.sp-on{ border-color:rgba(31,122,99,.5) !important; background:rgba(31,122,99,.1) !important; } /* --- green-2 (#33dea6, verde mais claro) + botão "Visitar" do card + ícones + WhatsApp --- */ [data-theme="light"] .text-green-2{ color:#1F7A63 !important; } [data-theme="light"] .bg-green-2{ background:#1F7A63 !important; } [data-theme="light"] .lk-visit{ background:#1F7A63 !important; color:#ffffff !important; box-shadow:0 8px 20px -8px rgba(31,122,99,.5) !important; } [data-theme="light"] .sp-ic{ color:#64748b !important; } [data-theme="light"] .sp-fx:hover .sp-ic, [data-theme="light"] .card:hover .sp-ic{ color:#1F7A63 !important; } /* Ícone do WhatsApp BRANCO no botão emerald */ [data-theme="light"] .wa-float svg, [data-theme="light"] .wa-float svg *{ color:#ffffff !important; fill:#ffffff !important; stroke:#ffffff !important; } /* --- Hover dos CHIPS de serviço (.svc-card) mais visível no claro: borda emerald + tint sutil + ring + ícone emerald (estava clarão demais) --- */ [data-theme="light"] .svc-card:hover{ border-color:#1F7A63 !important; background:#f1f6f3 !important; box-shadow:0 10px 24px -12px rgba(31,122,99,.28), 0 0 0 1px rgba(31,122,99,.5) !important; } [data-theme="light"] .svc-card:hover svg, [data-theme="light"] .svc-card:hover .svc-ic, [data-theme="light"] .svc-card:hover > span:first-child{ color:#1F7A63 !important; } /* --- Números 01/02/03 (.cf-num): cinza fraquinho, emerald no hover --- */ [data-theme="light"] .cf-num{ color:rgba(15,23,42,.13) !important; } [data-theme="light"] .sp-fx:hover .cf-num, [data-theme="light"] .card:hover .cf-num{ color:rgba(31,122,99,.4) !important; } /* --- Capas dos cards do BLOG claras no tema claro (eram gradiente escuro) --- */ [data-theme="light"] .card.sp-dark .relative[style*="linear-gradient"]{ background:linear-gradient(135deg,#eef1f5,#f6f7f9) !important; } [data-theme="light"] .card.sp-dark .relative span[style*="#18cb96"]{ background:#1F7A63 !important; opacity:.10 !important; } /* ================= VARREDURA AMPLA — verde antigo -> emerald no tema claro ================= */ /* QUIZ (orçamento): ícone CINZA por padrão, emerald só no ESCOLHIDO (acende) */ [data-theme="light"] .qz-opt .qz-ic{ color:#94a3b8 !important; } [data-theme="light"] .qz-opt.qz-on{ border-color:#1F7A63 !important; background:rgba(31,122,99,.10) !important; color:#0f172a !important; } [data-theme="light"] .qz-opt.qz-on .qz-ic{ color:#1F7A63 !important; } [data-theme="light"] .qz-opt.qz-on .qz-ck{ background:#1F7A63 !important; border-color:#1F7A63 !important; color:#ffffff !important; } [data-theme="light"] .qz-opt:hover{ border-color:rgba(31,122,99,.5) !important; background:rgba(31,122,99,.05) !important; } [data-theme="light"] .qz-prog>i{ background:linear-gradient(90deg,#1F7A63,#2a9b7c) !important; } [data-theme="light"] .qz-input:focus,[data-theme="light"] .lf-input:focus{ border-color:#1F7A63 !important; box-shadow:0 0 0 3px rgba(31,122,99,.15) !important; } /* FAQ + accordion aberto/hover = emerald */ [data-theme="light"] .faq summary::after{ color:#1F7A63 !important; } [data-theme="light"] .faq summary:hover,[data-theme="light"] .faq details[open] summary, [data-theme="light"] .ac-q:hover,[data-theme="light"] .ac.open .ac-q,[data-theme="light"] .ac-q .ic{ color:#1F7A63 !important; } /* seleção de texto + foco */ [data-theme="light"] ::selection{ background:rgba(31,122,99,.18) !important; } [data-theme="light"] :focus-visible{ outline-color:#1F7A63 !important; } /* carrossel/indicadores do mockup */ [data-theme="light"] .ms-bar{ background:#1F7A63 !important; } [data-theme="light"] .ms-dot.active{ background:#1F7A63 !important; } [data-theme="light"] .ms-note svg{ color:#1F7A63 !important; } /* modal de serviço (internals) */ [data-theme="light"] .svc-mcard:hover .svc-mic{ color:#1F7A63 !important; } [data-theme="light"] .svc-mfree::before{ background:#1F7A63 !important; } [data-theme="light"] .svc-mfree:hover{ border-color:#1F7A63 !important; color:#fff !important; } [data-theme="light"] .svc-mlist li svg{ color:#1F7A63 !important; } /* pricing destacado hover */ [data-theme="light"] .sp-dark-green:hover{ box-shadow:0 2px 6px rgba(16,24,40,.05), 0 18px 40px -12px rgba(31,122,99,.28) !important; border-color:rgba(31,122,99,.5) !important; } /* --- últimos stragglers de verde antigo no claro --- */ [data-theme="light"] .svc-card:hover > span:last-child{ color:#1F7A63 !important; } [data-theme="light"] .svc-mbadge{ background:rgba(31,122,99,.12) !important; color:#1F7A63 !important; } [data-theme="light"] .qz-res-box{ border-color:rgba(31,122,99,.30) !important; background:rgba(31,122,99,.06) !important; } [data-theme="light"] .ms-overlay > span{ background:#1F7A63 !important; } [data-theme="light"] .wa-float:hover{ filter:drop-shadow(0 8px 18px rgba(31,122,99,.5)) !important; } [data-theme="light"] .sp-glow .shine::before{ background-image:conic-gradient(from 205deg at 50% 50%, rgba(31,122,99,0) 0deg, #1F7A63 25deg, rgba(31,122,99,.18) 295deg, rgba(31,122,99,0) 360deg) !important; } /* ============================================================ MOCKUPS seguem o TEMA (Robson): CLAROS no tema claro, escuros no escuro. Aqui só dou ao PAINEL do mockup uma borda + sombra pra separar do card/página claros. As cores INTERNAS (texto escuro, tints claros) vêm do bloco de flip mais acima (que reverte o force-dark). Nada de reasserto escuro. ============================================================ */ [data-theme="light"] #mockStage .panel, [data-theme="light"] #svc-mmock, [data-theme="light"] .svc-mmock-slide{ background:#ffffff !important; border:1px solid rgba(15,23,42,.10) !important; box-shadow:0 1px 3px rgba(16,24,40,.08), 0 18px 40px -16px rgba(16,24,40,.22) !important; } [data-theme="light"] #mockStage{ color:#334155 !important; } /* ============================================================ RODADA verde-antigo (blog + modal + wa) — tema claro ============================================================ */ /* 1) botão do CTA no fim do artigo do blog (.cta .btn "Pedir uma orientação") — base ainda usava var(--ac)=#18cb96; hover já era #16624F (linha 112) */ [data-theme="light"] .cta .btn{ background:#1F7A63 !important; color:#ffffff !important; } /* 2) botão fantasma do modal (.svc-mfree "Comece grátis / Start free on X") — borda + texto estavam no verde antigo (#33dea6 / rgba(24,203,150)) */ [data-theme="light"] .svc-mfree{ border-color:rgba(31,122,99,.5) !important; color:#1F7A63 !important; } [data-theme="light"] .svc-mfree::before{ background:#1F7A63 !important; } [data-theme="light"] .svc-mfree:hover{ color:#ffffff !important; border-color:#1F7A63 !important; } /* 3) WhatsApp flutuante: ícone emerald, e o ANEL que pulsa MAIS ESCURO que o ícone (#0D4A39 = emerald profundo) — pedido do Robson. Keyframe próprio pro claro; o escuro segue no waPulse verde neon. */ [data-theme="light"] .wa-float{ background:#1F7A63 !important; animation-name:waPulseLight !important; } [data-theme="light"] .wa-float:hover{ filter:drop-shadow(0 8px 18px rgba(13,74,57,.55)) !important; } @keyframes waPulseLight{ 0% { box-shadow:0 10px 28px -10px rgba(13,74,57,.55), 0 0 0 0 rgba(13,74,57,.6) } 70% { box-shadow:0 10px 28px -10px rgba(13,74,57,.55), 0 0 0 16px rgba(13,74,57,0) } 100%{ box-shadow:0 10px 28px -10px rgba(13,74,57,.55), 0 0 0 0 rgba(13,74,57,0) } } /* 4) DECISÃO: TODOS os mockups ficam ESCUROS + destacados no claro (inclui o .hero-cover dos artigos do blog). O flip claro deixava texto ilegível; escuro flutuando na página branca fica premium e consistente com hero/modal. */ [data-theme="light"] .hero-cover{ border-color:rgba(15,23,42,.14) !important; box-shadow:0 20px 50px -22px rgba(16,24,40,.42), 0 8px 20px -12px rgba(16,24,40,.28) !important; } /* botão "Voltar" do modal — modal segue o tema (claro no claro), então o botão é um pill emerald bem visível sobre o card branco (era o "cadê o botão"). */ [data-theme="light"] .svc-mback{ border-color:rgba(31,122,99,.30) !important; background:rgba(31,122,99,.09) !important; color:#1F7A63 !important; } [data-theme="light"] .svc-mback:hover{ background:rgba(31,122,99,.15) !important; border-color:rgba(31,122,99,.5) !important; color:#16624F !important; } [data-theme="light"] .svc-mback:focus-visible{ outline-color:#1F7A63 !important; } /* barra de progresso de scroll no topo (#scroll-progress, style inline com gradiente neon) — emerald no tema claro */ [data-theme="light"] #scroll-progress{ background:linear-gradient(90deg,#1F7A63,#2f9e7e) !important; box-shadow:0 0 12px rgba(31,122,99,.5) !important; } /* cards do FAQ (Perguntas frequentes) estavam quase invisíveis no claro (branco no fundo cinza, borda fraca) — definir com borda + sombra como os outros cards */ [data-theme="light"] .faq details, [data-theme="light"] .ac{ border:1px solid rgba(16,24,40,.14) !important; box-shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 22px -14px rgba(16,24,40,.18) !important; } [data-theme="light"] .faq details[open]{ border-color:rgba(31,122,99,.38) !important; box-shadow:0 1px 2px rgba(16,24,40,.06), 0 14px 30px -14px rgba(16,24,40,.22) !important; } /* botão "Em breve" (produto Confirmaqui) mudo no tema claro */ [data-theme="light"] .svc-mcta-soon{ background:#e6e8ec !important; color:#8b919b !important; } /* mockup do cartão/link-na-bio (slide "cartao") no tema CLARO: o "celular" é um link-in-bio dark (bg-[#0e0f12]); clareia corpo/borda/anel pra ficar real e legível (o texto interno já vira escuro pelo flip acima). */ [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .bg-\[\#0e0f12\]{ background:#ffffff !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .border-\[\#2b2e35\]{ border-color:rgba(15,23,42,.12) !important; } [data-theme="light"] :is(#mockStage,.ms-slide,#svc-mmock,.svc-mmock-slide) .ring-\[\#0e0f12\]{ --tw-ring-color:#ffffff !important; } /* card de PRODUTO no hover (tema claro): sombra neutra, sem anel/tint verde — verde reservado só pra seta (padrão da casa, achado da varredura) */ [data-theme="light"] [data-prod]:hover{ background:#ffffff !important; border-color:rgba(16,24,40,.12) !important; box-shadow:0 6px 14px -4px rgba(16,24,40,.08), 0 22px 44px -18px rgba(16,24,40,.16) !important; } /* ===== tokens de fundo no tema CLARO (o dark usa :root do index/blog; aqui invertemos) ===== */ :root[data-theme="light"]{ --chrome:#ffffff; /* header/footer */ --sec-1:#f5f6f8; /* base / seções ímpares */ --sec-2:#eef0f4; /* seções pares (ritmo) */ --card:#ffffff; /* cards/painéis/modais */ --pressed:#e7eaf0; /* hover/ativo (escurece sutil no claro) */ } /* ícones de "entregamos" = emerald no tema claro (o neon #18cb96 fica mint demais no branco) */ [data-theme="light"] #entregamos .card > div:first-child::after{ background:#1F7A63 !important } [data-theme="light"] #entregamos .card > div:first-child::before{ background:radial-gradient(circle, rgba(31,122,99,.13), transparent 68%) !important } /* títulos/labels que acendem no HOVER = emerald no claro (o #33dea6/#18cb96 neon fica errado no branco) */ [data-theme="light"] .card:hover h3, [data-theme="light"] .card:hover h4, [data-theme="light"] .sp-fx:hover h3, [data-theme="light"] .sp-fx:hover h4, [data-theme="light"] .postcard:hover h2, [data-theme="light"] .postcard:hover h3, [data-theme="light"] .svc-card:hover > span:last-child{ color:#1F7A63 !important } /* header FROSTED nos 2 temas (Robson gostou no claro); o [data-theme=light] header acima sobrescreve o bg no claro */ header{ background:rgba(11,11,13,.72) !important; -webkit-backdrop-filter:saturate(160%) blur(12px) !important; backdrop-filter:saturate(160%) blur(12px) !important; } /* menu mobile ABERTO -> header sólido (var --chrome), uniforme com o menu, nos 2 temas (:has vence os dois de cima por especificidade) */ header:has(#mobileMenu.open){ background:var(--chrome) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }