/* =========================================================================== ToolsBar — sistema de design. Uma folha só, carregada pelo shell E pelas 33 ferramentas. Como as ferramentas são unificadas (é importante entender antes de mexer): 1. cada uma recebe um `toolsbar-theme.css` gerado, que reescreve os VALORES das variáveis CSS dela para esta paleta, mantendo os NOMES originais — assim todo `var(--seja-la-o-que-for)` do CSS delas continua funcionando, mas resolve para as cores do ToolsBar; 2. esta folha entra DEPOIS e cuida do que variável não resolve: tipografia, estrutura, e o acabamento dos componentes comuns. Regra ao editar: mudou aqui, mudou nas 34 telas. Rode a verificação. =========================================================================== */ /* ---------------------------------------------------------------- fonte */ @font-face { font-family: 'ToolsBar Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/anton-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193, U+2212; } @font-face { font-family: 'ToolsBar Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/anton-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF; } /* --------------------------------------------------------------- tokens */ :root { /* superfícies — preto de sala de cinema, subindo em degraus */ --tb-bg-0: #09080c; --tb-bg-1: #0f0e14; --tb-bg-2: #15141c; --tb-bg-3: #1c1b25; --tb-bg-4: #262533; /* texto */ --tb-text: #ecebe4; --tb-muted: #a6a29a; --tb-dim: #6d6a63; /* acento — dourado de marquise */ --tb-gold: #f5c518; --tb-gold-hi: #ffd94a; --tb-gold-dp: #b8900c; --tb-gold-tint: rgba(245, 197, 24, .10); /* ação — vermelho REC */ --tb-red: #e4322b; --tb-red-dp: #a8201b; /* estados */ --tb-ok: #5cc06e; --tb-warn: #e8a33a; --tb-bad: #e4322b; /* linhas */ --tb-line: rgba(245, 197, 24, .13); --tb-line-soft: rgba(255, 255, 255, .07); --tb-line-hard: rgba(245, 197, 24, .38); /* tipografia — Anton para display, grotesca neutra no corpo, mono nos rótulos. De propósito longe da Futura/Century Gothic e das serifadas do original. */ --tb-display: 'ToolsBar Display', 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif; --tb-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif; --tb-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace; --tb-r-sm: 7px; --tb-r: 11px; --tb-r-lg: 15px; --tb-shadow: 0 1px 0 rgba(255,255,255,.03), 0 16px 38px rgba(0,0,0,.5); } /* ------------------------------------------------------ base tipográfica */ .tb, body.tb-ferramenta { font-family: var(--tb-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Título de marca / seções: Anton em caixa alta, apertado. É o traço mais reconhecível da identidade — e o que mais distancia do desenho de origem. */ .tb-display, body.tb-ferramenta h1, body.tb-ferramenta h2 { font-family: var(--tb-display); font-weight: 400; letter-spacing: .015em; text-transform: uppercase; line-height: 1.06; } body.tb-ferramenta h3, body.tb-ferramenta h4 { font-family: var(--tb-sans); font-weight: 700; letter-spacing: -.01em; text-transform: none; } /* Rótulo de console: mono, minúsculo, espaçado. Usado em label, legenda e cabeçalho de campo — é o segundo traço da identidade. */ .tb-rotulo, body.tb-ferramenta label { font-family: var(--tb-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--tb-dim); } /* ============================================================ FERRAMENTAS Daqui pra baixo só vale dentro do iframe de uma ferramenta, que recebe a classe `tb-ferramenta` no pelo toolsbar-ui.js. ========================================================================= */ body.tb-ferramenta { background: var(--tb-bg-1) !important; color: var(--tb-text); } /* o shell já mostra o nome da ferramenta e cuida de chave e sessão — a barra própria da ferramenta é redundância pura */ body.tb-ferramenta .app-header, body.tb-ferramenta header.app-header, body.tb-ferramenta #gate-screen, body.tb-ferramenta #key-screen, body.tb-ferramenta #key-modal, body.tb-ferramenta #manage-keys-btn, body.tb-ferramenta #logout-btn, body.tb-ferramenta .app-footer, body.tb-ferramenta #no-key-warning, body.tb-ferramenta #no-key-note, body.tb-ferramenta .byok-note { display: none !important; } body.tb-ferramenta .screen { min-height: 0; } body.tb-ferramenta #app-screen { min-height: 100vh; padding: 0; } /* O !important não é preguiça: sem ele o padding próprio de cada ferramenta sobrevive e o manual começa numa altura diferente em cada uma (medi de 30 a 118px). O topo tem que ser o mesmo nas 33. */ body.tb-ferramenta .app-main, body.tb-ferramenta main.app-main { max-width: none !important; padding: 0 !important; margin: 0 !important; } /* mesma razão: containers intermediários entre o main e o eixo */ body.tb-ferramenta [data-tb-eixo] > * { margin-top: 0 !important; } /* -------------------------------------------------- as duas colunas O pedido: sidebar da ESQUERDA é do ToolsBar (trocar de ferramenta), então os controles da ferramenta vão para a DIREITA e o resultado ocupa o centro. O JS marca os dois lados; aqui só invertemos a ordem visual — nada de mexer no DOM, que quebraria o JS de cada ferramenta. */ /* A coluna de controles é fluida de propósito: dentro do shell o iframe já perde 280px para a sidebar, então largura fixa faria a quebra disparar em tela normal e as duas colunas virarem uma. */ body.tb-ferramenta [data-tb-eixo="duplo"] { display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(290px, 31%, 390px) !important; gap: 0 !important; align-items: start; max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 100vh; } /* coluna da direita: ocupa todas as linhas e acompanha a rolagem. `min-height: 100vh` não é enfeite — sem ele o painel tem só a altura do próprio conteúdo, e nas ferramentas de formulário curto a faixa escura terminava no meio da tela, com o fundo aparecendo embaixo. */ body.tb-ferramenta [data-tb-lado="controles"] { grid-column: 2 !important; grid-row: 1 / -1 !important; background: var(--tb-bg-2); border-left: 1px solid var(--tb-line); padding: 26px 24px 40px; overflow-y: auto; min-height: 100vh; max-height: 100vh; position: sticky; top: 0; margin: 0 !important; max-width: none !important; border-radius: 0 !important; box-shadow: none !important; } /* coluna do centro: o palco e o que mais sobrar, empilhados */ body.tb-ferramenta [data-tb-lado="palco"], body.tb-ferramenta [data-tb-lado="centro"] { grid-column: 1 !important; margin: 0 !important; max-width: none !important; border-radius: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; } body.tb-ferramenta [data-tb-lado="palco"] { padding: 30px 34px 48px; /* Algumas grudavam o palco com `position: sticky; top: 84px` para ele parar embaixo do cabeçalho próprio. Removido o cabeçalho, sobrou um deslocamento órfão de 84px — o manual começava mais baixo nessas do que nas outras. */ position: static !important; top: auto !important; } body.tb-ferramenta [data-tb-lado="centro"] { padding: 26px 34px 0; } /* ferramenta de coluna única: vira uma coluna centrada, sem painel lateral */ body.tb-ferramenta [data-tb-eixo="unico"] { grid-template-columns: minmax(0, 1fr); padding: 30px 34px 48px !important; } /* Só abaixo de 760px vale a pena empilhar — aí os controles vêm primeiro. */ @media (max-width: 760px) { body.tb-ferramenta [data-tb-eixo="duplo"] { grid-template-columns: minmax(0, 1fr) !important; } body.tb-ferramenta [data-tb-lado="controles"] { grid-column: 1 !important; grid-row: auto !important; order: 1; position: static; max-height: none; border-left: none; border-bottom: 1px solid var(--tb-line); } body.tb-ferramenta [data-tb-lado="palco"] { order: 2; max-height: none; } body.tb-ferramenta [data-tb-lado="centro"] { order: 0; } } /* ------------------------------------------------------ o painel de controles */ body.tb-ferramenta [data-tb-lado="controles"] > *:first-child { margin-top: 0; } body.tb-ferramenta [data-tb-lado="controles"] h1, body.tb-ferramenta [data-tb-lado="controles"] h2, body.tb-ferramenta [data-tb-lado="controles"] h3 { font-family: var(--tb-display); font-size: 19px; letter-spacing: .02em; text-transform: uppercase; color: var(--tb-text); margin: 0 0 4px; } /* faixa de identidade no topo do painel, escrita pelo JS */ .tb-marca-painel { display: flex; align-items: center; gap: 9px; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--tb-line); } .tb-marca-painel .tb-selo { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px; background: linear-gradient(145deg, var(--tb-gold), var(--tb-gold-dp)); display: grid; place-items: center; font-size: 13px; } .tb-marca-painel .tb-nome { font-family: var(--tb-display); font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--tb-text); } .tb-marca-painel .tb-tag { margin-left: auto; font-family: var(--tb-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--tb-dim); } /* ---------------------------------------------------- campos e botões */ body.tb-ferramenta input:not([type=checkbox]):not([type=radio]):not([type=range]), body.tb-ferramenta select, body.tb-ferramenta textarea { font-family: var(--tb-sans); font-size: 13.5px; background: var(--tb-bg-0); color: var(--tb-text); border: 1px solid var(--tb-line-soft); border-radius: var(--tb-r-sm); padding: 10px 12px; transition: border-color .15s, box-shadow .15s; } body.tb-ferramenta input:focus, body.tb-ferramenta select:focus, body.tb-ferramenta textarea:focus { outline: none; border-color: var(--tb-gold-dp); box-shadow: 0 0 0 3px var(--tb-gold-tint); } body.tb-ferramenta ::placeholder { color: var(--tb-dim); opacity: 1; } body.tb-ferramenta button { font-family: var(--tb-sans); font-weight: 600; border-radius: var(--tb-r-sm); transition: background .15s, border-color .15s, color .15s, transform .08s; } body.tb-ferramenta button:active { transform: translateY(1px); } /* o botão que dispara a geração: vermelho REC, largura total, em Anton */ body.tb-ferramenta .btn-primary, body.tb-ferramenta #generate-btn, body.tb-ferramenta #btn-generate, body.tb-ferramenta #btn-gerar { font-family: var(--tb-display); font-size: 16px; letter-spacing: .07em; text-transform: uppercase; background: var(--tb-red); color: #fff; border: none; padding: 13px 20px; width: 100%; border-radius: var(--tb-r-sm); box-shadow: 0 6px 18px rgba(228, 50, 43, .22); } body.tb-ferramenta .btn-primary:hover, body.tb-ferramenta #generate-btn:hover, body.tb-ferramenta #btn-generate:hover, body.tb-ferramenta #btn-gerar:hover { background: #f04039; } body.tb-ferramenta .btn-primary:disabled, body.tb-ferramenta #generate-btn:disabled { opacity: .45; box-shadow: none; } /* botões de escolha (plataforma, duração, tipo…) */ body.tb-ferramenta .seg button, body.tb-ferramenta .chip, body.tb-ferramenta .chips button, body.tb-ferramenta .pill { font-family: var(--tb-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; background: var(--tb-bg-3); color: var(--tb-muted); border: 1px solid var(--tb-line-soft); padding: 8px 12px; } body.tb-ferramenta .seg button.active, body.tb-ferramenta .chip.active, body.tb-ferramenta .chips button.active, body.tb-ferramenta .pill.active, body.tb-ferramenta .seg button[aria-pressed="true"] { background: var(--tb-gold-tint); border-color: var(--tb-gold); color: var(--tb-gold); } body.tb-ferramenta ::-webkit-scrollbar { width: 10px; height: 10px; } body.tb-ferramenta ::-webkit-scrollbar-track { background: transparent; } body.tb-ferramenta ::-webkit-scrollbar-thumb { background: var(--tb-bg-4); border-radius: 8px; border: 3px solid var(--tb-bg-1); } body.tb-ferramenta ::-webkit-scrollbar-thumb:hover { background: #3a3849; } /* ------------------------------------------------- o tutorial no centro Enquanto a pessoa não gerou nada, o palco mostra o manual da ferramenta. Some sozinho na primeira geração. */ .tb-guia { max-width: 860px; margin: 0 auto; padding: 6px 0 40px; animation: tb-entra .35s ease-out; } @keyframes tb-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .tb-guia-topo { display: flex; align-items: flex-start; gap: 17px; margin-bottom: 18px; } .tb-guia-icone { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 14px; background: linear-gradient(150deg, var(--tb-bg-4), var(--tb-bg-2)); border: 1px solid var(--tb-line); display: grid; place-items: center; font-size: 27px; } .tb-guia h1 { font-family: var(--tb-display) !important; font-size: 40px !important; letter-spacing: .01em; text-transform: uppercase; color: var(--tb-text); margin: 2px 0 5px !important; line-height: 1.02; } .tb-guia-tagline { color: var(--tb-gold); font-size: 14.5px; font-weight: 600; margin: 0; } .tb-guia-resumo { font-size: 16px; line-height: 1.7; color: #d6d2c8; border-left: 2px solid var(--tb-gold-dp); padding: 2px 0 2px 18px; margin: 0 0 30px; } .tb-guia-blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; } .tb-guia-bloco { background: var(--tb-bg-2); border: 1px solid var(--tb-line-soft); border-radius: var(--tb-r); padding: 18px 20px; } .tb-guia-bloco h3 { font-family: var(--tb-mono) !important; font-size: 10px !important; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tb-gold); margin: 0 0 12px !important; } .tb-guia-bloco ul, .tb-guia-bloco ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .tb-guia-bloco li { font-size: 13.5px; line-height: 1.55; color: var(--tb-muted); padding-left: 16px; position: relative; } .tb-guia-bloco ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--tb-gold-dp); } .tb-guia-bloco ol { counter-reset: tbp; } .tb-guia-bloco ol li { counter-increment: tbp; padding-left: 27px; } .tb-guia-bloco ol li::before { content: counter(tbp); position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--tb-bg-4); color: var(--tb-gold); font-family: var(--tb-mono); font-size: 10px; font-weight: 700; display: grid; place-items: center; } .tb-guia-rodape { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--tb-line-soft); font-family: var(--tb-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tb-dim); display: flex; align-items: center; gap: 9px; } .tb-guia-rodape::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tb-red); box-shadow: 0 0 9px var(--tb-red); animation: tb-rec 1.9s ease-in-out infinite; } @keyframes tb-rec { 0%,100% { opacity: 1; } 50% { opacity: .25; } }