/* ============================================================================ EDICORE — Design System (identidade ÚNICA, tema escuro elegante) Carregado por ÚLTIMO no de cada página, então sobrescreve os tokens locais. Sem branco estourado, sem preto absoluto: navy profundo + azul da marca + amarelo de destaque. Alto contraste, moderno, premium. Marca: azul #165889, amarelo #FBC702. Fonte texto ~Mulish. ========================================================================== */ :root{ /* ---- superfícies (nunca branco puro) ---- */ --bg:#121214; /* fundo da página (navy quase-preto) */ --bg2:#161619; /* seções alternadas / faixas */ --bg3:#0E0E10; /* rodapé / fundo mais profundo */ --card:#1E1E24; /* cartão padrão */ --card2:#26262E; /* cartão elevado / cabeçalhos internos */ --hover:#2A2A32; /* hover de linhas e itens */ --line:#2A2A32; /* borda sutil */ --line2:#38383F; /* borda mais visível */ /* ---- texto (nunca preto absoluto) ---- */ --ink:#FFFFFF; /* texto principal */ --ink2:#C7C7D2; /* texto secundário */ --ink3:#8E8E9F; /* texto apagado / legendas */ --ink4:#6A6A78; /* placeholder / desabilitado */ /* ---- azul da marca (ajustado para fundo escuro) ---- */ --blue:#F2C94C; /* primário (botões, com texto branco) */ --blueBright:#F2C94C; /* links, ícones, destaques sobre escuro */ --blue3:#D4AF3E; /* variação profunda */ --blueSoft:#26221A; /* preenchimento azul suave (era claro) */ --blueSoft2:#2A2620; --blueLine:#2A2A32; /* borda azulada */ /* ---- amarelo da marca ---- */ --yellow:#F2C94C; --yellowSoft:#26221A; /* fundo suave do amarelo (escuro) */ --amber:#F2C94C; /* texto âmbar legível no escuro */ /* ---- estados ---- */ --green:#34C888;--greenSoft:#0F2A20;--greenDark:#2AA574; --danger:#F26D62;--dangerSoft:#2C1512;--red:#F26D62;--redSoft:#2C1512; --gray:#8E8E9F; /* ---- forma & profundidade ---- */ --r:14px;--r-sm:10px;--r-lg:20px; --shadow:0 8px 24px rgba(0,0,0,.42); --shadow-lg:0 18px 50px rgba(0,0,0,.55); --ring:0 0 0 3px rgba(242,201,76,.32);--accent:#F2C94C;--accentInk:#191500; color-scheme:dark; } /* Base ---------------------------------------------------------------------- */ html,body{background:var(--bg);color:var(--ink);} body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} ::selection{background:rgba(242,201,76,.32);color:#fff;} a{color:var(--blueBright);} hr{border:none;border-top:1px solid var(--line);} /* Placeholders legíveis no escuro */ ::placeholder{color:var(--ink4);opacity:1;} /* Inputs/áreas herdam o tema (evita campos brancos estourados) */ input,textarea,select{color:var(--ink);} input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea,select{background:var(--card2);border-color:var(--line);} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blueBright);box-shadow:var(--ring);} /* Scrollbar discreta, coerente com o tema escuro */ *{scrollbar-width:thin;scrollbar-color:#2b3e54 transparent;} *::-webkit-scrollbar{width:11px;height:11px;} *::-webkit-scrollbar-thumb{background:#2b3e54;border-radius:99px;border:3px solid transparent;background-clip:content-box;} *::-webkit-scrollbar-thumb:hover{background:#3a5a78;} *::-webkit-scrollbar-track{background:transparent;} /* Utilitários de marca reutilizáveis ---------------------------------------- */ .edi-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);} .edi-elev{background:var(--card2);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);} .edi-muted{color:var(--ink3);} .edi-btn{font-family:inherit;border:none;border-radius:var(--r-sm);font-weight:800;cursor:pointer;transition:transform .06s ease,filter .15s ease,background .15s ease;} .edi-btn:active{transform:translateY(1px);} .edi-btn-primary{background:var(--blue);color:#fff;} .edi-btn-primary:hover{filter:brightness(1.08);} .edi-btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line2);} .edi-btn-ghost:hover{background:var(--hover);} .edi-chip{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:12px;padding:4px 10px;border-radius:999px;background:var(--blueSoft);color:var(--blueBright);} /* Reveal on scroll (landing) — respeita preferências de movimento */ @media (prefers-reduced-motion:no-preference){ .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;} .reveal.in{opacity:1;transform:none;} } /* ============================================================================ MENSAGENS (toast) — legíveis em qualquer página. Corrige o antigo fundo branco no texto branco. Aqui mexemos SÓ nas cores; a posição fica com cada página. A função toast(msg, tipo) adiciona a classe: ok | err | warn | info. ========================================================================== */ .toast{background:var(--card2);color:var(--ink);border:1px solid var(--line2);box-shadow:var(--shadow-lg);} .toast.ok{background:#10301F;border-color:#2AA574;color:#9BEFC6;} .toast.err{background:#2C1512;border-color:#8A3A32;color:#FFB9B1;} .toast.warn{background:#2A2410;border-color:#7A6A1E;color:#FBD24E;} .toast.info{background:var(--card2);border-color:var(--blueLine);color:var(--ink);} /* Blocos de mensagem inline (padrão único de erro/sucesso/aviso/info) */ .edi-msg{border:1px solid var(--line2);border-radius:var(--r-sm);padding:10px 14px;font-weight:700;font-size:14px;background:var(--card2);color:var(--ink);} .edi-msg.ok{background:#10301F;border-color:#2AA574;color:#9BEFC6;} .edi-msg.err{background:#2C1512;border-color:#8A3A32;color:#FFB9B1;} .edi-msg.warn{background:#2A2410;border-color:#7A6A1E;color:#FBD24E;} .edi-msg.info{background:var(--blueSoft);border-color:var(--blueLine);color:var(--ink2);} /* Botão de avanço do wizard: fica logo abaixo das opções, com brilho suave e pulsação discreta (o "próximo passo" fica óbvio). Desabilitado não pulsa. */ .estepbtn{margin-top:22px} .estepbtn .btn{position:relative;box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 0 rgba(242,201,76,.5)} @media (prefers-reduced-motion:no-preference){ .estepbtn .btn:not(:disabled){animation:ediPulse 2.2s ease-in-out infinite} } .estepbtn .btn:not(:disabled):hover{filter:brightness(1.08)} @keyframes ediPulse{ 0%{box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 0 rgba(242,201,76,.45)} 70%{box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 12px rgba(242,201,76,0)} 100%{box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 0 rgba(242,201,76,0)} } /* ============================================================================ REFORMULAÇÃO (grafite + amarelo): accent SÓ em ação principal e estado ativo. ========================================================================== */ .btn{background:var(--accent);color:var(--accentInk);} .btn:hover{filter:brightness(1.05);} .btn-y{background:var(--accent);color:var(--accentInk);} body.dark .btn-y{color:var(--accentInk) !important;} .btn-o{color:var(--ink);} a{color:var(--ink2);} .edi-hover{transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;} .edi-hover:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:0 12px 30px -14px rgba(0,0,0,.75);} .edi-ico{display:grid;place-items:center;border-radius:14px;background:rgba(242,201,76,.12);color:var(--accent);flex:none;} /* ============================================================================ RESPONSIVO: só rolagem vertical. Nunca horizontal (fim do "samba" no mobile). ========================================================================== */ html,body{overflow-x:hidden;max-width:100%;} img,svg,video,canvas,iframe{max-width:100%;}