/* ============================================================ style.css CSS COMPARTILHADO Contém: variáveis de cor/tipografia, reset básico, topbar, marca/logo, hero padrão, cartão de ferramenta, botões, tabs, dropzone, ad-slot, guia de conteúdo, FAQ, ferramentas relacionadas e rodapé. ============================================================ */ /* ---------------------------------------------------------- VARIÁVEIS — tema claro (valores padrão do :root) ---------------------------------------------------------- */ :root { --paper: #F7F6FC; --paper-dim: #EFEDFA; --ink: #1B1830; --muted: #6E6B85; --line: #E2DFF2; --accent: #7C5CFC; --accent-2: #5B9DF9; --accent-ink: #3D2E9C; --accent-soft: #ECE8FE; --accent-soft-line: #D9D2FB; --warn: #C4632B; --warn-soft: #c4632b31; --good: #2E8B57; --card-bg: #FFFFFF; --radius: 14px; --font-display: "Space Grotesk", sans-serif; --font-body: "Inter", sans-serif; --font-mono: "JetBrains Mono", monospace; } /* ---------------------------------------------------------- VARIÁVEIS — tema escuro (sobrescreve o :root quando está ativo — ver js/theme.js) ---------------------------------------------------------- */ html[data-theme="dark"] { --paper: #131320; --paper-dim: #1B1B2C; --ink: #EDEBFB; --muted: #9B98B8; --line: #2C2C42; --accent: #9C85FF; --accent-2: #6FB4FF; --accent-ink: #C9BEFF; --accent-soft: #231F3E; --accent-soft-line: #3A3560; --warn: #E2864F; --warn-soft: #c4632b31; --good: #4FBE84; --card-bg: #191828; } /* ---------------------------------------------------------- RESET BÁSICO — aplicado em todo o site ---------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background 0.2s ease, color 0.2s ease; } /* respeita quem desativou animação no sistema operacional */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } .hidden { display: none !important; } /* container central usado em toda página, largura máxima do conteúdo. display:flex + flex-direction:column não muda nada visualmente no estado normal (filhos em largura total já se comportam como bloco), só habilita a propriedade order pra reordenar em telas pequenas — ver media query de .ad-slot/site-footer na seção PAGE LAYOUT */ .wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; } /* ---------------------------------------------------------- TOPBAR — barra superior fixa, criada pelo (ver js/site-header.js) ---------------------------------------------------------- */ .topbar { border-bottom: 1px solid var(--line); padding: 18px 0; position: relative; z-index: 2; } .topbar .wrap { display: flex; flex-direction: row; align-items: center; justify-content: space-between; max-width: 1120px; } /* nome "Gerador de Paletas" + logo, no canto esquerdo da topbar */ .brand { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); } /* bolinha quadrada decorativa, usada em outros lugares do site (não confundir com .brand-icon, que é a logo de verdade) */ .brand .dot { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); display: inline-block; } /* logo da marca (img/logo.svg), aplicada via CSS mask para que a cor seja controlada por --accent em vez de ficar fixa dentro do arquivo .svg — ver explicação completa no topo do arquivo img/logo.svg e na conversa sobre "mudar a cor da logo via CSS" */ .brand-icon { width: 22px; height: 22px; flex-shrink: 0; background-color: var(--accent-ink); -webkit-mask-image: url("../img/logo.svg"); mask-image: url("../img/logo.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* lado direito da topbar: breadcrumb + botão de tema */ .topbar-right { display: flex; align-items: center; gap: 14px; } .crumbs { font-family: var(--font-mono); font-size: 12px; color: var(--ink); } .crumbs .current { color: var(--accent-ink); font-weight: 600; } .crumbs a { color: var(--accent-ink); text-decoration: none; } .crumbs a:hover { color: var(--accent-2); } /* botão duplo de sol/lua pra trocar entre tema claro e escuro */ .theme-toggle { display: flex; align-items: center; gap: 4px; background: var(--paper-dim); border: 1px solid var(--line); border-radius: 99px; padding: 3px; cursor: pointer; } .theme-toggle button { border: none; background: transparent; cursor: pointer; width: 28px; height: 28px; border-radius: 99px; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: 0.15s ease; } .theme-toggle button.active { background: var(--card-bg); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .theme-toggle svg { width: 15px; height: 15px; } /* ---------------------------------------------------------- TOPBAR RESPONSIVA — em telas estreitas, só o breadcrumb quebra pra uma segunda linha (evitando que o texto corte no meio); o toggle de tema continua alinhado com a logo, na mesma linha do topo ---------------------------------------------------------- */ @media (max-width: 600px) { .topbar-right { width: 250px; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; } .crumbs { flex: 1 1 100%; order: 2; text-align: right; } .theme-toggle { order: 1; } } /* ---------------------------------------------------------- HERO PADRÃO — badge + título (h1) + parágrafo de introdução, igual na estrutura das três ferramentas (ver includes/hero equivalente em cada página HTML) ---------------------------------------------------------- */ .hero { padding: 30px 0 8px; } .badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-soft-line); padding: 5px 11px; border-radius: 99px; margin-bottom: 18px; } h1 { font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 38px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; } .lede { color: var(--muted); font-size: 16px; max-width: 56ch; margin: 0 0 28px; } .lede b { color: var(--ink); font-weight: 600; } .lede a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .lede a:hover { opacity: 0.85; } /* ---------------------------------------------------------- CARTÃO DE FERRAMENTA — contêiner branco/escuro que envolve cada ferramenta (dropzone, controles, resultado) ---------------------------------------------------------- */ .tool-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: 0 1px 0 rgba(23, 24, 28, 0.02); margin-bottom: 14px; } /* ---------------------------------------------------------- TABS E CONTROLES — reutilizados por várias ferramentas (ex: abas "Gerar aleatório / A partir de imagem" no gerador de paletas, e as abas de formato WEBP/JPG/PNG no conversor) ---------------------------------------------------------- */ .format-tabs { display: flex; margin-bottom: 10px; gap: 6px; } .format-tabs button { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--card-bg); color: var(--muted); cursor: pointer; transition: 0.12s ease; } .format-tabs button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .format-tabs button:hover:not(.active) { border-color: var(--accent); } /* linha de controles (ex: qualidade do conversor, idioma do lorem ipsum), com divisória acima separando do que vem antes */ .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); } .control-group { display: flex; flex-direction: column; gap: 7px; } .control-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; } /* botão de ação principal de cada ferramenta (ex: "Converter", "Gerar paleta", "Gerar texto") */ .btn-primary { font-family: var(--font-body); font-weight: 600; font-size: 14px; background: var(--accent-ink); color: var(--paper); border: none; padding: 11px 20px; border-radius: 9px; cursor: pointer; transition: transform 0.1s ease, background 0.15s ease; } .btn-primary:hover { opacity: 0.88; } .btn-primary:disabled { background: var(--muted); opacity: 0.5; cursor: not-allowed; } /* botão de ação secundária (ex: "Copiar tudo", "Exportar código") */ .btn-secondary { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-soft-line); padding: 10px 14px; border-radius: 9px; cursor: pointer; } .btn-secondary:hover { filter: brightness(0.97); } /* alterna entre os painéis de modo (ex: aleatório / por imagem no gerador de paletas) — .active controla qual aparece */ .mode-panel { display: none; } .mode-panel.active { display: block; } /* ---------------------------------------------------------- DROPZONE — área de arrastar-e-soltar arquivo, usada no conversor de imagem e no modo "a partir de imagem" do gerador de paletas ---------------------------------------------------------- */ .dropzone { border: 1.5px dashed var(--accent-soft-line); border-radius: 10px; padding: 34px 20px; text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; background: var(--paper-dim); } .dropzone.drag { border-color: var(--accent); background: var(--accent-soft); } .dropzone svg { width: 26px; height: 26px; margin-bottom: 10px; stroke: var(--muted); } .dropzone .dz-title { font-weight: 600; font-size: 15px; margin-bottom: 3px; } .dropzone .dz-sub { font-size: 13px; color: var(--muted); } .dropzone .dz-sub span { text-decoration: underline; text-underline-offset: 2px; } input[type="file"] { display: none; } /* nota de privacidade ("processamento local", "nada é enviado a servidor algum"), presente no rodapé de todo cartão de ferramenta que processa arquivo */ .privacy-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--muted); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .privacy-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; stroke: var(--accent); } /* ---------------------------------------------------------- AD SLOT — espaço reservado de publicidade, mesmo visual nas três páginas ---------------------------------------------------------- */ .ad-slot { border: 1px dashed var(--line); border-radius: 10px; padding: 14px 16px; margin: 28px 0; display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); font-family: var(--font-mono); background: var(--paper-dim); } .ad-slot span:last-child { opacity: 0.6; } /* ---------------------------------------------------------- BARRA DE PESO — comparação de tamanho antes/depois, assinatura visual do site. Usada por qualquer ferramenta que processe arquivo ---------------------------------------------------------- */ .scale { width: 150px; } .scale-nums { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-bottom: 5px; } .scale-nums .new { color: var(--accent-ink); font-weight: 600; } .scale-track { height: 6px; background: var(--paper-dim); border-radius: 99px; overflow: hidden; position: relative; } .scale-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 99px; width: 0%; transition: width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); } .save-pct { font-family: var(--font-mono); font-size: 11px; color: var(--accent-ink); margin-top: 5px; font-weight: 600; } /* ---------------------------------------------------------- PAGE LAYOUT — envolve o .wrap de conteúdo e o , criando a coluna lateral direita. Vira coluna única abaixo de 980px (ver media query no fim da seção) ---------------------------------------------------------- */ .page-layout { max-width: 1120px; margin: 0 auto; padding: 0 20px; display: flex; align-items: flex-start; gap: 36px; } /* dentro do .page-layout, o .wrap perde o próprio padding lateral e max-width — quem controla a largura agora é o pai */ .page-layout .wrap { max-width: 760px; padding: 0; margin: 0; min-width: 0; } /* ---------------------------------------------------------- AD-RAIL — barra lateral direita, montada pelo (ver js/ad-rail.js) ---------------------------------------------------------- */ ad-rail { display: block; width: 300px; flex-shrink: 0; position: sticky; top: 24px; margin: 30px 0; } /* atalhos compactos pras outras ferramentas, empilhados acima dos anúncios */ .rail-shortcuts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .rail-shortcut { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-bg); text-decoration: none; color: var(--ink); transition: border-color 0.15s ease, transform 0.15s ease; } .rail-shortcut:hover { border-color: var(--accent-soft-line); transform: translateY(-2px); } .rail-shortcut-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rail-shortcut-icon svg { width: 14px; height: 14px; } .rail-shortcut-name { font-size: 13px; font-weight: 600; } /* unidade de anúncio — mesmo visual tracejado do .ad-slot inline, só que em tamanho fixo de retângulo */ .ad-unit { border: 1px dashed var(--line); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: var(--muted); font-family: var(--font-mono); background: var(--paper-dim); } .ad-unit span:last-child { opacity: 0.6; } #mrec-container, #halfpage-container {margin-bottom: 30px;} /* quando o placeholder tracejado vira link de afiliado de verdade, a do banner preenche o espaço reservado inteiro — ver ads-data.js e a montagem condicional em ad-rail.js */ .ad-unit img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; } .ad-mrec { width: 300px; height: 250px; } .ad-halfpage { width: 300px; height: 600px; } span.add { display: block; margin-top: 10px; text-align: right; letter-spacing: 0.06em; color: var(--muted); font-size: 10px; font-family: var(--font-mono); } /* ---------------------------------------------------------- SUPRESSÃO MOBILE — abaixo de 980px a lateral inteira some (não colapsa) e o slot de anúncio inline é reordenado pra aparecer logo antes do rodapé, junto de "mais ferramentas" ---------------------------------------------------------- */ @media (max-width: 980px) { .page-layout { flex-direction: column; align-items: stretch; } /* lateral inteira sai do mobile — os atalhos pra outras ferramentas já existem no rodapé (site-footer), e os dois formatos de anúncio de sidebar não fazem sentido empilhados numa coluna estreita */ ad-rail { display: none; } /* o slot de anúncio inline sai da posição original no meio do conteúdo e passa a aparecer logo antes do rodapé — hero, tool-card, guide, divider e faq mantêm a ordem natural do HTML (order:0 por padrão, não precisam de regra própria) */ site-footer { order: 11; } } /* ---------------------------------------------------------- GUIA / CONTEÚDO EXPLICATIVO — seção de texto abaixo de cada ferramenta (explicações, tabelas comparativas, listas) ---------------------------------------------------------- */ .guide { padding: 34px 0 10px; } .guide h2, .faq h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 32px 0 10px; letter-spacing: -0.01em; } .guide h2:first-child { margin-top: 0; } .guide p { color: var(--ink); opacity: 0.82; font-size: 15px; margin: 0 0 14px; } .guide ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink); opacity: 0.82; font-size: 15px; } .guide li { margin-bottom: 6px; } /* links dentro do texto do guia (ex: menções a outras ferramentas) — mesma cor de destaque do .tag-good, sem o fundo em pílula, já que aqui é texto corrido */ .guide a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .guide a:hover { opacity: 0.85; } /* linha divisória fina, usada entre seções do guia e antes do FAQ */ .divider { height: 1px; background: var(--line); margin: 34px 0; } /* tabela comparativa (ex: "qual formato usar", "tipos de harmonia") */ .compare-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0 20px; } .compare-table th, .compare-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); } .compare-table th { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; } .compare-table td:first-child { font-weight: 600; } /* etiqueta verde/roxa dentro da tabela comparativa (ex: "-30% vs JPG") */ .tag-good { color: var(--accent-ink); background: var(--accent-soft); padding: 2px 7px; border-radius: 5px; font-size: 12px; font-family: var(--font-mono); } .tag-nogood { color: var(--warn); background: var(--warn-soft); padding: 2px 7px; border-radius: 5px; font-size: 12px; font-family: var(--font-mono); } /* ---------------------------------------------------------- FAQ — perguntas frequentes com acordeão (abre/fecha ao clicar), lógica de clique fica em js/theme.js ---------------------------------------------------------- */ .faq-item { border-bottom: 1px solid var(--line); } .faq-q { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; font-weight: 600; font-size: 14.5px; } .faq-q::after { content: "+"; font-family: var(--font-mono); font-size: 18px; color: var(--muted); transition: transform 0.2s ease; } .faq-item.open .faq-q::after { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .faq-item.open .faq-a { max-height: 220px; } .faq-a p { padding-bottom: 16px; margin: 0; color: var(--muted); font-size: 14px; } /* ---------------------------------------------------------- FERRAMENTAS RELACIONADAS — cards no rodapé de cada página linkando pras outras ferramentas do site, montados automaticamente pelo (ver js/site-footer.js e js/tools-data.js) ---------------------------------------------------------- */ .related { margin: 100px 0 10px; } .related-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; margin-bottom: 12px; } .related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 520px) { .related-grid { grid-template-columns: 1fr; } } .related-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-bg); text-decoration: none; color: var(--ink); transition: border-color 0.15s ease, transform 0.15s ease; } .related-card:hover { border-color: var(--accent-soft-line); transform: translateY(-2px); } .related-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .related-icon svg { width: 16px; height: 16px; } .related-name { font-weight: 600; font-size: 13.5px; } .related-desc { font-size: 12px; color: var(--muted); } /* ---------------------------------------------------------- RODAPÉ — montado pelo , igual nas três páginas ---------------------------------------------------------- */ footer { padding: 30px 0 50px; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line); margin-top: 20px; } .footer-heart { vertical-align: -1px; color: var(--accent); display: inline-block; margin: 0 2px; } /* ---------------------------------------------------------- BLOCO "SOBRE" DO RODAPÉ — texto de filosofia do projeto + formulário de contato, expansível via .footer-sobre-toggle ---------------------------------------------------------- */ .footer-sobre-toggle { font-family: var(--font-body); font-size: 12.5px; color: var(--muted); background: transparent; border: none; padding: 0; margin-top: 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; display: block; } .footer-sobre-toggle:hover { color: var(--accent-ink); } .footer-sobre-content { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .footer-sobre-content p { font-size: 13px; color: var(--muted); margin: 0 0 14px; } /* ---------------------------------------------------------- FORMULÁRIO DE CONTATO — dentro do bloco "Sobre" ---------------------------------------------------------- */ .footer-contact-form { display: flex; flex-direction: column; gap: 14px; } .form-row { display: flex; flex-direction: column; gap: 6px; } .form-row label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; } .form-row input, .form-row textarea { font-family: var(--font-body); font-size: 14px; letter-spacing: 1px; color: var(--accent); background: var(--card-bg); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; transition: border-color 0.15s ease; } .form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--accent); } .form-row textarea { resize: vertical; min-height: 90px; } .form-row input.invalido, .form-row textarea.invalido { border-color: var(--warn); } .form-row-error { font-size: 11.5px; color: var(--warn); min-height: 14px; } .footer-contact-feedback { font-size: 12.5px; margin: 0; min-height: 16px; } .footer-contact-feedback.sucesso { color: var(--good); } .footer-contact-feedback.erro { color: var(--warn); } .footer-contact-submit { width: 100%; } .form-row-pair { display: flex; gap: 14px; } .form-row-pair .form-row { flex: 1; min-width: 0; } @media (max-width: 480px) { .form-row-pair { flex-direction: column; } }