/* GERADO por ui/construir.js a partir de ui/fonte/. NAO EDITE A MAO. */ @layer aqua.base, aqua.componente, aqua.utilitario, aqua.consumidor; /* ==== 00-base.css ==== */ /* 00-base.css - o chao do kit: fonte, reset, tipo, foco, scrollbar, sentinela. Cascateavel vai em @layer aqua.base, a camada mais baixa: componente e consumidor sobrescrevem sem !important. @font-face fica fora porque nao cascateia. */ /* ---- fontes ------------------------------------------------------------- */ /* url() plano de proposito: no flavor browser (aqua-ui.css) o .woff2 mora na MESMA pasta; no flavor nui (aqua-ui.nui.css) o construir.js troca este url() por data: em base64, porque a NUI carrega o kit de outro origin (cfx-nui-aqua-manager) e @font-face entre origins exigiria CORS. Fase 8. */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("instrument-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("geist-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @layer aqua.base { /* ---- reset ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--aqua-font-sans); font-size: var(--aqua-fs-md); line-height: var(--aqua-lh-base); color: var(--aqua-text); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } body { margin: 0; min-height: 100vh; } /* NUI: o jogo aparece atras. Sem isto o CEF pinta a pagina de branco. */ .aqua-nui-veu, .aqua-nui-hud { background: transparent; } /* Margem e do layout (gap), nao do elemento. E o que faz a escala de espaco valer alguma coisa: nenhum elemento chega com espaco proprio. */ h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg, video, canvas { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; } button { padding: 0; border: 0; background: none; cursor: pointer; text-align: inherit; } button:disabled, [aria-disabled="true"] { cursor: not-allowed; } /* ---- tipo ------------------------------------------------------------ */ /* Tres pesos, e so: 400 corpo, 500 rotulo e botao, 600 titulo. Nunca 700. */ h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: var(--aqua-lh-tight); letter-spacing: -0.01em; } h1 { font-size: var(--aqua-fs-2xl); } h2 { font-size: var(--aqua-fs-xl); } h3 { font-size: var(--aqua-fs-lg); } h4, h5, h6 { font-size: var(--aqua-fs-md); } small { font-size: var(--aqua-fs-sm); } strong, b { font-weight: 600; } a { color: var(--aqua-accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 0.15em; } code, kbd, pre, samp { font-family: var(--aqua-font-mono); font-variant-numeric: tabular-nums; } code { font-size: 0.92em; } /* kbd e hr sao base, nao componente: toda NUI precisa dos dois. Raio menor que radius-xs so existe por derivacao do proprio token. */ kbd { display: inline-block; padding: 0 var(--aqua-space-1); font-size: var(--aqua-fs-xs); line-height: 1.6; color: var(--aqua-text-muted); background: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest)); border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong)); border-bottom-width: 2px; border-radius: calc(var(--aqua-radius-xs) / 2); } hr { height: 1px; margin: var(--aqua-space-4) 0; border: 0; background: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border)); } /* Placeholder e texto e mede como texto: text-muted, nunca text-faint. */ ::placeholder { color: var(--aqua-text-muted); opacity: 1; } ::selection { background: rgb(var(--aqua-accent-rgb) / 30%); color: var(--aqua-text); } /* ---- foco ---------------------------------------------------------------- */ /* Ate 2026-09-29 esta era a lei 3 do movimento (anel, nao glow): um outline fino sempre presente, substituido por um traco desenhado (02-movimento.css) quando o aqua-ui.js carregava. Retirada por decisao do dono: nenhum traco visivel ao focar OU ao clicar, em nenhum controle - global, sem excecao de componente. outline: none em :focus-visible cobre o piso e o caso do campo composto (§4); o segundo seletor cobria so a transicao entre os dois e ficou sem uso. O anel desenhado sobrevive em 02-movimento.css, mas so para o aqua-tour (79-tour.css): apontar o alvo de um passo nao e focar. */ :focus-visible { outline: none; } :focus:not(:focus-visible) { outline: 0; } /* ---- scrollbar --------------------------------------------------------- */ /* scrollbar-width e Chrome 121, fora do piso m103. O pseudo-elemento webkit funciona la - o armas ja o usa. */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); border: 2px solid transparent; border-radius: var(--aqua-radius-full); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-active)); } /* ---- sentinela --------------------------------------------------------- */ /* Se tokens.css nao carregou, a pagina fica sem cor e ninguem sabe por que. Deteccao por valor de fallback, nao por seletor - :has() nao existe no m103. Com o token presente, content vira a cor da surface, que e invalida para content: a declaracao invalida em tempo de computacao, content volta a `normal`, e o pseudo-elemento nao e gerado. Sem o token, a mensagem aparece. As cores sao de sistema (Highlight/HighlightText) porque no caso de falha NAO EXISTE token - e a unica excecao a "toda cor sai de tokens.css", registrada no CONVENCOES.md. */ body::before { content: var(--aqua-surface, "aqua-ui: tokens.css nao foi carregado - o kit esta sem cor"); position: fixed; top: 0; left: 0; right: 0; z-index: 2147483647; padding: 8px 16px; font: 600 14px/1.4 system-ui, sans-serif; background: Highlight; color: HighlightText; } } @layer aqua.utilitario { /* Papeis de texto. .aqua-faint fixa o tamanho junto com a cor de proposito: text-faint so passa o piso em 24px+, entao o utilitario torna o uso pequeno impossivel em vez de proibido. */ .aqua-title { font-size: var(--aqua-fs-2xl); font-weight: 600; line-height: var(--aqua-lh-tight); letter-spacing: -0.01em; } .aqua-subtitle { font-size: var(--aqua-fs-xl); font-weight: 600; line-height: var(--aqua-lh-tight); letter-spacing: -0.01em; } .aqua-label { font-size: var(--aqua-fs-sm); font-weight: 500; color: var(--aqua-text-muted); } .aqua-muted { color: var(--aqua-text-muted); } .aqua-faint { color: var(--aqua-text-faint); font-size: var(--aqua-fs-2xl); } .aqua-mono { font-family: var(--aqua-font-mono); font-variant-numeric: tabular-nums; } /* Texto so para leitor de tela. O icon-button da 2b precisa dele. */ .aqua-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } /* ==== 01-vidro.css ==== */ /* 01-vidro.css - o material do sistema. Os NUMEROS moram no tokens.css (--aqua-vidro---*). Aqui eles sao compostos em background e backdrop-filter, uma vez, por modo. Componente le var(--aqua-vidro-N-bg) e var(--aqua-vidro-N-filtro) e nao sabe em que modo esta. O porque de cada numero: docs/vidro.md. */ @layer aqua.base { /* ---- browser: o padrao. backdrop-filter funciona, e o clamp de brilho e o que da pior caso calculavel. Sem classe na raiz, e este. ---------------- */ :root, .aqua-browser { /* O veu aqui e estetico (scrim de modal): o contraste do modo browser vem do clamp, nao do veu. So no nui-veu ele sustenta contraste. */ --aqua-veu-bg: rgb(var(--aqua-surface-rgb) / 40%); --aqua-vidro-1-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-browser-1-tint)); --aqua-vidro-2-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-browser-2-tint)); --aqua-vidro-3-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-browser-3-tint)); --aqua-vidro-1-filtro: blur(var(--aqua-vidro-browser-1-blur)) saturate(var(--aqua-vidro-browser-sat)) brightness(var(--aqua-vidro-browser-1-clamp)); --aqua-vidro-2-filtro: blur(var(--aqua-vidro-browser-2-blur)) saturate(var(--aqua-vidro-browser-sat)) brightness(var(--aqua-vidro-browser-2-clamp)); --aqua-vidro-3-filtro: blur(var(--aqua-vidro-browser-3-blur)) saturate(var(--aqua-vidro-browser-sat)) brightness(var(--aqua-vidro-browser-3-clamp)); /* Lei do Vidro (02-movimento, CONVENCOES §13): ao pressionar, o blur desce para press-blur. Composto AQUI, por modo, pelo mesmo motivo dos niveis: o componente nao decide se ha filtro. */ --aqua-press-filtro: blur(var(--aqua-press-blur)) saturate(var(--aqua-vidro-browser-sat)); } /* Sem backdrop-filter nao ha clamp, e sem clamp nao ha pior caso calculavel: sobra o tint, e ele sobe para 92%. Degrada legivel em vez de virar sopa. */ @supports not (backdrop-filter: blur(1px)) { :root, .aqua-browser { --aqua-vidro-1-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-browser-sem-suporte-tint)); --aqua-vidro-2-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-browser-sem-suporte-tint)); --aqua-vidro-3-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-browser-sem-suporte-tint)); --aqua-vidro-1-filtro: none; --aqua-vidro-2-filtro: none; --aqua-vidro-3-filtro: none; --aqua-press-filtro: none; } } /* ---- selecao e escolha: o vocabulario do ADR 0033 --------------------------- Ate 2026-09-22 tudo o que estava escolhido levava accent 10% de fundo, borda accent 45% e o canto da Gota; o dono leu esse contorno colorido como interface gerada. Passam a existir DUAS marcas, e nenhuma e accent: - SELECAO (posicao: nav, aba, pagina, linha, opcao): um degrau de superficie, sem borda, com o mesmo fio de luz e a mesma sombra curta do vidro-2, para ler como o mesmo material. - ESCOLHA (o que esta ligado: chip, toggle, caixa, dia): a pilula INVERTE, text por fundo e surface por texto. Um degrau de 11% nao diz "ligado" numa pilula de 26px; a inversao diz. Componente le daqui e nao repete os numeros. Fora de modo de proposito: selecao nao depende de haver filtro. ---------------------------------------- */ :root { --aqua-selecao-bg: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-selected)); --aqua-selecao-sombra: inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%), 0 1px 2px rgb(var(--aqua-black-rgb) / 20%); --aqua-escolha-bg: var(--aqua-text); --aqua-escolha-fg: var(--aqua-surface); } /* ---- nui-veu: menu de NUI que captura foco. O CEF m103 faz backdrop-filter piscar (citizenfx/fivem, issue 3843), entao NENHUM filtro; o determinismo vem do veu de 70%, que e obrigatorio - sem ele os numeros do modo nao valem. ---- */ .aqua-nui-veu { --aqua-veu-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-veu-veu)); --aqua-vidro-1-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-veu-1-tint)); --aqua-vidro-2-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-veu-2-tint)); --aqua-vidro-3-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-veu-3-tint)); --aqua-vidro-1-filtro: none; --aqua-vidro-2-filtro: none; --aqua-vidro-3-filtro: none; --aqua-press-filtro: none; } /* ---- nui-hud: overlay sobre o jogo cru, sem capturar foco. Um HUD nao pode escurecer a tela: sem veu, sem filtro, so o tint segura - e por isso ele comeca em 85%. -------------------------------------------------------- */ .aqua-nui-hud { --aqua-veu-bg: transparent; --aqua-vidro-1-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-hud-1-tint)); --aqua-vidro-2-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-hud-2-tint)); --aqua-vidro-3-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-hud-3-tint)); --aqua-vidro-1-filtro: none; --aqua-vidro-2-filtro: none; --aqua-vidro-3-filtro: none; --aqua-press-filtro: none; } /* ---- nui-vidro: a NUI com blur de verdade sobre o jogo (ADR 0042 do aquanuis). O backdrop-filter da NUI nao ve o jogo: cada NUI e um iframe transparente por cima dele. Quem desenha o blur e o aqua-vidro.js, num canvas, pelo game view da Cfx; aqui o filtro e none e o veu some. :root.aqua-nui-vidro, e nao so a classe, porque ela CONVIVE com aqua-nui-veu ou aqua-nui-hud, que a NUI continua trocando para dizer se ha foco: com mais especificidade o vidro ganha dos dois, e se o game view falhar o aqua-vidro.js tira a classe e a NUI volta ao modo dela, com o contraste medido. O texto branco e a borda moram no tokens.css, porque la estao os tokens que eles sobrepoem. -------------------------------------------- */ :root.aqua-nui-vidro { background: transparent; --aqua-veu-bg: transparent; --aqua-vidro-1-bg: rgb(var(--aqua-vidro-nui-vidro-tom-rgb) / var(--aqua-vidro-nui-vidro-1-tint)); --aqua-vidro-2-bg: rgb(var(--aqua-vidro-nui-vidro-tom-rgb) / var(--aqua-vidro-nui-vidro-2-tint)); --aqua-vidro-3-bg: rgb(var(--aqua-vidro-nui-vidro-tom-rgb) / var(--aqua-vidro-nui-vidro-3-tint)); --aqua-vidro-1-filtro: none; --aqua-vidro-2-filtro: none; --aqua-vidro-3-filtro: none; --aqua-press-filtro: none; } } @layer aqua.utilitario { /* ---- o material --------------------------------------------------------- Raio e do componente. Aqui so o que faz parecer vidro e nao opacity preguicoso: tint, filtro, borda assimetrica (a luz vem de cima: brilho de 1px por dentro, linha fina por fora) e, so em 2 e 3, sombra curta + longa. Nunca glow - requisito do dono. */ .aqua-vidro-1, .aqua-vidro-2, .aqua-vidro-3 { border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border)); box-shadow: inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%); } .aqua-vidro-1 { background: var(--aqua-vidro-1-bg); -webkit-backdrop-filter: var(--aqua-vidro-1-filtro); backdrop-filter: var(--aqua-vidro-1-filtro); } .aqua-vidro-2, .aqua-vidro-3 { box-shadow: inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%), 0 1px 2px rgb(var(--aqua-black-rgb) / 20%), 0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%); } .aqua-vidro-2 { background: var(--aqua-vidro-2-bg); -webkit-backdrop-filter: var(--aqua-vidro-2-filtro); backdrop-filter: var(--aqua-vidro-2-filtro); } .aqua-vidro-3 { background: var(--aqua-vidro-3-bg); -webkit-backdrop-filter: var(--aqua-vidro-3-filtro); backdrop-filter: var(--aqua-vidro-3-filtro); } /* ---- o veu ------------------------------------------------------------ Em nui-veu e OBRIGATORIO e e o primeiro filho do body. Em nui-hud nao existe, e a regra abaixo garante que um veu esquecido nao escureca um HUD. */ .aqua-veu { position: fixed; inset: 0; z-index: var(--aqua-z-veil); background: var(--aqua-veu-bg); pointer-events: none; } .aqua-nui-hud .aqua-veu { display: none; } /* ---- a caixa de vidro de verdade ------------------------------------- O aqua-vidro.js marca com data-aqua-vidro="1|2|3" cada caixa que ele borra atras, e so ela leva a aresta e a sombra do modo: botao, campo e linha de lista, que moram dentro dela, ficam com as do kit. */ :root.aqua-nui-vidro [data-aqua-vidro] { box-shadow: inset 0 1px 0 rgb(var(--aqua-white-rgb) / var(--aqua-vidro-nui-vidro-aresta)); } :root.aqua-nui-vidro [data-aqua-vidro="2"], :root.aqua-nui-vidro [data-aqua-vidro="3"] { box-shadow: inset 0 1px 0 rgb(var(--aqua-white-rgb) / var(--aqua-vidro-nui-vidro-aresta)), 0 1px 2px rgb(var(--aqua-black-rgb) / calc(var(--aqua-vidro-nui-vidro-sombra) * 20%)), 0 12px 32px -12px rgb(var(--aqua-black-rgb) / calc(var(--aqua-vidro-nui-vidro-sombra) * 40%)); } /* A caixa que flutua sobre OUTRA caixa (o menu, o popover, o tooltip, a paleta), marcada com data-aqua-vidro-sobre pelo aqua-vidro.js. Atras dela ha HTML, e o canvas nao alcanca HTML: ela borra pelo backdrop-filter, com a receita do modo browser e os numeros do nui-vidro. O filtro ve o jogo borrado porque o canvas mora dentro da pagina. O raio vem do mesmo degrau de desfoque, escrito na raiz pelo modulo. */ :root.aqua-nui-vidro [data-aqua-vidro-sobre="1"] { -webkit-backdrop-filter: blur(var(--aqua-vidro-sobre-blur, 12px)) saturate(var(--aqua-vidro-nui-vidro-sat)) brightness(var(--aqua-vidro-nui-vidro-1-clamp)); backdrop-filter: blur(var(--aqua-vidro-sobre-blur, 12px)) saturate(var(--aqua-vidro-nui-vidro-sat)) brightness(var(--aqua-vidro-nui-vidro-1-clamp)); } :root.aqua-nui-vidro [data-aqua-vidro-sobre="2"] { -webkit-backdrop-filter: blur(var(--aqua-vidro-sobre-blur, 12px)) saturate(var(--aqua-vidro-nui-vidro-sat)) brightness(var(--aqua-vidro-nui-vidro-2-clamp)); backdrop-filter: blur(var(--aqua-vidro-sobre-blur, 12px)) saturate(var(--aqua-vidro-nui-vidro-sat)) brightness(var(--aqua-vidro-nui-vidro-2-clamp)); } :root.aqua-nui-vidro [data-aqua-vidro-sobre="3"] { -webkit-backdrop-filter: blur(var(--aqua-vidro-sobre-blur, 12px)) saturate(var(--aqua-vidro-nui-vidro-sat)) brightness(var(--aqua-vidro-nui-vidro-3-clamp)); backdrop-filter: blur(var(--aqua-vidro-sobre-blur, 12px)) saturate(var(--aqua-vidro-nui-vidro-sat)) brightness(var(--aqua-vidro-nui-vidro-3-clamp)); } } /* ==== 02-movimento.css ==== */ /* 02-movimento.css - as quatro leis (docs/movimento.md) e as duas leis cineticas (CONVENCOES §13) em CSS. Keyframes fora de camada: nao cascateiam. Utilitarios em aqua.utilitario. O corte por prefers-reduced-motion fica em aqua.base COM !important: em camadas, !important inverte a ordem e a camada mais baixa vence, entao nada acima - nem o consumidor - consegue reanimar o que o usuario pediu para parar. */ /* Lei 4 - entrada: opacidade + escala 0.96 -> 1 + 8px de subida. */ @keyframes aqua-entrar { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } } /* Saida e o inverso, mais curta e menor: o olho nao acompanha o que vai embora. */ @keyframes aqua-sair { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(4px) scale(0.98); } } @keyframes aqua-veu-entrar { from { opacity: 0; } to { opacity: 1; } } @layer aqua.utilitario { /* transform-origin no GATILHO: quem abre o elemento escreve --aqua-origem inline a partir do botao que o chamou (Fase 4). Sem gatilho, abre do topo-centro - o caso do dropdown que desce. */ .aqua-entra { transform-origin: var(--aqua-origem, 50% 0%); animation: aqua-entrar var(--aqua-t-base) var(--aqua-ease-out) both; } .aqua-sai { transform-origin: var(--aqua-origem, 50% 0%); animation: aqua-sair var(--aqua-t-rapido) var(--aqua-ease-in-out) both; } /* O veu nao escala: so aparece. */ .aqua-veu.aqua-entra { animation-name: aqua-veu-entrar; } /* Leis 1 e 2 - press e hover, para clicavel que nao e componente do kit (card-link, linha de tabela, item avulso). Componente do kit repete estas declaracoes no proprio bloco: CSS sem pre-processador nao tem @extend, e o CONVENCOES.md publica o bloco para copiar. */ .aqua-clicavel { cursor: pointer; transition: transform var(--aqua-t-toque) var(--aqua-ease-out), background-color var(--aqua-t-rapido) var(--aqua-ease-out), border-color var(--aqua-t-rapido) var(--aqua-ease-out), color var(--aqua-t-rapido) var(--aqua-ease-out); } /* Lei 2 - nunca so cor: o micro-deslocamento e o que o cerebro le como fisico. */ .aqua-clicavel:hover { transform: translateY(-1px); } /* Lei 1 - press. Icone vai a 0.90, mas isso e do aqua-icon-btn (2b). */ .aqua-clicavel:active { transform: scale(0.97); } /* Desabilitado: opacidade e permitida AQUI e so aqui - WCAG isenta controle inativo. Sem hover, sem press. pointer-events fica, para title funcionar. */ .aqua-clicavel:disabled, .aqua-clicavel[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; } /* Selecionado, quando o clicavel tem estado: accent a 10% de fundo e 45% de borda - o padrao que a pagina de prova da Fase 1 fixou. */ .aqua-clicavel[aria-pressed="true"], .aqua-clicavel[aria-selected="true"], .aqua-clicavel[aria-current] { color: var(--aqua-text); background-color: var(--aqua-selecao-bg); box-shadow: var(--aqua-selecao-sombra); border-color: transparent; } } @layer aqua.base { /* Sem excecao, sem "mas esta e sutil". A pessoa que ligou isto nao pediu menos movimento; pediu nenhum. Duracao quase-zero em vez de none para os eventos animationend/transitionend continuarem disparando. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } } /* --- Lei da Gota --------------------------------------------------------- O canto afiado percorre os quatro cantos, e a massa inclina atras dele. Nao e rotacao: nada gira como roda, e cada quadro e uma silhueta diferente. O deslocamento e transform (composto em GPU); o canto e border-radius, que repinta - por isso a lei vale para elemento pequeno, e a Task 15 mede o custo num painel grande antes de a Fase 4 usar em superficie maior. */ @keyframes aqua-gota-percorre { 0% { border-radius: var(--aqua-gota-bl); transform: translate(-1px, 1px); } 25% { border-radius: var(--aqua-gota-tl); transform: translate(-1px, -1px); } 50% { border-radius: var(--aqua-gota-tr); transform: translate( 1px, -1px); } 75% { border-radius: var(--aqua-gota-br); transform: translate( 1px, 1px); } 100% { border-radius: var(--aqua-gota-bl); transform: translate(-1px, 1px); } } /* Condensa: de pilula a Gota e de volta. E o vocabulario do esqueleto e de qualquer coisa que espera no lugar, sem varrer. */ @keyframes aqua-gota-condensa { 0%, 100% { border-radius: var(--aqua-radius-full); opacity: 1; } 50% { border-radius: var(--aqua-gota-bl); opacity: 0.62; } } /* Respira: so opacidade, sem mudar de forma. E a espera de superficie GRANDE (esqueleto de card, painel), onde a Gota ainda nao pode ser usada porque o border-radius interpolado repinta e o custo no CEF nao foi medido. Mesma amplitude e mesmo tempo da condensa, para as duas esperarem em fase. */ @keyframes aqua-respirar { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } } @layer aqua.utilitario { /* ---- o anel desenhado (usado pelo aqua-tour) ------------------------------- Um svg em tela cheia, fora do ponteiro, acima de tudo. O traco nasce no canto afiado da Gota - o inferior-esquerdo - e percorre o contorno do alvo em t-lento; ao sair, corre PARA A FRENTE e some, entao a linha vai embora em vez de apagar. E a Lei da Gota aplicada ao aqua-tour (§13): a assinatura entra desenhando. pathLength=100 no path normaliza o contorno, entao o mesmo dasharray serve para um botao de 80px e para um campo de 420px, e a velocidade de desenho e a mesma nos dois. A espessura e 1.25 e a folga do contorno e 3px (o tour passa space-1), decididos pelo dono em 2026-09-15 ("um pouco mais fino, minimalista e moderno"). A folga mora no contornoAnel do aqua-ui.js. prefers-reduced-motion corta a transicao pela base, e o traco simplesmente aparece inteiro - continua sendo um anel visivel. Ate 2026-09-29 este bloco tambem era a lei 3 do movimento (foco e anel, nunca glow): todo controle, e os dez campos compostos (search, number-input, file-picker, markdown-editor, prompt-box, tag-input, password-input, duration-input, console), desenhava este traco ao focar. Retirado por decisao do dono - ver 00-base.css. O que sobra aqui e so o que o aqua-tour ainda usa: a classe, o path e as transicoes de entrada e saida. */ .aqua-anel { position: fixed; inset: 0; z-index: var(--aqua-z-toast); overflow: visible; pointer-events: none; } .aqua-anel path { fill: none; stroke: var(--aqua-accent); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; } .aqua-anel[data-aqua-anel-estado="entra"] path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--aqua-t-lento) var(--aqua-ease-out); } /* A saida termina ESCONDIDA, e nao so fora do contorno (1.32, 2026-09-16). Em dashoffset -100 o traco nao some por inteiro: o contorno e fechado, a ponta que saiu e o ponto onde ele nasceu sao o mesmo lugar, e ali sobrava um resto do accent, 3px fora do canto inferior esquerdo, ate o proximo foco. Nao era so a ponta redonda: com ponta reta o resto encolhe e nao some, entao ele tem comprimento. visibility com DURACAO, nao com atraso: entre visible e hidden o valor interpolado e visible durante a transicao inteira e so vira hidden no fim, entao a saida corre completa e o traco some no ultimo quadro. As duas duracoes sao o mesmo token, e o corte de prefers-reduced-motion da base encurta as duas juntas: sem movimento, o traco some na hora. Atraso nao serviria, porque a base corta a duracao e nao o atraso, e o resto ficaria t-base na tela de quem pediu nenhum movimento. Nada aqui depende de transitionend nem de relogio, que param com a aba em segundo plano. Um foco novo durante a saida passa pelo estado sem atributo, que e visible e sem transicao, antes do entra. Empurrar o dashoffset alem de -100 tambem apaga o resto, e foi medido, mas a folga teria de cobrir a diferenca entre o comprimento que o navegador usa para o pathLength e o que o traco percorre de fato, que o kit nao controla. */ .aqua-anel[data-aqua-anel-estado="sai"] path { stroke-dashoffset: -100; visibility: hidden; transition: stroke-dashoffset var(--aqua-t-base) var(--aqua-ease-in-out), visibility var(--aqua-t-base) step-end; } /* A espera do sistema. Substitui o anel girando, que era o spinner do Bootstrap. Duracao em multiplo de t-lento para a escala de tempo continuar sendo a do sistema, e ease-in-out porque o movimento e continuo - ease-out e para reagir, nao para repetir. */ .aqua-espera { display: inline-block; flex: none; width: var(--aqua-space-4); height: var(--aqua-space-4); background-color: var(--aqua-accent); animation: aqua-gota-percorre calc(var(--aqua-t-lento) * 4) var(--aqua-ease-in-out) infinite; } /* Lei do Vidro - pressao adensa em vez de escurecer. So faz sentido sobre superficie de vidro; em fundo solido o adensamento nao tem o que compor. O canto fecha junto: e a Gota reagindo ao toque. O filtro e --aqua-press-filtro, composto por modo no 01-vidro.css: em nui-veu e nui-hud ele e none, porque backdrop-filter pisca no CEF, e o componente nao decide isso. */ .aqua-adensa { transition: background-color var(--aqua-t-toque) var(--aqua-ease-out), backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out), border-radius var(--aqua-t-toque) var(--aqua-ease-out); } .aqua-adensa:active { background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint)); -webkit-backdrop-filter: var(--aqua-press-filtro); backdrop-filter: var(--aqua-press-filtro); border-radius: var(--aqua-radius-btn-fechado); } } /* ==== 10-button.css ==== */ /* 10-button.css - aqua-btn. A acao. Gota: em repouso, radius-btn. O botao e o unico lugar em que a Gota fica PARADA, e o dono aprovou esse detalhe explicitamente (2026-09-03): a marca em repouso e o botao; em movimento e a espera. Ao toque o canto fecha (gota-fechado) e a superficie adensa (Lei do Vidro, CONVENCOES §13). Esperando (--loading), O BOTAO anda: aqua-gota-percorre no proprio elemento, sem spinner dentro. O rotulo diz o que esta acontecendo; a forma diz que esta vivo. Decisoes, para ninguem "corrigir": - press em fundo alfa (neutro, ghost): tint sobe para press-tint e o blur vem de --aqua-press-filtro, que o 01-vidro.css compoe por modo. Em fundo solido (primary, danger) nao ha vidro para adensar: brightness(0.96) e o canto fechando. - as quatro leis do §7 continuam: hover e cor mais 1px de subida, press e scale(0.97) escrito por inteiro (translateY junto, senao o hover some no toque), foco e o anel da base. A Lei do Vidro soma brightness(1.06) ao foco e ao selecionado. - --loading corta o ponteiro: botao que espera nao recebe hover nem clique, e o segundo clique do jogador impaciente nao dispara a compra duas vezes. - cor solida so em primary e danger: on-accent sobre accent 8.07, surface sobre danger 6.56 (docs/contraste.md). - tambem: text-decoration none no repouso E no hover, porque a base sublinha todo link (00-base.css). Sem isto, todo botao escrito como (o "Comprar" da capsula, o "Central" do header do site, os gestos das telas da central) sublinhava ao passar o rato, e um botao sublinhado parece link quebrado. O aqua-fab e o aqua-brand-cta ja faziam isto desde 2026-09-03, e o aqua-btn tinha ficado de fora; medido e corrigido em 2026-09-22, por recusa do dono. */ @layer aqua.componente { .aqua-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--aqua-space-2); padding: var(--aqua-space-2) var(--aqua-space-4); border: 1px solid transparent; border-radius: var(--aqua-radius-btn); background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest)); color: var(--aqua-text); font-size: var(--aqua-fs-md); font-weight: 500; line-height: var(--aqua-lh-base); white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--aqua-t-toque) var(--aqua-ease-out), border-radius var(--aqua-t-toque) var(--aqua-ease-out), backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out), background-color var(--aqua-t-rapido) var(--aqua-ease-out), border-color var(--aqua-t-rapido) var(--aqua-ease-out), color var(--aqua-t-rapido) var(--aqua-ease-out), filter var(--aqua-t-rapido) var(--aqua-ease-out); } /* ---- os cinco estados, mais o selecionado ------------------------------------ */ .aqua-btn:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); transform: translateY(-1px); text-decoration: none; } .aqua-btn:focus-visible { filter: brightness(1.06); } .aqua-btn:active { transform: translateY(-1px) scale(0.97); border-radius: var(--aqua-radius-btn-fechado); background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint)); -webkit-backdrop-filter: var(--aqua-press-filtro); backdrop-filter: var(--aqua-press-filtro); } .aqua-btn:disabled, .aqua-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; } /* Selecionado (botao de alternancia): o par com :hover impede o hover de repouso de vencer o selecionado sob o ponteiro. A Gota ja esta aqui; o que o §13 acrescenta e o brilho. */ .aqua-btn[aria-pressed="true"], .aqua-btn[aria-pressed="true"]:hover { color: var(--aqua-escolha-fg); background-color: var(--aqua-escolha-bg); border-color: transparent; } .aqua-btn[aria-pressed="true"]:hover { filter: brightness(0.94); } .aqua-btn[aria-pressed="true"]:active { background-color: var(--aqua-escolha-bg); filter: brightness(0.88); backdrop-filter: none; -webkit-backdrop-filter: none; } .aqua-btn[aria-pressed="true"] .aqua-btn__icon { color: var(--aqua-escolha-fg); } /* ---- tom ------------------------------------------------------------------ */ .aqua-btn--danger { border-color: transparent; background-color: var(--aqua-danger); color: var(--aqua-surface); } .aqua-btn--ghost { border-color: transparent; background-color: transparent; } /* ---- o primario e o CRISTAL (ADR 0033, 2026-09-22) --------------------------- Escolhido pelo dono entre doze candidatos, no navegador. Vidro em tres camadas sobre surface-overlay (o 800), texto e icone BRANCOS, quatro sombras internas que fazem a espessura, e uma luz accent que segue o ponteiro (010-button.js). - Branco sobre o accent claro mede 2.25 e reprova; sobre o 800 mede 10.69. O accent entra como LUZ, nunca como fundo de texto. - SEM backdrop-filter: o fundo e opaco, entao nao havia o que desfocar, e na NUI o CEF m103 faz o filtro piscar (01-vidro.css). - A luz e um elemento de tamanho fixo que anda por TRANSFORM: mover o "at X Y" de um gradiente repinta o botao a cada evento; mover o elemento nao. Promovido a camada so enquanto ha ponteiro em cima. - Num HUD nao ha ponteiro: a luz fica parada no canto superior esquerdo, e e a degradacao desejada. */ .aqua-btn--primary { position: relative; isolation: isolate; overflow: hidden; border-color: transparent; background-color: var(--aqua-surface-overlay); background-image: linear-gradient(180deg, rgb(var(--aqua-white-rgb) / 6%), rgb(var(--aqua-white-rgb) / 0%)); color: var(--aqua-white); font-weight: 600; box-shadow: inset 0 1px 0 rgb(var(--aqua-white-rgb) / 30%), inset 0 -1px 0 rgb(var(--aqua-surface-rgb) / 40%), inset 1px 0 0 rgb(var(--aqua-white-rgb) / 8%), 0 10px 30px -10px rgb(var(--aqua-surface-rgb) / 90%); transition: transform var(--aqua-t-toque) var(--aqua-ease-out), border-radius var(--aqua-t-toque) var(--aqua-ease-out), box-shadow var(--aqua-t-rapido) var(--aqua-ease-out), filter var(--aqua-t-rapido) var(--aqua-ease-out); } .aqua-btn--primary .aqua-btn__icon { color: var(--aqua-white); } .aqua-btn--primary::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: calc(var(--aqua-space-12) * 4); height: calc(var(--aqua-space-12) * 4); margin: calc(var(--aqua-space-12) * -2) 0 0 calc(var(--aqua-space-12) * -2); background: radial-gradient(closest-side circle, rgb(var(--aqua-accent-rgb) / 55%), transparent); transform: translate(var(--aqua-btn-luz-x, var(--aqua-space-12)), var(--aqua-btn-luz-y, var(--aqua-space-2))); opacity: 0.55; pointer-events: none; transition: opacity var(--aqua-t-rapido) var(--aqua-ease-out); } .aqua-btn--primary:hover { background-color: var(--aqua-surface-overlay); filter: none; box-shadow: inset 0 1px 0 rgb(var(--aqua-white-rgb) / 40%), inset 0 -1px 0 rgb(var(--aqua-surface-rgb) / 40%), inset 1px 0 0 rgb(var(--aqua-white-rgb) / 10%), 0 14px 34px -10px rgb(var(--aqua-accent-rgb) / 40%); } .aqua-btn--primary:hover::before { opacity: 1; will-change: transform; } .aqua-btn--primary:active { background-color: var(--aqua-surface-overlay); filter: brightness(0.9); -webkit-backdrop-filter: none; backdrop-filter: none; } /* ---- na NUI o primario e a ASSINATURA, nao o Cristal (ADR 0056, 2026-09-30) ---- Lei do dono, na AN-33: "deixar o botao primario das NUIs mais simples, sem efeitos". Ele escolheu no navegador, entre seis candidatos, e esclareceu o alcance: na web o Cristal fica, porque ali ele e interessante; e no jogo que nao. Entao sao DOIS primarios, de proposito, e a divisao e por AMBIENTE. O seletor e o modo de vidro do CONVENCOES §6, e nao :root: a classe tambem vale numa subarvore, e uma NUI que alterna troca-a no SetNuiFocus. Toda NUI tem um dos dois - a pergunta que os separa e "captura foco?", e nao ha terceira resposta. O aqua-nui-vidro NAO serve aqui: o modulo tira-o quando nao ha game view, e o botao mudaria de desenho sozinho. Cor: accent de fundo, on-accent de texto. Nao e cor nova - e exatamente o que o aqua-fab e o aqua-split-button--primary ja faziam, e o Cristal era o unico dos tres fora do padrao. Na NUI os tres passam a ler igual. Decisoes, para ninguem "corrigir": - branco NAO entra: sobre o accent ele mede 2.25 e reprova o piso. O texto escuro mede 7.95. Foi a troca que o dono aceitou ao escolher (ADR 0036 §4 tinha pedido texto branco, e esta parte dele deixa de valer na NUI). - sem gradiente, sem pilha de sombra e sem a luz do ponteiro: e o "sem efeitos" do pedido. O ::before sai por content, e nao por opacity, para nao restar elemento a compor. - o que FICA e o gesto: hover clareia e sobe 1px, toque afunda em scale(0.97) e fecha o canto. A lei do dono de 2026-09-22 continua - o clique tem de ser satisfatorio - e "sem efeitos" nunca quis dizer parado. - o border-radius do toque nao se redeclara: vem do .aqua-btn:active, que o compoe a partir do raio de repouso (ADR 0036 §3). Valor fixo aqui e o erro que aquele ADR descreve. - o 010-button.js tambem tem de saber disto, e sabe: sem a guarda de la, a NUI continuaria a escrever duas propriedades por quadro para uma luz que ja nao existe. */ :is(.aqua-nui-veu,.aqua-nui-hud) .aqua-btn--primary { border-color: transparent; background-color: var(--aqua-accent); background-image: none; color: var(--aqua-on-accent); box-shadow: none; transition: transform var(--aqua-t-toque) var(--aqua-ease-out), border-radius var(--aqua-t-toque) var(--aqua-ease-out), background-color var(--aqua-t-rapido) var(--aqua-ease-out), color var(--aqua-t-rapido) var(--aqua-ease-out), filter var(--aqua-t-rapido) var(--aqua-ease-out); } :is(.aqua-nui-veu,.aqua-nui-hud) .aqua-btn--primary::before { content: none; } :is(.aqua-nui-veu,.aqua-nui-hud) .aqua-btn--primary .aqua-btn__icon { color: var(--aqua-on-accent); } :is(.aqua-nui-veu,.aqua-nui-hud) .aqua-btn--primary:hover { background-color: var(--aqua-accent); transform: translateY(-1px); filter: brightness(1.08); box-shadow: none; } :is(.aqua-nui-veu,.aqua-nui-hud) .aqua-btn--primary:active { background-color: var(--aqua-accent); transform: translateY(-1px) scale(0.97); filter: brightness(0.94); -webkit-backdrop-filter: none; backdrop-filter: none; } /* Fundo solido nao troca de cor no hover (nao ha color-mix no m103): clareia. E nao adensa no press: escurece um degrau e fecha o canto. */ .aqua-btn--danger:hover { background-color: var(--aqua-danger); filter: brightness(1.08); } .aqua-btn--danger:active { background-color: var(--aqua-danger); filter: brightness(0.96); -webkit-backdrop-filter: none; backdrop-filter: none; } /* ---- tamanho e forma ---------------------------------------------------------- */ .aqua-btn--sm { padding: var(--aqua-space-1) var(--aqua-space-3); font-size: var(--aqua-fs-sm); } .aqua-btn--lg { padding: var(--aqua-space-3) var(--aqua-space-6); font-size: var(--aqua-fs-lg); } .aqua-btn--block { display: flex; width: 100%; } .aqua-btn__icon { flex: none; width: 1.15em; height: 1.15em; } /* ---- espera: o botao anda ----------------------------------------------------- */ /* A animacao escreve transform e border-radius, entao hover e press nao competem; o pointer-events corta o resto. Duracao em multiplo de t-lento, ease-in-out porque e loop (CONVENCOES §13). */ .aqua-btn--loading { cursor: progress; pointer-events: none; animation: aqua-gota-percorre calc(var(--aqua-t-lento) * 4) var(--aqua-ease-in-out) infinite; } } /* ==== 11-icon-button.css ==== */ /* 11-icon-button.css - aqua-icon-btn. Botao so de icone. Exige aria-label. Gota: nenhuma em repouso - radius-sm, porque a Gota parada e so do aqua-btn (§5). O que ele recebe do §13 e a Lei do Vidro: ao toque adensa e o canto FECHA em gota-fechado, entao por um instante a assinatura aparece onde nao estava. E o unico momento em que o icon-button cita a Gota, e e por isso que se le como parte da mesma familia sem repetir o botao. Decisoes: - o icone e um host data-aqua-icon (Task 4), ou um / solto para quem nao carrega o pack; os tres seletores medem igual. - o icone acompanha a escala de tipo (fs-lg, fs-xl, fs-2xl) em vez de ter escala propria - a mesma decisao do 20-icon.css. - press vai a 0.90, nao 0.97: 3% de um alvo de 36px e invisivel (lei 1). - press em fundo alfa adensa (press-tint, --aqua-press-filtro por modo). Nao ha tom solido aqui: icon-button primario nao existe, e nao vai existir - acao primaria tem rotulo. */ @layer aqua.componente { .aqua-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: var(--aqua-space-2); border: 1px solid transparent; border-radius: var(--aqua-radius-xs); background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest)); color: var(--aqua-text-muted); line-height: 0; text-decoration: none; cursor: pointer; transition: transform var(--aqua-t-toque) var(--aqua-ease-out), border-radius var(--aqua-t-toque) var(--aqua-ease-out), backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out), background-color var(--aqua-t-rapido) var(--aqua-ease-out), border-color var(--aqua-t-rapido) var(--aqua-ease-out), color var(--aqua-t-rapido) var(--aqua-ease-out), filter var(--aqua-t-rapido) var(--aqua-ease-out); } .aqua-icon-btn > [data-aqua-icon], .aqua-icon-btn > svg, .aqua-icon-btn > img { width: var(--aqua-fs-xl); height: var(--aqua-fs-xl); } /* ---- os cinco estados, mais o selecionado ------------------------------------ */ .aqua-icon-btn:hover { color: var(--aqua-text); background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); transform: translateY(-1px); text-decoration: none; } .aqua-icon-btn:focus-visible { filter: brightness(1.06); } .aqua-icon-btn:active { transform: translateY(-1px) scale(0.90); border-radius: var(--aqua-radius-btn-fechado); background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint)); -webkit-backdrop-filter: var(--aqua-press-filtro); backdrop-filter: var(--aqua-press-filtro); } .aqua-icon-btn:disabled, .aqua-icon-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; } .aqua-icon-btn[aria-pressed="true"], .aqua-icon-btn[aria-pressed="true"]:hover { color: var(--aqua-escolha-fg); background-color: var(--aqua-escolha-bg); border-color: transparent; } .aqua-icon-btn[aria-pressed="true"]:hover { filter: brightness(0.94); } .aqua-icon-btn[aria-pressed="true"]:active { background-color: var(--aqua-escolha-bg); filter: brightness(0.88); backdrop-filter: none; -webkit-backdrop-filter: none; } /* ---- forma e tamanho ---------------------------------------------------------- */ .aqua-icon-btn--ghost { border-color: transparent; background-color: transparent; } .aqua-icon-btn--round { border-radius: var(--aqua-radius-full); } /* Redondo fecha o canto do mesmo jeito: a Gota e o que o toque revela. */ .aqua-icon-btn--round:active { border-radius: var(--aqua-radius-btn-fechado); } .aqua-icon-btn--sm { padding: var(--aqua-space-1); } .aqua-icon-btn--sm > [data-aqua-icon], .aqua-icon-btn--sm > svg, .aqua-icon-btn--sm > img { width: var(--aqua-fs-lg); height: var(--aqua-fs-lg); } .aqua-icon-btn--lg { padding: var(--aqua-space-3); } .aqua-icon-btn--lg > [data-aqua-icon], .aqua-icon-btn--lg > svg, .aqua-icon-btn--lg > img { width: var(--aqua-fs-2xl); height: var(--aqua-fs-2xl); } } /* ==== 12-chip.css ==== */ /* 12-chip.css - aqua-chip. Rotulo curto: categoria, filtro ativo, tag. Gota: a SELECAO. Em repouso o chip e radius-xs, sem assinatura nenhuma. O chip selecionado (aria-pressed) e o unico do grupo com o canto da Gota: a assinatura migra com a escolha, e o olho acha o filtro ativo pela forma antes de achar pela cor. border-radius transiciona em t-base, entao a migracao e VISTA, nao trocada - o canto se fecha num chip enquanto abre no outro. E a expressao "selecao" do CONVENCOES §13. Decisoes: - o ELEMENTO diz o papel: e rotulo estatico, sem hover;