/* ============================================================== TEMAS ====== Contrato: nenhuma regra abaixo escreve cor crua. Toda cor sai de um token, e os tokens vivem só neste bloco. É o que faz um tema novo ser um bloco de 13 linhas em vez de uma caçada por hexadecimal no arquivo inteiro. Dois eixos independentes, os dois no : data-tema = controle | ouro | terminal | papel (a paleta) data-modo = escuro | claro (a luz) Os seletores são de ATRIBUTO, não `:root[...]`, de propósito: assim o mesmo bloco pinta uma amostra dentro do seletor de temas (uma div com data-tema próprio) sem duplicar nenhum hexadecimal no JavaScript. Especificidade: [data-tema] vale 1 atributo; [data-modo][data-tema] vale 2, então o claro sempre vence o escuro, independente da ordem. Os 13 primitivos de cada tema: bg panel panel-2 border text muted accent — cor de preenchimento da marca (botão, borda acesa) accent-ink — texto EM CIMA do accent (o tema amarelo precisa de tinta escura) accent-text — o accent como texto/link sobre o fundo (versão legível) accent-2 — secundária: hover do botão primário, etapas de follow-up green red yellow — estado: pronto, perigo, grifo/comentário ------------------------------------------------------------------------- */ /* --- 1. Controle · azul e violeta (a paleta original do dash) ------------- */ [data-tema="controle"] { --bg: #0f1117; --panel: #161922; --panel-2: #1d2230; --border: #262b3a; --text: #e6e8ee; --muted: #8b91a3; --accent: #4f8cff; --accent-ink: #ffffff; --accent-text: #6f9fff; --accent-2: #7c5cff; --green: #2ecc71; --red: #ff5470; --yellow: #ffc145; } [data-modo="claro"][data-tema="controle"] { --bg: #f5f7fb; --panel: #ffffff; --panel-2: #eef1f7; --border: #dce1ec; --text: #171a22; --muted: #646c80; --accent: #3574e8; --accent-ink: #ffffff; --accent-text: #2560cf; --accent-2: #6a45e6; --green: #109b68; --red: #d92b4b; --yellow: #c98a10; } /* --- 2. Ouro · grafite quente e amarelo ---------------------------------- */ /* O fundo é grafite, não preto: preto chapado com amarelo em cima vibra e cansa a vista numa tela em que se lê texto o dia inteiro. */ [data-tema="ouro"] { --bg: #1a1917; --panel: #232220; --panel-2: #2c2a27; --border: #3b3733; --text: #f2efe9; --muted: #a29b90; --accent: #f5c443; --accent-ink: #1a1917; --accent-text: #f5c443; --accent-2: #ffd977; --green: #4fbe85; --red: #f2695f; --yellow: #f5c443; } [data-modo="claro"][data-tema="ouro"] { --bg: #f8f5ee; --panel: #fffdf8; --panel-2: #f0ebdf; --border: #e2dac9; --text: #211f1a; --muted: #7a7264; --accent: #e0ac1f; --accent-ink: #211f1a; --accent-text: #8f6708; --accent-2: #f0c14b; --green: #12855f; --red: #c0392b; --yellow: #a9761a; } /* --- 3. Terminal · grafite frio e esmeralda ------------------------------ */ /* Família Supabase/Vercel: neutro quase preto com um verde só de acento. */ [data-tema="terminal"] { --bg: #181a19; --panel: #212423; --panel-2: #2a2e2c; --border: #353a37; --text: #e9ede9; --muted: #929c96; --accent: #3ecf8e; --accent-ink: #0c1310; --accent-text: #4fdb9c; --accent-2: #2bb5a0; --green: #7ad3a4; --red: #f26d6d; --yellow: #e5b95c; } [data-modo="claro"][data-tema="terminal"] { --bg: #f4f7f5; --panel: #ffffff; --panel-2: #eaf0ec; --border: #d7e1db; --text: #14201a; --muted: #5e6f66; --accent: #14a172; --accent-ink: #ffffff; --accent-text: #0d7f59; --accent-2: #0f8f8a; --green: #12996a; --red: #cf3b45; --yellow: #b08009; } /* --- 4. Papel · neutro quente e terracota ------------------------------- */ /* Família Notion: o cinza é quente e a cor entra só onde precisa apontar. */ [data-tema="papel"] { --bg: #191715; --panel: #211e1b; --panel-2: #2a2724; --border: #393330; --text: #efe9e3; --muted: #a49a90; --accent: #e0714a; --accent-ink: #ffffff; --accent-text: #ef8a66; --accent-2: #c95c38; --green: #67b98a; --red: #e2565b; --yellow: #dfae5a; } [data-modo="claro"][data-tema="papel"] { --bg: #faf8f5; --panel: #ffffff; --panel-2: #f2eee8; --border: #e5ded4; --text: #1c1815; --muted: #746b60; --accent: #c4552c; --accent-ink: #ffffff; --accent-text: #a8451f; --accent-2: #a8451f; --green: #12855f; --red: #c0392b; --yellow: #a9761a; } /* --- Derivados: saem dos primitivos, iguais em todo tema ---------------- */ /* `color-mix` no lugar de rgba() fixo — é o que permite um tema novo não ter que redeclarar dezoito transparências do accent. */ :root { --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --accent-ring: color-mix(in srgb, var(--accent) 26%, transparent); --accent-faint: color-mix(in srgb, var(--accent) 6%, transparent); --green-soft: color-mix(in srgb, var(--green) 10%, transparent); --green-ring: color-mix(in srgb, var(--green) 45%, transparent); --mark: color-mix(in srgb, var(--yellow) 26%, transparent); --mark-active: color-mix(in srgb, var(--yellow) 55%, transparent); --border-hover: color-mix(in srgb, var(--border) 60%, var(--muted)); --side-w: 216px; } /* Sombra, véu e tinta sobre verde dependem da LUZ, não da paleta: no claro a sombra preta de 50% que funciona no escuro vira uma mancha. */ [data-modo="escuro"] { color-scheme: dark; --shadow-1: 0 2px 8px rgba(0, 0, 0, .35); --shadow-2: 0 10px 30px rgba(0, 0, 0, .5); --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, .7); --veil: rgba(0, 0, 0, .6); --green-ink: var(--bg); } [data-modo="claro"] { color-scheme: light; --shadow-1: 0 1px 2px rgba(20, 24, 34, .07), 0 3px 10px rgba(20, 24, 34, .06); --shadow-2: 0 12px 32px rgba(20, 24, 34, .14); --shadow-3: 0 20px 50px -18px rgba(20, 24, 34, .22); --veil: rgba(24, 26, 34, .34); --green-ink: #ffffff; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; } /* -------------------------------------------------------------- estrutura --- */ /* A lateral é `fixed` e o conteúdo ganha uma margem do tamanho dela. Assim quem rola é o — o drawer, os toasts e o pop-up do quadro continuam se posicionando contra a viewport, como sempre fizeram. */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--side-w); z-index: 25; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--border); transition: width .16s ease, transform .16s ease; } .content { margin-left: var(--side-w); transition: margin-left .16s ease; min-width: 0; } /* O estado da lateral fica no , não no : o script do escreve ele antes do primeiro quadro, e assim a lateral não abre para depois recolher. */ [data-lateral="recolhida"] { --side-w: 66px; } /* Logo: monograma (arquivo da marca, verde fixo) + a palavra em texto do tema. A palavra não sai do PNG de propósito — lá ela é branca e desapareceria nos temas claros. O verde do monograma é da marca e não acompanha o tema. */ .logo { display: flex; align-items: center; gap: 10px; padding: 16px; color: var(--text); overflow: hidden; } .logo:hover { text-decoration: none; } .logo-mark { width: 38px; height: 38px; flex: 0 0 auto; display: block; } .logo-words { font-size: 16.5px; font-weight: 650; letter-spacing: -.015em; white-space: nowrap; } [data-lateral="recolhida"] .logo { padding: 16px 0; justify-content: center; } [data-lateral="recolhida"] .logo-words { display: none; } /* Navegação vertical. As classes `.tabs`/`.tab` continuam as mesmas porque o app.js liga a view pelo `data-view` — mudou o desenho, não o contrato. */ .tabs { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; overflow-y: auto; flex: 1; } .tab { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; border-left: 2px solid transparent; } .tab:hover { color: var(--text); background: var(--panel-2); } .tab.active { color: var(--text); background: var(--accent-soft); border-left-color: var(--accent); font-weight: 600; } .tab .ti { flex: 0 0 18px; text-align: center; font-size: 14px; } [data-lateral="recolhida"] .tab { justify-content: center; padding: 10px 0; border-left: none; } [data-lateral="recolhida"] .tab .tl { display: none; } .side-foot { border-top: 1px solid var(--border); padding: 8px; display: flex; flex-direction: column; gap: 6px; } .side-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; background: transparent; border: none; border-radius: 8px; color: var(--muted); font-size: 13px; text-align: left; white-space: nowrap; overflow: hidden; } .side-btn:hover { background: var(--panel-2); color: var(--text); } .side-btn .ti { flex: 0 0 18px; text-align: center; font-size: 14px; } .side-user { display: flex; align-items: center; gap: 8px; padding: 2px 10px 4px; overflow: hidden; } .side-user .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-lateral="recolhida"] .side-btn { justify-content: center; padding: 10px 0; } [data-lateral="recolhida"] .side-btn .tl { display: none; } /* Recolhida esconde o NOME de quem está logado, nunca o "Sair": sumir com a saída é o tipo de economia de espaço que faz a pessoa procurar por minutos. */ [data-lateral="recolhida"] .side-user { justify-content: center; padding: 2px 0 4px; } [data-lateral="recolhida"] .side-user .who { display: none; } .topbar { display: flex; gap: 10px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--panel); position: sticky; top: 0; z-index: 20; flex-wrap: wrap; } .spacer { flex: 1; } .who { color: var(--muted); font-size: 12px; } /* Botão só de ícone: ☰ da lateral e 🌙/☀️ do modo. */ .icon-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--muted); font-size: 15px; } .icon-btn:hover { background: var(--panel-2); color: var(--text); border-color: var(--border); } /* Véu da lateral: só existe na tela estreita, onde a lateral entra por cima. */ .side-veil { position: fixed; inset: 0; background: var(--veil); z-index: 24; display: none; } [data-lateral="aberta"] .side-veil { display: block; } @media (max-width: 860px) { .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-2); } [data-lateral="aberta"] .sidebar { transform: none; } /* Na tela estreita a lateral flutua: o conteúdo não perde largura por causa dela, e o estado "recolhido" do desktop não vale aqui. */ .content, [data-lateral="recolhida"] .content { margin-left: 0; } /* "recolhida" pode chegar aqui pela memória de uma sessão no desktop; na tela estreita a lateral abre inteira ou não abre, então o estado é desfeito. */ [data-lateral="recolhida"] .sidebar { --side-w: 216px; width: 216px; } [data-lateral="recolhida"] .logo-words, [data-lateral="recolhida"] .tab .tl, [data-lateral="recolhida"] .side-btn .tl, [data-lateral="recolhida"] .side-user .who { display: revert; } [data-lateral="recolhida"] .logo { padding: 16px; justify-content: flex-start; } [data-lateral="recolhida"] .tab, [data-lateral="recolhida"] .side-btn { justify-content: flex-start; padding: 9px 10px; } [data-lateral="recolhida"] .side-user { justify-content: flex-start; padding: 2px 10px 4px; } [data-lateral="recolhida"] .tab { border-left: 2px solid transparent; } [data-lateral="recolhida"] .tab.active { border-left-color: var(--accent); } } /* ------------------------------------------------------------ controles --- */ select, input, textarea, button { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: inherit; } textarea { width: 100%; resize: vertical; line-height: 1.55; } select:focus, input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; } button { cursor: pointer; transition: background .15s; } button:hover { background: var(--border); } button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } button.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink); } button.ghost { background: transparent; } button.danger { color: var(--red); } button:disabled { opacity: .5; cursor: not-allowed; } /* Botão ocupado: o rótulo vira "…ando" e ganha um anel girando. O disabled já bloqueia o clique repetido; o anel é o que conta que algo está acontecendo. */ button.busy { opacity: 1; cursor: progress; } .spinner { display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin .6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } .sidebar, .content { transition: none; } } button.sm { padding: 5px 9px; font-size: 12px; } /* Link com cara de botão. Serve para o que precisa MESMO ser um — abrir o briefing preenchido numa aba nova, por exemplo, onde um