/* ======================================================================= Conversor de Mídia — folha de estilo única. Mapa rápido (Ctrl+F pelo nome da seção): 1. VARIÁVEIS cores, cantos, sombras -> mude aqui para trocar o tema 2. BASE body, títulos, links 3. TOPO barra de navegação do topo 4. HERO título grande da página inicial 5. CAIXA painéis brancos (chave, envio, progresso, pronto) 6. ABAS 7. BARRA DE BUSCA o campo do link + formato + botão 8. UPLOAD área de arrastar arquivo 9. BOTÕES 10. PROGRESSO / MENSAGENS 11. PASSOS o "1 2 3" abaixo da barra 12. TEXTO LONGO, AVISO LEGAL, RODAPÉ 13. UTILITÁRIOS .oculto e .sr (não mexa: o JS usa) ======================================================================= */ /* ---------- 1. VARIÁVEIS ---------- */ :root{ --fundo:#f2f6ff; /* fundo da página */ --painel:#ffffff; /* fundo das caixas */ --painel2:#f4f7fc; /* fundo de campos e áreas internas */ --linha:#dde4f0; /* bordas */ --txt:#121724; /* texto principal */ --txt2:#4a5468; /* texto secundário — escurecido para passar no contraste AA */ --acc:#2563eb; /* cor de destaque (botões, foco) */ --acc-esc:#1d4ed8; /* destaque no hover */ --ok:#0f9d58; --err:#d93025; --warn:#b26a00; --raio:12px; /* arredondamento padrão */ --raio-g:18px; /* arredondamento das caixas grandes */ --sombra:0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06); --largura:840px; /* largura máxima do conteúdo */ } /* Tema escuro: aplicado só quando o usuário aperta o botão do topo. O JS grava a escolha em data-tema no . */ html[data-tema="escuro"]{ --fundo:#0e1116; --painel:#171b23; --painel2:#1f2430; --linha:#2c3342; --txt:#e9edf5; --txt2:#9aa4b8; --acc:#5b86f7; --acc-esc:#7398ff; --ok:#35c57f; --err:#ff7a7a; --warn:#e0a92b; --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); } /* ---------- 2. BASE ---------- */ *{box-sizing:border-box} body{margin:0;background:var(--fundo);color:var(--txt); font:17px/1.7 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased} p{max-width:70ch} a{color:var(--acc);text-decoration:none} a:hover{text-decoration:underline} .wrap{max-width:var(--largura);margin:0 auto;padding:8px 20px 80px} h1{font-size:clamp(28px,5.2vw,42px);line-height:1.15;margin:0 0 12px;letter-spacing:-.025em} h2{font-size:24px;margin:52px 0 14px;letter-spacing:-.01em} h3{font-size:18px;margin:0 0 8px} :focus-visible{outline:2px solid var(--acc);outline-offset:2px} /* ---------- 3. TOPO ---------- */ .topo{background:var(--painel);border-bottom:1px solid var(--linha)} .topo-int{max-width:var(--largura);margin:0 auto;padding:14px 18px; display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .marca{font-weight:700;font-size:16px;color:var(--txt)} .marca:hover{text-decoration:none} .menu a{color:var(--txt2)} /* ---------- 4. HERO ---------- */ .hero{text-align:center;padding:44px 0 26px} .lead{color:var(--txt2);font-size:17px;margin:0 auto;max-width:60ch} /* ---------- 5. CAIXA ---------- */ .caixa{background:var(--painel);border:1px solid var(--linha); border-radius:var(--raio-g);padding:22px;box-shadow:var(--sombra)} .caixa.destaque{padding:20px} .titulo-caixa{margin:0 0 10px;font-size:18px} #tela-progresso,#tela-pronto,#tela-chave{margin-top:0} label{display:block;font-size:13.5px;color:var(--txt2);margin:14px 0 6px} input[type=password],input[type=url],select{width:100%;background:var(--painel2); color:var(--txt);border:1px solid var(--linha);border-radius:var(--raio); padding:13px 14px;font:15px inherit;min-height:48px} input::placeholder{color:var(--txt2);opacity:.85} /* ---------- 6. ABAS ---------- */ .abas{display:flex;gap:6px;margin-bottom:16px;background:var(--painel2); border:1px solid var(--linha);border-radius:var(--raio);padding:4px} .abas button{flex:1;background:transparent;border:0;color:var(--txt2); padding:10px;border-radius:9px;font:600 14.5px inherit;cursor:pointer;min-height:42px} .abas button:hover{color:var(--txt)} .abas button[aria-selected=true]{background:var(--painel);color:var(--txt);box-shadow:var(--sombra)} /* ---------- 7. BARRA DE BUSCA ---------- */ /* Em telas largas vira uma linha só: link | formato | botão. No celular empilha sozinho (media query no fim desta seção). */ .busca{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap} .campo-url{flex:1 1 320px;min-width:0} .campo-url input{height:100%;font-size:16px} .controles{display:flex;gap:10px;flex:0 1 auto} .controles select{width:auto;min-width:190px;font-weight:600;cursor:pointer} .dica{font-size:13.5px;color:var(--txt2);margin:12px 2px 0} /* ---------- 8. UPLOAD ---------- */ .solta{border:2px dashed var(--linha);border-radius:var(--raio);padding:34px 18px; text-align:center;cursor:pointer;background:var(--painel2);margin-bottom:14px} .solta:hover,.solta.ativo{border-color:var(--acc);background:var(--painel)} .solta strong{display:block;margin-bottom:4px} .solta span{color:var(--txt2);font-size:13.5px} input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} /* ---------- 9. BOTÕES ---------- */ .bt{background:var(--acc);color:#fff;border:1px solid var(--acc);border-radius:var(--raio); padding:13px 26px;font:600 15px inherit;cursor:pointer;min-height:48px; display:inline-flex;align-items:center;justify-content:center;white-space:nowrap} .bt:hover:not(:disabled){background:var(--acc-esc);border-color:var(--acc-esc)} .bt.sec{background:transparent;color:var(--txt2);border-color:var(--linha)} .bt.sec:hover{background:var(--painel2);color:var(--txt)} .bt:disabled{opacity:.45;cursor:not-allowed} .bt-link{flex:1;text-decoration:none} .bt-link:hover{text-decoration:none;color:#fff} .linha{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .linha .bt{flex:1} .linha .bt.sec{flex:0 0 auto} /* ---------- 10. PROGRESSO / MENSAGENS ---------- */ .info{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin-top:16px; font-size:14px;border-top:1px solid var(--linha);padding-top:16px} .info dt{color:var(--txt2)} .info dd{margin:0;overflow-wrap:anywhere} .barra{height:10px;background:var(--painel2);border-radius:99px;overflow:hidden;margin:14px 0 8px} .barra>i{display:block;height:100%;width:0;background:var(--acc);transition:width .4s} @media (prefers-reduced-motion:reduce){.barra>i{transition:none}} .fase{font-size:14px;color:var(--txt2);margin:0} .fase.forte{font-size:16px;color:var(--txt);font-weight:600} .msg{border-radius:var(--raio);padding:13px 15px;font-size:14.5px;margin-top:16px;border:1px solid} .msg.erro{background:rgba(217,48,37,.08);border-color:rgba(217,48,37,.3);color:var(--err)} .msg.ok{background:rgba(15,157,88,.08);border-color:rgba(15,157,88,.3);color:var(--ok)} .msg.aviso{background:rgba(178,106,0,.08);border-color:rgba(178,106,0,.3);color:var(--warn)} /* ---------- 11. PASSOS ---------- */ .passos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 4px} .passo{background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:18px} .passo .num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px; border-radius:99px;background:var(--acc);color:#fff;font-weight:700;font-size:14px;margin-bottom:10px} .passo p{margin:0;font-size:14px;color:var(--txt2)} /* ---------- 12. TEXTO LONGO, LEGAL, RODAPÉ ---------- */ .legal{border-left:3px solid var(--warn);padding:14px 16px;background:var(--painel); border-radius:0 var(--raio) var(--raio) 0;font-size:13.5px;color:var(--txt2);margin:26px 0} .legal b{color:var(--txt)} article{background:var(--painel);border:1px solid var(--linha); border-radius:var(--raio-g);padding:8px 22px 22px} article h3{margin:22px 0 6px;color:var(--txt)} article p{max-width:70ch;color:var(--txt2);margin:0} .fontes{font-size:13px;color:var(--txt2);margin-top:10px} footer{margin-top:40px;padding-top:18px;border-top:1px solid var(--linha); font-size:14px;color:var(--txt2);display:flex;gap:18px;flex-wrap:wrap} /* ---------- 13. UTILITÁRIOS (o JS depende destes) ---------- */ .oculto{display:none} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap;margin:0} /* ---------- CELULAR ---------- */ @media (max-width:640px){ .hero{padding:30px 0 20px} .controles{flex-direction:column} .controles select,.controles .bt{width:100%} .passos{grid-template-columns:1fr} .abas button{font-size:13.5px;padding:10px 6px} .menu{gap:14px;font-size:13.5px} } /* ---------- 14. BOTÃO DE TEMA ---------- */ .bt-tema{background:var(--painel2);border:1px solid var(--linha);color:var(--txt); width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1; display:inline-flex;align-items:center;justify-content:center;flex:none;margin-left:4px} .bt-tema:hover{border-color:var(--acc);color:var(--acc)} /* ---------- 15. BARRA DE BUSCA (novo layout) ---------- Desktop: o campo do link ocupa a linha inteira; formato e botão vêm abaixo. */ .busca{display:block} .campo-url{width:100%;margin-bottom:14px} .campo-url label,.campo-formato label{display:block;font-size:14px;font-weight:600; color:var(--txt2);margin-bottom:6px} .campo-url input{width:100%;font-size:17px;padding:16px 18px;border-radius:var(--raio); border:1.5px solid var(--linha);background:var(--painel2);color:var(--txt)} .campo-url input:focus{border-color:var(--acc);background:var(--painel);outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.15)} .campo-url input::placeholder{color:var(--txt2);opacity:.75} .controles{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap} .campo-formato{flex:1 1 260px;min-width:0} .campo-formato select{width:100%;font-size:16px;padding:14px 16px;border-radius:var(--raio); border:1.5px solid var(--linha);background:var(--painel2);color:var(--txt);cursor:pointer} .campo-formato select:focus{border-color:var(--acc);outline:none} .controles .bt{flex:0 0 auto;padding:14px 34px;font-size:16px} @media (max-width:640px){ .controles{flex-direction:column;align-items:stretch} .controles .bt{width:100%} .campo-url input{font-size:16px;padding:14px} } /* ---------- 16. TABELA DE FORMATOS ---------- */ .intro{font-size:17px;color:var(--txt2);margin:0 0 6px} .grupo{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt2); margin:30px 0 10px} .tabela{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio); background:var(--painel);box-shadow:var(--sombra)} .tabela table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px} .tabela th{text-align:left;padding:12px 16px;background:var(--painel2); border-bottom:1px solid var(--linha);font-size:13.5px;color:var(--txt2); text-transform:uppercase;letter-spacing:.04em;vertical-align:bottom} .tabela th span{text-transform:none;letter-spacing:0;font-weight:400} .tabela td{padding:14px 16px;border-bottom:1px solid var(--linha);vertical-align:top; line-height:1.55} .tabela td:first-child{white-space:nowrap} .tabela td:last-child{white-space:nowrap;color:var(--txt2);font-variant-numeric:tabular-nums} .tabela tr:last-child td{border-bottom:0} .tabela tbody tr:hover{background:var(--painel2)} .tabela td p{max-width:none} .nota{font-size:14.5px;color:var(--txt2);margin-top:14px} /* ---------- 17. MINIATURA + TÍTULO (telas de progresso e pronto) ---------- */ .midia{display:flex;gap:16px;align-items:center;margin-bottom:18px} .capa{position:relative;width:150px;aspect-ratio:16/9;flex:none;border-radius:10px; overflow:hidden;background:var(--painel2);border:1px solid var(--linha)} .capa img{width:100%;height:100%;object-fit:cover;display:block} .capa-vazia{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; color:var(--txt2);font-size:26px;opacity:.5} .midia-txt{min-width:0;flex:1} .titulo-midia{font-size:17px;font-weight:600;margin:0 0 4px;line-height:1.35; max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden} .msg-ok-txt{margin:0;color:var(--ok);font-size:15px;font-weight:500;max-width:none} .midia .fase{margin:0} @media (max-width:560px){ .midia{gap:12px} .capa{width:104px} .titulo-midia{font-size:15.5px} } /* ---------- 18. BOTÃO DE DOWNLOAD ---------- */ .bt-baixar{display:flex;align-items:center;justify-content:center;gap:10px;width:100%; margin:18px 0 12px;padding:17px 24px;border-radius:var(--raio); background:linear-gradient(180deg,var(--acc),var(--acc-esc)); color:#fff;font-size:17px;font-weight:600;text-decoration:none;border:0;cursor:pointer; box-shadow:0 4px 14px rgba(37,99,235,.32);transition:transform .12s,box-shadow .12s} .bt-baixar:hover{text-decoration:none;color:#fff;transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,99,235,.42)} .bt-baixar:active{transform:translateY(0);box-shadow:0 2px 8px rgba(37,99,235,.32)} .bt-baixar .ico{font-size:19px;line-height:1} @media (prefers-reduced-motion:reduce){ .bt-baixar{transition:none} .bt-baixar:hover{transform:none} } /* ---------- 19. MARCA ---------- */ .marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt)} .marca:hover{text-decoration:none;opacity:.85} .marca-ico{display:block;border-radius:7px;flex:none} .marca-txt{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1} .marca-txt b{color:var(--acc);font-weight:700} @media (max-width:520px){ .marca-txt{font-size:18px} } /* ---------- 20. APOIO / DOAÇÃO ---------- */ .bt-kofi{display:inline-flex;align-items:center;gap:8px;text-decoration:none; background:#dc2626;color:#fff !important;border:1px solid #b91c1c;border-radius:var(--raio); font-weight:700;line-height:1;white-space:nowrap;transition:filter .12s,transform .12s; box-shadow:0 2px 8px rgba(220,38,38,.30)} .bt-kofi:hover{color:#fff;text-decoration:none;filter:brightness(1.07);transform:translateY(-1px)} .bt-kofi:active{transform:translateY(0)} .kofi-ico{font-size:1.05em;line-height:1} .bt-kofi-topo{padding:10px 16px;font-size:14.5px;margin-left:6px} .menu{display:flex;align-items:center;gap:10px;font-size:14.5px} .menu-links{display:flex;align-items:center;gap:22px;margin-right:6px} .menu-links a{font-size:14.5px;white-space:nowrap} @media (max-width:1100px){ .menu-links{gap:16px} } .acoes-pronto{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin-top:18px} .acoes-pronto .bt-baixar{flex:1 1 240px;margin:0} .bt-kofi-pronto{padding:17px 22px;font-size:16px;flex:0 1 auto;justify-content:center} .acoes-pronto .bt.sec{flex:0 1 auto} @media (max-width:620px){ .acoes-pronto{flex-direction:column} /* em coluna, flex-basis passa a valer como altura — daí o botão gigante */ .acoes-pronto .bt-baixar,.bt-kofi-pronto,.acoes-pronto .bt.sec{ flex:0 0 auto;width:100%;justify-content:center;padding:15px 20px;font-size:16px} } .apoio{display:flex;gap:14px;align-items:flex-start;margin:26px 0 8px;padding:16px 18px; border:1px solid var(--linha);border-radius:var(--raio);background:var(--painel)} .apoio p{margin:0;font-size:15px;color:var(--txt2);max-width:70ch} .apoio a{font-weight:600} .apoio-ico{font-size:22px;line-height:1.2;flex:none} /* ---------- 21. POPUP ---------- */ /* .oculto vem antes no arquivo e perderia para .modal — esta regra garante o fechamento */ .modal.oculto{display:none} .modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center; padding:20px;background:rgba(8,12,24,.55);backdrop-filter:blur(2px)} .modal-cx{position:relative;background:var(--painel);border:1px solid var(--linha); border-radius:14px;padding:30px 28px 24px;max-width:430px;width:100%;text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.3)} .modal-ico{font-size:38px;line-height:1;display:block;margin-bottom:10px} .modal-cx h3{font-size:20px;margin:0 0 8px} .modal-cx p{font-size:15px;color:var(--txt2);margin:0 0 20px;max-width:none} .modal-bts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .bt-kofi-modal{padding:13px 20px;font-size:15px} .modal-x{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--txt2); font-size:26px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:6px} .modal-x:hover{color:var(--txt);background:var(--painel2)} @media (prefers-reduced-motion:reduce){ .bt-kofi{transition:none} .bt-kofi:hover{transform:none} } /* ---------- 22. MENU MOBILE ---------- */ .bt-menu{display:none;background:var(--painel2);border:1px solid var(--linha);color:var(--txt); width:40px;height:40px;border-radius:10px;cursor:pointer;font-size:19px;line-height:1; align-items:center;justify-content:center;flex:none} .bt-menu:hover{border-color:var(--acc);color:var(--acc)} .veu{display:none;position:fixed;inset:0;z-index:70;background:rgba(8,12,24,.5)} .veu.aberto{display:block} .gaveta{position:fixed;top:0;right:0;bottom:0;width:min(300px,84vw);z-index:71; background:var(--painel);border-left:1px solid var(--linha);padding:20px; display:flex;flex-direction:column;gap:6px;transform:translateX(100%); transition:transform .22s ease;overflow-y:auto} .gaveta.aberto{transform:translateX(0)} .gaveta-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .gaveta-x{background:none;border:0;color:var(--txt2);font-size:28px;line-height:1;cursor:pointer; padding:2px 8px;border-radius:6px} .gaveta-x:hover{color:var(--txt);background:var(--painel2)} .gaveta a:not(.bt-kofi){display:block;padding:13px 10px;border-radius:8px;color:var(--txt); text-decoration:none;font-size:16px;font-weight:500} .gaveta a:not(.bt-kofi):hover{background:var(--painel2);text-decoration:none} .gaveta .bt-kofi{margin-top:auto;justify-content:center;padding:14px 18px;font-size:15.5px} @media (max-width:860px){ .menu .menu-links{display:none} .menu .bt-kofi-topo{display:none} .bt-menu{display:inline-flex} } @media (prefers-reduced-motion:reduce){ .gaveta{transition:none} } /* ---------- 23. RODAPÉ ---------- */ .rodape{margin-top:48px;padding-top:22px;border-top:1px solid var(--linha)} .rodape-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:16px} .rodape-links a{font-size:14.5px;color:var(--txt2);text-decoration:none} .rodape-links a:hover{color:var(--acc);text-decoration:underline} .rodape-nota{font-size:12.5px;color:var(--txt2);max-width:78ch;margin:0;line-height:1.6} @media (max-width:560px){ .rodape-links{gap:6px 16px} .rodape-links a{font-size:14px} } /* ---------- 24. ACESSIBILIDADE ---------- */ /* Links dentro de texto precisam de sublinhado: cor sozinha não basta para quem tem baixa visão ou daltonismo. */ .dica a, .apoio a, article a, .lead a, .rodape-nota a{text-decoration:underline; text-underline-offset:2px} .dica a:hover, .apoio a:hover, article a:hover{text-decoration-thickness:2px} /* Salto para o conteúdo, para quem navega por teclado */ .pular{position:absolute;left:-9999px;top:0;background:var(--acc);color:#fff; padding:10px 16px;border-radius:0 0 8px 0;z-index:100;text-decoration:none} .pular:focus{left:0}