/* Dojo. Sistema visual. * * A direção vem das duas obras que já vivem no app: o bambu de Hokusai e a * paisagem de Sesshū. Nanquim sobre papel, e é literalmente isso que a * interface é. Nada de "inspirado no Japão": os materiais são os mesmos. * * sumi 墨 a tinta. Preto de nanquim, que não é preto de tela: puxa quente * e vive em diluições, não em cinzas. É a cor do texto E a cor do * botão principal. No vocabulário original, tinta é tinta. * washi 和紙 o papel. Off-white FRIO, levemente esverdeado, com fibra à * mostra. Não é creme: creme é papel de embrulho ocidental, e foi * o que esta folha era antes. * shu 朱 o vermelhão do carimbo. Aparece em 1% da tela, nunca como * preenchimento. É a única cor que a tradição deixa interromper * o sumi, e aqui ela marca aprovação (ver `.selo`). * rokushō 緑青 o verdete do bronze oxidado. Critério cumprido. * * O que mudou em relação à versão anterior: o acento âmbar saiu. Ele fazia a * tela parecer papel kraft, e âmbar sobre creme é o lugar-comum para onde todo * projeto escorrega. Agora o peso está no contraste tinta/papel, e a cor é * evento, não superfície. * * Sobre o tema escuro: TODA cor mora na camada de tokens abaixo. Regra que * escreve cor literal fora dela funciona no claro e some no escuro, se for * preciso uma cor nova, o lugar dela é aqui em cima, nos três blocos. */ :root { /* ---- Papel e tinta ---- */ --ds-bg: #eceee7; --ds-panel: #e4e7de; --ds-surface: #f5f6f1; --ds-line: #d5d8ce; --ds-line-dash: #bcc0b4; --ds-text-900: #1b1b18; --ds-text-700: #3b3d36; /* Diluições da mesma tinta, não cinzas neutros: 500 é o piso do texto * secundário (6,3:1 sobre o papel) e 400 o piso do que ainda é texto. */ --ds-text-500: #55574f; --ds-text-400: #696b64; /* ---- Acento: a própria tinta ---- * O botão principal é sumi cheio sobre papel. Parece óbvio depois de * escrito, e é o que separa esta tela de mais uma com botão colorido. */ --ds-acento: #1b1b18; --ds-acento-claro: #3b3d36; --ds-acento-escuro: #000000; --ds-acento-veu: #e3e6dc; --ds-acento-linha: #b9bdb1; --ds-acento-tinta: #1b1b18; /* Tinta que fica POR CIMA do acento: papel no claro, papel no escuro. */ --ds-acento-contraste: #f5f6f1; /* ---- Os dois acentos: 朱 e 藍 ---- * O par clássico do artesanato japonês. O carimbo vermelho e o pano de * índigo. Aqui eles dividem o trabalho por significado, não por gosto: * * 朱 shu aprovação e agora. O selo, o passo em curso, o anel de foco. * Se preencher área maior que um selo, é erro de aplicação. * 藍 ai explicação. A voz do mentor no chat e a camada de teoria, * o "por que é assim", que é a razão de o app existir. * * Duas cores com dois papéis: quando as duas aparecem na mesma tela, elas * dizem coisas diferentes, e é isso que justifica a segunda. */ --ds-selo: #b53f24; --ds-selo-veu: #f7e7e1; --ds-ai: #2c4f6b; --ds-ai-veu: #e2e8ee; --ds-ai-linha: #b7c6d3; /* ---- Estados ---- */ --ds-ok: #4a7460; --ds-ok-veu: #e2ebe4; --ds-atencao: #7c5d1e; --ds-atencao-veu: #f2ecdb; --ds-erro: #a8342a; --ds-erro-veu: #f6e5e2; /* ---- A lateral é sumi nos dois temas ---- */ --ds-lateral: #1b1b18; --ds-lateral-tinta: #eceee7; --ds-lateral-fraca: rgba(236, 238, 231, 0.6); --ds-lateral-linha: rgba(236, 238, 231, 0.13); /* ---- Tipografia ---- * As três famílias são japonesas com latim próprio, e é essa a razão da * escolha: o latim delas herda a proporção e o ritmo do desenho japonês * sem precisar de nenhum enfeite oriental por cima. * * mincho 明朝 serifa de pincel. Só em título, e pouco. * gothic ゴシック o texto corrido. * code mono da família M+, para rótulo, número e código. */ --ds-font-sans: "Zen Kaku Gothic New", system-ui, -apple-system, sans-serif; --ds-font-display: "Zen Old Mincho", Georgia, serif; --ds-font-mono: "M PLUS 1 Code", ui-monospace, "SFMono-Regular", monospace; /* ---- Movimento (discreto: isto é ferramenta de trabalho) ---- */ --ds-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ds-fast: 130ms; --ds-mid: 220ms; /* ---- Ritmo: a escala de espaço ---- * * 間 (ma): o intervalo é elemento, não sobra. E, como na carpintaria * japonesa, tudo sai de um módulo só: o 間 dimensiona o tatame, o vão entre * pilares e o cômodo inteiro, cada medida um múltiplo da mesma unidade. * * O módulo aqui é 8px. Antes desta escala a folha usava 41 valores * diferentes de espaçamento (0,42rem, 0,45rem, 0,55rem, 1,05rem, 1,15rem…), * todos fazendo o mesmo trabalho e nenhum concordando com o outro. Agora * são oito degraus, e escolher espaçamento virou escolher o degrau. * * ma-1 4px encosto: ícone e rótulo, marcador e texto * ma-2 8px dentro de um controle * ma-3 12px entre linhas de uma lista * ma-4 16px respiro interno de um bloco * ma-5 24px entre campos de um formulário * ma-6 32px entre blocos de uma seção * ma-7 48px entre seções da folha * ma-8 72px o vão grande, para abrir a página */ --ma-1: 0.25rem; --ma-2: 0.5rem; --ma-3: 0.75rem; --ma-4: 1rem; --ma-5: 1.5rem; --ma-6: 2rem; --ma-7: 3rem; --ma-8: 4.5rem; --ds-gap: var(--ma-7); --ds-lateral-larg: 262px; /* Quase reto: canto arredondado é simpatia de framework, e aqui o corte * limpo é que dá a precisão. */ --ds-raio: 2px; --ds-raio-folha: 3px; --ds-control-y: 0.66rem; --ds-control-x: 1.2rem; --ds-focus-ring: 0 0 0 2px var(--ds-bg), 0 0 0 4px var(--ds-selo); --ds-shadow-soft: 0 1px 2px rgba(27, 27, 24, 0.04), 0 10px 24px rgba(27, 27, 24, 0.05); /* Textura de papel. No claro ela escurece de leve; no escuro precisa * clarear, senão some. Por isso são dois tokens e não um. */ --ds-textura-opacidade: 0.07; --ds-textura-mistura: multiply; /* Como a arte em nanquim entra na tela: no claro é tinta escura sobre * papel; no escuro, papel claro sobre tinta. A imagem inverte. */ --ds-arte-filtro: none; --ds-arte-opacidade: 0.9; --ds-arte-mistura: multiply; color-scheme: light; } /* O escuro é o padrão de quem programa à noite; o :not() deixa a escolha * explícita de tema claro vencer a preferência do sistema. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --ds-bg: #131412; --ds-panel: #0d0e0c; --ds-surface: #1b1d19; --ds-line: #2b2d28; --ds-line-dash: #3d403a; --ds-text-900: #edeee8; --ds-text-700: #c9cbc3; --ds-text-500: #a2a49b; --ds-text-400: #83857c; --ds-acento: #edeee8; --ds-acento-claro: #ffffff; --ds-acento-escuro: #c9cbc3; --ds-acento-veu: #202220; --ds-acento-linha: #3d403a; --ds-acento-tinta: #edeee8; --ds-acento-contraste: #131412; --ds-selo: #e87658; --ds-selo-veu: #2b1c17; --ds-ai: #7fa8c4; --ds-ai-veu: #19212a; --ds-ai-linha: #33475a; --ds-ok: #8ab49b; --ds-ok-veu: #1a221d; --ds-atencao: #d3ac63; --ds-atencao-veu: #241f14; --ds-erro: #e88a7c; --ds-erro-veu: #271816; --ds-lateral: #0b0c0a; --ds-lateral-linha: rgba(236, 238, 231, 0.1); --ds-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.4); --ds-textura-opacidade: 0.06; --ds-textura-mistura: screen; --ds-arte-filtro: invert(1); --ds-arte-opacidade: 0.75; --ds-arte-mistura: screen; color-scheme: dark; } } :root[data-tema="escuro"] { --ds-bg: #131412; --ds-panel: #0d0e0c; --ds-surface: #1b1d19; --ds-line: #2b2d28; --ds-line-dash: #3d403a; --ds-text-900: #edeee8; --ds-text-700: #c9cbc3; --ds-text-500: #a2a49b; --ds-text-400: #83857c; --ds-acento: #edeee8; --ds-acento-claro: #ffffff; --ds-acento-escuro: #c9cbc3; --ds-acento-veu: #202220; --ds-acento-linha: #3d403a; --ds-acento-tinta: #edeee8; --ds-acento-contraste: #131412; --ds-selo: #e87658; --ds-selo-veu: #2b1c17; --ds-ai: #7fa8c4; --ds-ai-veu: #19212a; --ds-ai-linha: #33475a; --ds-ok: #8ab49b; --ds-ok-veu: #1a221d; --ds-atencao: #d3ac63; --ds-atencao-veu: #241f14; --ds-erro: #e88a7c; --ds-erro-veu: #271816; --ds-lateral: #0b0c0a; --ds-lateral-linha: rgba(236, 238, 231, 0.1); --ds-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.4); --ds-textura-opacidade: 0.06; --ds-textura-mistura: screen; --ds-arte-filtro: invert(1); --ds-arte-opacidade: 0.75; --ds-arte-mistura: screen; color-scheme: dark; } /* BASE */ .ds-root { /* Entrelinha 1,75: o gothic tem altura-x alta e o texto adensa rápido. É * também o ar que a composição japonesa dá ao corpo do texto. */ font-family: var(--ds-font-sans); font-size: 16px; line-height: 1.75; color: var(--ds-text-900); background: var(--ds-bg); -webkit-font-smoothing: antialiased; } body { margin: 0; background: var(--ds-bg); min-height: 100vh; } /* A fibra do papel. * * Camada fixa por cima do fundo e por baixo de tudo, com pointer-events: none. * Ela existe para a tela não ser uma chapa de cor lisa nas áreas em que não há * conteúdo, que num app de leitura são muitas. Fixed e não repeat-no-scroll: * assim a textura não "anda" junto com o texto, que daria a impressão errada de * que ela é conteúdo. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: url("../img/papel.38e399a808f1.svg") repeat; background-size: 220px 220px; opacity: var(--ds-textura-opacidade); mix-blend-mode: var(--ds-textura-mistura); } /* O conteúdo sobe acima da textura do papel sem precisar de z-index em cada bloco. */ .app-side, .app-frame, .app-main, .ds-avisos { position: relative; z-index: 1; } * { box-sizing: border-box; } /* Link é tinta com sublinhado fino, não cor: numa tela em que só o carimbo * tem cor, um link azul (ou âmbar) seria a coisa mais barulhenta da página. */ a { color: var(--ds-text-900); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { text-decoration-color: var(--ds-selo); } /* O mincho entra só aqui, e em tamanho grande: é uma serifa de pincel, e ela * cansa em texto corrido. Toda a leitura é do gothic. */ .ds-display { font-family: var(--ds-font-display); font-weight: 600; letter-spacing: -0.01em; } .ds-h1 { font-family: var(--ds-font-display); font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.22; letter-spacing: -0.012em; margin: 0; } .ds-h2 { font-family: var(--ds-font-display); font-weight: 600; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.3; letter-spacing: -0.008em; margin: 0; } .ds-muted { color: var(--ds-text-500); } /* Rótulos técnicos: pequenos e MUITO espaçados. É o gesto tipográfico que a * edição japonesa usa para separar o rótulo do conteúdo sem caixa nem cor: * o espaço entre as letras faz o trabalho que uma tarja faria. */ .ds-kicker, .nav-label, .campo > label, .data-table th, .stat-label, .def-list dt { font-family: var(--ds-font-mono); /* 0.75rem = 12px, o piso para maiúscula em mono: a M PLUS 1 Code tem * altura-x baixa, e a 10px (onde isto estava) o rótulo de um campo de * formulário virava enfeite ilegível. O espacejamento diminui junto, porque * tracking largo que ajudava a distinguir 10px atrapalha a 12px. */ font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ds-text-500); } /* Rótulo de campo é instrução de preenchimento, não legenda: ganha mais corpo * e menos espacejamento que o kicker, que só abre seção. */ .campo > label { font-size: 0.82rem; letter-spacing: 0.1em; color: var(--ds-text-700); } /* Números e identificadores: mono com dígito de largura fixa, para coluna de * número não dançar a cada atualização. */ .num, .stat-valor, .passo-num, .custo-valor { font-family: var(--ds-font-mono); font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: -0.02em; } /* KASURE: abre seção. * * A cota de arquitetura que veio do A.R.Q. (linha com ticks nas pontas) saiu: * ela pertence a uma prancha técnica, não a uma folha de nanquim. No lugar, * o traço que vai secando. Cheio onde o pincel encosta e sumindo à direita, * que é o que kasure quer dizer. Um degradê, sem imagem e sem enfeite. */ .secao-titulo { display: flex; align-items: baseline; gap: var(--ma-4); margin: 0 0 var(--ma-5); font-family: var(--ds-font-sans); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; } .secao-titulo::after { content: ""; flex: 1; height: 1px; align-self: center; background: linear-gradient(to right, var(--ds-line-dash) 0%, var(--ds-line) 45%, transparent 100%); } /* "Por que é assim" é a camada que separa este app de um tutorial, e é a única * seção que recebe o índigo: a mesma tinta da voz do mentor no chat. */ .secao-titulo--teoria { color: var(--ds-ai); } .secao-titulo--teoria::after { background: linear-gradient(to right, var(--ds-ai) 0%, var(--ds-ai-linha) 45%, transparent 100%); opacity: 0.7; } /* MARCA */ .app-brand { display: inline-flex; align-items: center; gap: var(--ma-2); text-decoration: none; color: inherit; } .app-brand-mark { width: 2rem; height: 2rem; flex-shrink: 0; } /* No hover a saída do traço engrossa um pouco: o pincel voltando ao papel. * É o único movimento da marca, e dura o suficiente para ser notado uma vez. */ .app-brand-mark .mk-saida { transition: stroke-width 420ms var(--ds-ease-out); } .app-brand:hover .mk-saida { stroke-width: 2.4; } .app-brand-word { font-family: var(--ds-font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.01em; } /* 道場 miúdo ao lado do nome: o app se chama Dojo, e a palavra existe. Fica no * tamanho de uma nota de rodapé porque é isso que ela é. */ .app-brand-kanji { font-family: var(--ds-font-display); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--ds-lateral-fraca); align-self: flex-end; padding-bottom: var(--ma-1); } /* SHELL: lateral escura fixa, folha clara ao lado */ .nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .app-side { position: fixed; top: 0; left: 0; bottom: 0; width: var(--ds-lateral-larg); z-index: 20; display: flex; flex-direction: column; background: var(--ds-lateral); color: var(--ds-lateral-tinta); } .app-side-head { display: flex; align-items: center; justify-content: space-between; padding: var(--ma-4) var(--ma-4) var(--ma-4); } .nav-burger { display: none; } /* `.app-side` na frente não é decoração: .ds-btn é declarado mais abaixo nesta * folha e, com a mesma especificidade, venceria por posição. * * Na lateral a relação se inverte: o fundo já é sumi, então a ação principal é * um bloco de PAPEL sobre a tinta. Usar --ds-acento aqui pintaria preto sobre * preto, porque no tema claro o acento é a própria tinta. */ .app-side .nav-destaque { margin: 0 var(--ma-4) var(--ma-4); justify-content: flex-start; background: var(--ds-lateral-tinta); border-color: var(--ds-lateral-tinta); color: var(--ds-lateral); } .app-side .nav-destaque:hover { background: #fff; border-color: #fff; color: var(--ds-lateral); transform: none; box-shadow: none; } .app-nav { flex: 1; overflow-y: auto; padding: var(--ma-1) var(--ma-3) var(--ma-4); display: flex; flex-direction: column; gap: var(--ma-4); } .nav-group { display: flex; flex-direction: column; gap: var(--ma-1); } .nav-label { display: flex; align-items: center; gap: var(--ma-2); padding: var(--ma-1) var(--ma-2) var(--ma-1); color: var(--ds-lateral-fraca); } .nav-label::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 1px; background: currentColor; } .nav-link { position: relative; display: flex; align-items: center; gap: var(--ma-3); padding: var(--ma-2) var(--ma-3); border-radius: var(--ds-raio); text-decoration: none; font-size: 0.95rem; color: var(--ds-lateral-tinta); transition: background var(--ds-fast) ease, color var(--ds-fast) ease; } .nav-link svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; color: var(--ds-lateral-fraca); transition: color var(--ds-fast) ease; } .nav-link:hover { background: rgba(255, 255, 255, 0.06); } .nav-link:hover svg { color: var(--ds-lateral-tinta); } .nav-link.is-active { font-weight: 700; } .nav-link.is-active svg { color: var(--ds-lateral-tinta); } /* A lateral é sumi nos dois temas, então nada de --ds-acento aqui: no tema * claro ele É a tinta, e o marcador sumiria no próprio fundo. O vermelhão * marca "você está aqui". O mesmo pote de tinta do carimbo. */ .nav-link.is-active::before { content: ""; position: absolute; left: -0.75rem; top: 0.3rem; bottom: 0.3rem; width: 2px; background: var(--ds-selo); } .app-side-foot { padding: var(--ma-4) var(--ma-4) var(--ma-4); display: flex; flex-direction: column; gap: var(--ma-3); border-top: 1px solid var(--ds-lateral-linha); } .app-quota { display: flex; flex-direction: column; gap: var(--ma-1); font-size: 0.72rem; color: var(--ds-lateral-fraca); } .app-quota strong { color: var(--ds-lateral-tinta); font-weight: 500; } /* Coluna, não linha: com três links legais mais o botão de sair, uma única * linha não cabe nos 262px da lateral, e o "Sair" era empurrado pra fora. */ .app-side-rodape { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ma-3); } .app-inline-form { margin: 0; } .app-sair { display: flex; align-items: center; gap: var(--ma-2); background: none; border: 0; color: var(--ds-lateral-fraca); font: inherit; font-size: 0.84rem; cursor: pointer; padding: var(--ma-1) 0; transition: color var(--ds-fast) ease; } .app-sair:hover { color: var(--ds-lateral-tinta); } .app-sair svg { width: 0.9rem; height: 0.9rem; } .pe-legal { display: flex; flex-wrap: wrap; row-gap: var(--ma-1); column-gap: var(--ma-3); font-size: 0.8rem; } .pe-legal a { color: var(--ds-lateral-fraca); text-decoration: none; } .pe-legal a:hover { text-decoration: underline; } .app-frame { position: relative; margin-left: var(--ds-lateral-larg); min-height: 100vh; } /* A folha: o conteúdo tem uma largura de leitura e fica CENTRADO nela, não * colado à esquerda. Em monitor largo, texto grudado na borda esquerda com meio * metro de vazio à direita é desconforto puro. */ .app-main { position: relative; width: 100%; min-height: 100vh; padding: var(--ma-7) var(--ma-6) var(--ma-8); overflow-x: clip; } /* Sem padding: a tela de entrada monta o próprio layout de borda a borda. As * páginas públicas de texto (termos, privacidade) recuperam a margem abaixo. */ .app-main--public { min-height: 100vh; padding: 0; display: grid; } .app-main--public > .page { padding: var(--ma-7) var(--ma-5) var(--ma-8); max-width: 52rem; } /* RITMO: a página e suas seções */ /* margin-inline aqui, e não em `.app-main > *`: item de grade com margem * automática deixa de esticar e passa a caber no conteúdo. Foi o que encolheu * a tela de entrada quando a regra era genérica. */ .page { display: flex; flex-direction: column; gap: var(--ds-gap); width: 100%; max-width: 68rem; margin-inline: auto; } .page--narrow { margin: 0 auto; width: 100%; max-width: 34rem; } .page--leitura { margin: 0 auto; width: 100%; max-width: 52rem; } .page-head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ma-5); } .page-head .ds-kicker { display: block; } .page-head h1 { margin: var(--ma-1) 0 0; } .page-sub { margin: var(--ma-2) 0 0; color: var(--ds-text-500); max-width: 46rem; line-height: 1.55; } .page-head-actions { display: flex; gap: var(--ma-2); flex-shrink: 0; } /* .ds-card não é caixa: é um bloco impresso na folha. Superfície de verdade só * para objeto repetido numa grade (.objeto-card). */ .ds-card { display: block; } .grade { display: grid; gap: var(--ma-4); grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); } .objeto-card { display: flex; flex-direction: column; gap: var(--ma-3); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-raio-folha); padding: var(--ma-4) var(--ma-5); text-decoration: none; color: inherit; transition: border-color var(--ds-fast) ease, box-shadow var(--ds-mid) var(--ds-ease), transform var(--ds-fast) var(--ds-ease-out); } a.objeto-card:hover { border-color: var(--ds-text-700); } .objeto-card h3 { margin: 0; font-family: var(--ds-font-display); font-size: 1.05rem; font-weight: 600; } .objeto-card p { margin: 0; color: var(--ds-text-500); font-size: 0.92rem; } /* BOTÕES */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ma-2); white-space: nowrap; cursor: pointer; text-decoration: none; font-family: var(--ds-font-sans); font-weight: 500; font-size: 0.95rem; line-height: 1.2; border-radius: var(--ds-raio); padding: var(--ds-control-y) var(--ds-control-x); background: var(--ds-surface); color: var(--ds-text-900); border: 1px solid var(--ds-line); position: relative; overflow: hidden; transition: background var(--ds-fast) ease, color var(--ds-fast) ease, border-color var(--ds-fast) ease, box-shadow var(--ds-mid) var(--ds-ease), transform var(--ds-fast) var(--ds-ease-out); } .ds-btn svg { width: 1rem; height: 1rem; } /* Sem translateY: papel não levita. O que muda no hover é a tinta da borda. */ .ds-btn:hover { border-color: var(--ds-text-900); color: var(--ds-text-900); } .ds-btn--solid { color: var(--ds-acento-contraste); background: var(--ds-acento); border-color: var(--ds-acento); } .ds-btn--solid:hover { color: var(--ds-acento-contraste); background: var(--ds-acento-escuro); border-color: var(--ds-acento-escuro); } .ds-btn--discreto { background: none; border-color: transparent; color: var(--ds-text-500); } .ds-btn--discreto:hover { background: var(--ds-panel); } .ds-btn:active { box-shadow: none; transform: translateY(1px); transition-duration: 60ms; } .ds-btn:focus-visible { outline: 2px solid var(--ds-selo); outline-offset: 2px; } .ds-btn[disabled] { opacity: 0.5; pointer-events: none; } /* Envio em curso: um filete percorre a base do botão */ .ds-btn.is-busy { pointer-events: none; opacity: 0.85; } .ds-btn.is-busy::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; opacity: 0.5; animation: ds-busy 900ms var(--ds-ease) infinite; } @keyframes ds-busy { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } } .form-actions { display: flex; gap: var(--ma-2); justify-content: flex-end; margin-top: var(--ma-4); } /* FORMULÁRIOS */ .form-campos { display: flex; flex-direction: column; gap: var(--ma-4); } .campo { display: flex; flex-direction: column; gap: var(--ma-1); min-width: 0; } .campo input, .campo select, .campo textarea { width: 100%; min-height: 2.65rem; padding: var(--ma-2) var(--ma-3); border: 1px solid var(--ds-line-dash); border-radius: var(--ds-raio); background: var(--ds-surface); color: var(--ds-text-900); font: inherit; } .campo textarea { min-height: 7rem; resize: vertical; line-height: 1.6; } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--ds-text-900); box-shadow: var(--ds-focus-ring); } .campo-ajuda { font-size: 0.88rem; color: var(--ds-text-500); } .campo-erro { font-size: 0.88rem; color: var(--ds-erro); } .campo-erro ul { margin: 0; padding-left: var(--ma-4); } .campo--codigo textarea { font-family: var(--ds-font-mono); font-size: 0.9rem; min-height: 14rem; } /* Escolha que muda o rumo do trabalho merece linha própria, não um