/* ============================================================= ASEC INTELIGÊNCIA CONTÁBIL — CAMADA "WHITE" (papel menta) ------------------------------------------------------------- Não é um dark invertido. É o par coerente do "preto esverdeado": tinta esmeralda profunda sobre papel branco levemente esverdeado. Branco = livros limpos, transparência, "sem burocratês". Carregar SEMPRE depois de contabilidade.css, com o . Especificidade [data-brand][data-theme] (0,2,0) vence o :root dark (0,1,0). ============================================================= */ /* ---------- 1. TOKENS: paleta clara da marca ------------------- brand-2 vira verde PROFUNDO (papel branco pede contraste no texto); brand segue vibrante para preenchimentos, pontos e ícones. */ [data-brand="contabilidade"][data-theme="light"]{ --brand:#12A150; /* esmeralda vibrante (fills, ícones, pontos) */ --brand-2:#0B7A3B; /* verde profundo (texto/realce legível no branco) */ --brand-deep:#0A5E30; --brand-rgb:18,161,80; --brand-glow:rgba(18,161,80,.28); --brand-soft:rgba(18,161,80,.09); --brand-ambient:rgba(18,161,80,.14); /* superfícies "papel menta" — branco com fundo levemente esverdeado */ --bg:#F3F7F4; /* papel */ --bg-2:#FFFFFF; /* branco puro (nav, cards, form) */ --bg-3:#ECF3EE; /* menta mais fechada p/ gradientes de faixa */ --surface:rgba(12,60,40,.035); --surface-2:rgba(12,60,40,.06); --surface-solid:#FFFFFF; --line:rgba(15,60,40,.10); --line-2:rgba(15,60,40,.17); --text:#0C1A12; /* quase-preto com fundo verde */ --muted:#495a51; --muted-2:#7b8a82; --shadow-color:rgba(16,60,40,.16); --grid-line:rgba(16,80,50,.05); --hero-veil:rgba(243,247,244,.72); --glow-strength:.5; --blend-screen:multiply; } /* textura de papel: no claro fica mais bonito em "multiply" e discreto */ [data-theme="light"] .noise{mix-blend-mode:multiply;opacity:.03} /* ---------- 2. NAV — vidro branco ao fixar --------------------- */ [data-theme="light"] .nav.is-stuck{ background:rgba(255,255,255,.72); border-bottom-color:var(--line); } /* marca agora é PNG oficial (símbolo preto + swoosh verde) — sem recolor */ /* ---------- 3. BOTÃO PRIMÁRIO — mantém o verde vivo ------------- brand-2 agora é escuro, então recompomos o gradiente com um realce claro no fim para o botão não achatar. */ [data-theme="light"] .btn-primary{ background:linear-gradient(120deg,var(--brand-deep),var(--brand) 58%,#2FCB6E); box-shadow:0 12px 28px -10px rgba(18,161,80,.5),inset 0 1px 0 rgba(255,255,255,.4); } [data-theme="light"] .btn-primary:hover{ box-shadow:0 20px 46px -12px rgba(18,161,80,.55),inset 0 1px 0 rgba(255,255,255,.45); } /* ---------- 4. HERO — véu e arte orbital sobre papel ----------- */ [data-theme="light"] .hero-veil{ background: radial-gradient(120% 90% at 50% 0%,transparent 45%,var(--bg) 94%), linear-gradient(180deg,rgba(255,255,255,.5),transparent 35%,var(--bg) 100%); } [data-theme="light"] .hero-fallback{ background: radial-gradient(50% 50% at 80% 25%,var(--brand-ambient),transparent 60%), radial-gradient(40% 40% at 10% 90%,rgba(18,161,80,.10),transparent 60%); } /* anéis: os traços/pontos brancos somem no branco -> viram verde */ [data-theme="light"] .ring.r1{border-color:rgba(18,161,80,.22)} [data-theme="light"] .ring.r2{border-color:rgba(15,60,40,.12)} [data-theme="light"] .ring.r3{border-color:rgba(18,161,80,.34)} [data-theme="light"] .ring i{background:var(--brand);box-shadow:0 0 12px var(--brand-glow)} [data-theme="light"] .ring.r2 i{background:var(--brand-deep);box-shadow:0 0 10px var(--brand-glow)} [data-theme="light"] .orb-chip{box-shadow:0 16px 34px -18px var(--shadow-color)} [data-theme="light"] .orb-core{ background:radial-gradient(circle at 35% 30%,#fff,var(--bg-3)); box-shadow:0 24px 60px -30px rgba(18,161,80,.5),inset 0 0 22px rgba(18,161,80,.10); } /* ---------- 5. CARDS — elevam do papel com sombra verde suave -- no dark os cards se apoiam em borda + neon; no branco precisam de elevação real (sombra colorida discreta). */ [data-theme="light"] .bento-card, [data-theme="light"] .spec-card, [data-theme="light"] .testi-card{ background:linear-gradient(168deg,#FFFFFF,#F6FBF8); border-color:var(--line); box-shadow:0 1px 2px rgba(16,50,34,.04),0 18px 42px -30px rgba(16,60,40,.55); } [data-theme="light"] .bento-card:hover{ border-color:transparent; box-shadow:0 34px 70px -40px rgba(18,161,80,.5),0 0 40px -26px var(--brand-glow); } [data-theme="light"] .spec-card:hover{ box-shadow:0 30px 64px -38px rgba(18,161,80,.45); } /* ícones dos cards: fundo menta um pouco mais presente no branco */ [data-theme="light"] .bc-ic, [data-theme="light"] .sp-ic, [data-theme="light"] .cinfo .ic, [data-theme="light"] .form-ok .ok-ic{ background:var(--brand-soft); border-color:rgba(18,161,80,.22); } /* ---------- 6. FORM — cartão branco com sombra verde ----------- */ [data-theme="light"] .form{ background:#fff; border-color:var(--line-2); box-shadow:0 30px 74px -42px rgba(16,60,40,.42),0 2px 6px rgba(16,60,40,.05); } [data-theme="light"] .field .input{background:#fff} /* ---------- 7. DEPOIMENTOS — setas e aspas -------------------- */ [data-theme="light"] .testi-arrow{background:#fff} [data-theme="light"] .testi-card .tq{opacity:.14} /* ---------- 8. DIFERENCIAL — números gigantes vazados --------- */ [data-theme="light"] .hp-num{-webkit-text-stroke:1px rgba(18,161,80,.22)} /* ---------- 9. FOOTER — assinatura "ASEC" como marca d'água ---- */ [data-theme="light"] .foot-mega span{ /* sem -webkit-text-stroke: no claro ele riscava o contorno interno das letras e a palavra virava um esqueleto em vez de marca d'água */ background:linear-gradient(176deg,rgba(16,60,40,.22),rgba(16,60,40,.08) 62%,rgba(31,224,122,.12)); -webkit-background-clip:text;background-clip:text; -webkit-text-stroke:0; } /* ---------- 10. PLANOS — aurora mais suave sobre claro --------- */ [data-theme="light"] .planos-cta .aurora{ opacity:.5; background: radial-gradient(40% 50% at 30% 40%,rgba(18,161,80,.22),transparent 60%), radial-gradient(40% 50% at 70% 60%,rgba(10,94,48,.20),transparent 60%); } /* ---------- 10b. PÁGINAS INTERNAS — elevação no papel ---------- painéis/cards internos ganham sombra verde suave (como na home). */ [data-theme="light"] .svc-panel, [data-theme="light"] .step, [data-theme="light"] .callout, [data-theme="light"] .plan-card, [data-theme="light"] .value-card, [data-theme="light"] .team{ background:linear-gradient(168deg,#FFFFFF,#F6FBF8); border-color:var(--line); box-shadow:0 1px 2px rgba(16,50,34,.04),0 18px 42px -30px rgba(16,60,40,.55); } [data-theme="light"] .step:hover, [data-theme="light"] .plan-card:hover, [data-theme="light"] .value-card:hover{ box-shadow:0 30px 64px -38px rgba(18,161,80,.45); } [data-theme="light"] .plan-card.is-reco{ box-shadow:0 0 0 1px var(--brand),0 34px 80px -46px rgba(18,161,80,.5); } /* ícones e checkmarks internos mais presentes no branco */ [data-theme="light"] .svc-panel .ck, [data-theme="light"] .step .snum, [data-theme="light"] .value-card .vic, [data-theme="light"] .pcell.yes{ background:var(--brand-soft);border-color:rgba(18,161,80,.22); } /* badge "recomendado" das colunas de plano: texto claro sobre verde */ [data-theme="light"] .pcol .pbadge, [data-theme="light"] .plan-card .pc-badge{color:#fff} /* tabela de planos no branco */ [data-theme="light"] .ptable-wrap{background:#fff;border-color:var(--line)} [data-theme="light"] .ptable .rowlabel, [data-theme="light"] .ptable tfoot .rowlabel{background:#fff} [data-theme="light"] .ptable thead th{background:#F2F8F4} [data-theme="light"] .ptable thead th.is-reco{ background:linear-gradient(180deg,var(--brand-soft),transparent),#F2F8F4; } [data-theme="light"] .ptable .is-reco{background:rgba(18,161,80,.06)} /* FAQ no branco */ [data-theme="light"] .faq-item{background:#fff} [data-theme="light"] .faq-item.open{background:#F7FBF8} /* placeholder de conteúdo (quem-somos) legível no papel */ [data-theme="light"] .ph{ background:repeating-linear-gradient(135deg,transparent,transparent 10px,rgba(18,161,80,.04) 10px,rgba(18,161,80,.04) 20px); } /* ---------- 11. CURSOR — anel some com blend "difference" ------ no branco o difference deixa o anel escuro (ok); no hover verde damos preferência a uma borda sólida da marca. */ [data-theme="light"] .cur-ring{mix-blend-mode:normal;border-color:rgba(15,60,40,.45)} [data-theme="light"] .cur-dot{mix-blend-mode:normal;background:var(--brand-deep)} [data-theme="light"] .cur-ring.is-hot{background:var(--brand-soft);border-color:var(--brand)}