/* ============================================================================ NULLAIN THEME — v2.0 · CSS3 vanilla (sem Tailwind, sem build step) Punk Minimal Brutalist · Ecossistema Nullysh & Nullain · Netty (Netty Linux) DESTINO: web/static/css/nullain-theme.css CAMADA: tokens + primitivas. Componentes da aplicação vivem em app.css. TEMA: — escrito por script inline no antes da primeira pintura (sem FOUC). Um tema = 5 sementes (--nl-seed-*). Todo o resto é derivado. O tema personalizado escreve as mesmas sementes inline no . REGRAS DE OURO 1. Nenhum valor de cor cru fora do bloco de tokens/sementes. 2. Sombra é dura (blur 0). A única exceção é overlay realmente flutuante. 3. Um acento só por tema. Ele nunca vira texto sobre o próprio fundo. 4. Chrome da UI é lowercase; conteúdo do usuário preserva a caixa original. ============================================================================ */ /* ========================================================================== 1. TOKENS ========================================================================== */ :root { /* Fontes */ --nl-font-display: "Space Grotesk", "Inter Tight", system-ui, sans-serif; --nl-font-sans: "Inter", "Space Grotesk", system-ui, sans-serif; --nl-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --nl-font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; /* Rampa de tinta */ --nl-ink-000: #FFFFFF; --nl-ink-050: #FAFAFA; --nl-ink-100: #F2F2F2; --nl-ink-200: #E5E5E5; --nl-ink-300: #CCCCCC; --nl-ink-400: #A3A3A3; --nl-ink-500: #737373; --nl-ink-600: #525252; --nl-ink-700: #333333; --nl-ink-800: #1A1A1A; --nl-ink-900: #000000; /* Electric Lime — acento único da marca */ --nl-lime-050: #FBFEE9; --nl-lime-100: #F4FBC0; --nl-lime-200: #E9F78A; --nl-lime-300: #DDEF4E; --nl-lime-400: #CDE41E; --nl-lime-500: #B3C813; --nl-lime-600: #8A9C0E; --nl-lime-700: #63700A; /* Semânticos: base = fill/borda · soft = fundo · ink = texto sobre o soft */ --nl-success: #1FA85E; --nl-success-soft: #E4F6EC; --nl-success-ink: #0E6B3B; --nl-warning: #E8A21C; --nl-warning-soft: #FDF3DF; --nl-warning-ink: #7A5305; --nl-danger: #E5372B; --nl-danger-soft: #FCE8E6; --nl-danger-ink: #B02318; --nl-info: #2B6FE5; --nl-info-soft: #E6EFFC; --nl-info-ink: #1B4FA8; /* Raio */ --nl-r-xs: 4px; --nl-r-sm: 8px; --nl-r-md: 12px; --nl-r-lg: 16px; --nl-r-xl: 24px; --nl-r-2xl: 32px; --nl-r-pill: 999px; /* Borda */ --nl-b-hair: 1px; --nl-b-base: 1.5px; --nl-b-bold: 2px; --nl-b-brut: 3px; /* Movimento */ --nl-ease: cubic-bezier(.2, .9, .2, 1); --nl-dur-fast: 120ms; --nl-dur-base: 200ms; --nl-dur-slow: 360ms; /* Espaço (base 4px) */ --nl-s1: 4px; --nl-s2: 8px; --nl-s3: 12px; --nl-s4: 16px; --nl-s5: 20px; --nl-s6: 24px; --nl-s8: 32px; --nl-s10: 40px; --nl-s14: 56px; --nl-s18: 72px; /* Métricas do shell */ --nl-col: 780px; /* coluna de leitura: chat, empty state, composer */ --nl-sidebar-w: 272px; --nl-rail-w: 60px; --nl-header-h: 64px; --nl-tap: 40px; /* alvo de toque mínimo */ /* ---- SEMENTES DO TEMA ---------------------------------------------- Um tema é definido por CINCO sementes. Todo o resto é derivado abaixo, então adicionar um tema novo custa 5 linhas e não pode sair do sistema. O tema personalizado do usuário escreve estas mesmas variáveis inline no — mesmo contrato, mesma derivação. */ --nl-seed-bg: #FFFFFF; /* fundo da página */ --nl-seed-fg: #000000; /* tinta principal */ --nl-seed-accent: #CDE41E; /* ação primária */ --nl-seed-accent-ink: #000000; /* tinta SOBRE o acento */ --nl-seed-code: #0D0D0D; /* superfície de código */ } /* ========================================================================== 1.1 DERIVAÇÃO — vale para TODOS os temas, inclusive o personalizado Nenhum tema redefine estes valores; eles saem sempre das sementes. ========================================================================== */ :root, [data-theme] { --nl-bg: var(--nl-seed-bg); --nl-bg-subtle: color-mix(in srgb, var(--nl-seed-bg) 96%, var(--nl-seed-fg)); --nl-bg-muted: color-mix(in srgb, var(--nl-seed-bg) 90%, var(--nl-seed-fg)); --nl-bg-inverse: var(--nl-seed-fg); --nl-bg-accent: var(--nl-seed-accent); --nl-accent-hover: color-mix(in srgb, var(--nl-seed-accent) 78%, var(--nl-seed-bg)); --nl-fg: var(--nl-seed-fg); --nl-fg-2: color-mix(in srgb, var(--nl-seed-fg) 76%, var(--nl-seed-bg)); --nl-fg-muted: color-mix(in srgb, var(--nl-seed-fg) 60%, var(--nl-seed-bg)); --nl-fg-disabled: color-mix(in srgb, var(--nl-seed-fg) 40%, var(--nl-seed-bg)); --nl-fg-inverse: var(--nl-seed-bg); --nl-fg-on-accent: var(--nl-seed-accent-ink); /* Texto secundário SOBRE superfície invertida (bolha do usuário, item ativo, item de menu em hover). Uma fórmula só, sem par claro/escuro. */ --nl-fg-2-on-inverse: color-mix(in srgb, var(--nl-seed-bg) 70%, var(--nl-seed-fg)); --nl-border: var(--nl-seed-fg); --nl-border-soft: color-mix(in srgb, var(--nl-seed-bg) 84%, var(--nl-seed-fg)); --nl-code-bg: var(--nl-seed-code); --nl-code-fg: color-mix(in srgb, var(--nl-seed-code) 12%, #FFFFFF); --nl-code-fg-2: color-mix(in srgb, var(--nl-seed-code) 42%, #FFFFFF); --nl-code-line: color-mix(in srgb, var(--nl-seed-code) 78%, #FFFFFF); --nl-focus: var(--nl-seed-accent); --nl-focus-ring: color-mix(in srgb, var(--nl-seed-accent) 45%, var(--nl-seed-bg)); /* Sombra dura — blur SEMPRE 0, na tinta do tema */ --nl-sh-xs: 2px 2px 0 0 var(--nl-seed-fg); --nl-sh-sm: 3px 3px 0 0 var(--nl-seed-fg); --nl-sh-md: 5px 5px 0 0 var(--nl-seed-fg); --nl-sh-lg: 8px 8px 0 0 var(--nl-seed-fg); /* Única sombra com blur permitida: overlay realmente flutuante */ --nl-sh-float: 0 24px 48px -12px rgba(0, 0, 0, .28); --nl-scrim: rgba(0, 0, 0, .58); } /* Esquemas escuros ajustam só o que depende de "o fundo é escuro?" — nunca a identidade do tema. O atributo é escrito pelo JS (e pelo script inline do ) a partir da luminância do fundo. */ :root, [data-scheme="light"] { color-scheme: light; } [data-scheme="dark"] { color-scheme: dark; --nl-sh-float: 0 24px 48px -12px rgba(0, 0, 0, .6); --nl-scrim: rgba(0, 0, 0, .74); --nl-success-soft: #0C2A1B; --nl-success-ink: #6EE7A8; --nl-warning-soft: #2E2205; --nl-warning-ink: #F5CE72; --nl-danger-soft: #2E0C09; --nl-danger-ink: #FF9A90; --nl-info-soft: #0B1B33; --nl-info-ink: #93B8F5; } /* ========================================================================== 1.2 TEMAS — cada um é só um jogo de sementes ========================================================================== */ /* claro · o padrão da marca */ [data-theme="claro"] { --nl-seed-bg: #FFFFFF; --nl-seed-fg: #000000; --nl-seed-accent: #CDE41E; --nl-seed-accent-ink: #000000; --nl-seed-code: #0D0D0D; } /* papel · off-white quente, tinta sépia, acento terracota */ [data-theme="papel"] { --nl-seed-bg: #FAF6EE; --nl-seed-fg: #1F1A14; --nl-seed-accent: #E2643B; --nl-seed-accent-ink: #FFFFFF; --nl-seed-code: #211C15; } /* menta · fundo frio claro, acento verde */ [data-theme="menta"] { --nl-seed-bg: #F1F7F4; --nl-seed-fg: #0B1F17; --nl-seed-accent: #0F9D6E; --nl-seed-accent-ink: #FFFFFF; --nl-seed-code: #0C1D17; } /* cobalto · fundo claro azulado, acento azul forte */ [data-theme="cobalto"] { --nl-seed-bg: #F4F6FB; --nl-seed-fg: #0F1626; --nl-seed-accent: #2B5BE5; --nl-seed-accent-ink: #FFFFFF; --nl-seed-code: #101728; } /* noite · preto puro, acento lime (o inverso do claro) */ [data-theme="noite"] { --nl-seed-bg: #000000; --nl-seed-fg: #FFFFFF; --nl-seed-accent: #CDE41E; --nl-seed-accent-ink: #000000; --nl-seed-code: #1A1A1A; } /* carvão · escuro quente, acento âmbar */ [data-theme="carvao"] { --nl-seed-bg: #17130E; --nl-seed-fg: #F7F1E6; --nl-seed-accent: #F0A93C; --nl-seed-accent-ink: #17130E; --nl-seed-code: #241D15; } /* oceano · escuro azulado, acento ciano */ [data-theme="oceano"] { --nl-seed-bg: #08131F; --nl-seed-fg: #E6F1FA; --nl-seed-accent: #38BDF8; --nl-seed-accent-ink: #04121D; --nl-seed-code: #0E2032; } /* ========================================================================== 2. BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--nl-bg); color: var(--nl-fg); font-family: var(--nl-font-sans); font-size: 16px; line-height: 1.6; } h1, h2, h3, h4, .nl-display { margin: 0; font-family: var(--nl-font-display); text-transform: lowercase; font-weight: 700; letter-spacing: -.035em; line-height: .92; text-wrap: balance; } button, input, textarea, select { font: inherit; color: inherit; } img, svg, video { max-width: 100%; } /* --- Seleção de texto --------------------------------------------------- Regra global: lime com tinta preta. Superfícies invertidas e superfícies lime recebem tratamento próprio para nunca cair em baixo contraste. */ ::selection { background: var(--nl-bg-accent); color: var(--nl-fg-on-accent); } .nl-on-inverse ::selection, .nl-on-inverse::selection { background: var(--nl-fg-inverse); color: var(--nl-bg-inverse); } .nl-on-accent ::selection, .nl-on-accent::selection { background: var(--nl-bg-inverse); color: var(--nl-fg-inverse); } /* Cursor de texto visível nos dois temas */ input, textarea, [contenteditable] { caret-color: var(--nl-fg); } /* --- Foco --------------------------------------------------------------- Um anel só, em todo o produto. Nada de outline colorido ad-hoc. */ :focus-visible { outline: var(--nl-b-brut) solid var(--nl-focus); outline-offset: 2px; border-radius: var(--nl-r-xs); } :focus:not(:focus-visible) { outline: none; } /* --- Scrollbar mono --- */ * { scrollbar-width: thin; scrollbar-color: var(--nl-fg-disabled) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--nl-fg-disabled); border: 3px solid var(--nl-bg); border-radius: var(--nl-r-pill); } *::-webkit-scrollbar-thumb:hover { background: var(--nl-fg-muted); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 3. TIPOGRAFIA — utilitários ========================================================================== */ .nl-d2xl { font-family: var(--nl-font-display); font-weight: 700; font-size: clamp(3.5rem, 13vw, 11rem); letter-spacing: -.045em; line-height: .84; text-transform: lowercase; } .nl-dxl { font-family: var(--nl-font-display); font-weight: 700; font-size: clamp(2.75rem, 8vw, 6rem); letter-spacing: -.04em; line-height: .88; text-transform: lowercase; } .nl-dlg { font-family: var(--nl-font-display); font-weight: 700; font-size: clamp(2.25rem, 5.5vw, 4rem); letter-spacing: -.035em; line-height: .92; text-transform: lowercase; } .nl-dmd { font-family: var(--nl-font-display); font-weight: 600; font-size: clamp(1.75rem, 3.5vw, 2.75rem); letter-spacing: -.03em; line-height: 1; text-transform: lowercase; } .nl-dsm { font-family: var(--nl-font-display); font-weight: 600; font-size: clamp(1.375rem, 2.2vw, 1.75rem); letter-spacing: -.02em; line-height: 1.1; text-transform: lowercase; } .nl-body-lg { font-size: 1.125rem; line-height: 1.6; } .nl-body-sm { font-size: .875rem; line-height: 1.55; color: var(--nl-fg-2); } .nl-caption { font-size: .8125rem; line-height: 1.45; letter-spacing: .01em; color: var(--nl-fg-2); } /* Label técnico: mono + uppercase + tracking largo */ .nl-tech { font-family: var(--nl-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--nl-fg-2); } .nl-highlight { background: linear-gradient(transparent 62%, var(--nl-bg-accent) 62%); padding: 0 .1em; color: var(--nl-fg-on-accent); } /* Emoji: evita tofu no meio de texto mono */ .nl-emoji { font-family: var(--nl-font-emoji); font-size: 1em; line-height: 1; vertical-align: -.1em; } /* Só para leitor de tela */ .nl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== 4. BOTÕES — pílula, contorno, lowercase ========================================================================== */ .nl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--nl-s2); height: var(--nl-tap); padding: 0 var(--nl-s5); font-family: var(--nl-font-sans); font-size: 15px; font-weight: 500; text-transform: lowercase; text-decoration: none; white-space: nowrap; cursor: pointer; border: var(--nl-b-bold) solid var(--nl-border); border-radius: var(--nl-r-pill); background: transparent; color: var(--nl-fg); transition: transform var(--nl-dur-base) var(--nl-ease), box-shadow var(--nl-dur-base) var(--nl-ease), background-color var(--nl-dur-fast) linear, border-color var(--nl-dur-fast) linear, color var(--nl-dur-fast) linear; } .nl-btn:hover { background: var(--nl-bg-inverse); color: var(--nl-fg-inverse); } .nl-btn:disabled, .nl-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; } /* Tamanho do ícone é regra do sistema, não do call site. Um sem width/height cai no default de 300x150 do SVG e destrói o botão. */ .nl-btn svg { flex: none; width: 18px; height: 18px; } .nl-btn--sm svg { width: 16px; height: 16px; } .nl-btn--lg svg { width: 20px; height: 20px; } .nl-btn--solid { background: var(--nl-bg-inverse); color: var(--nl-fg-inverse); } .nl-btn--solid:hover { background: var(--nl-bg); color: var(--nl-fg); } .nl-btn--accent { background: var(--nl-bg-accent); color: var(--nl-fg-on-accent); border-color: var(--nl-border); } .nl-btn--accent:hover { background: var(--nl-accent-hover); color: var(--nl-fg-on-accent); } .nl-btn--ghost { border-color: transparent; color: var(--nl-fg-2); } .nl-btn--ghost:hover { background: var(--nl-bg-muted); color: var(--nl-fg); } .nl-btn--danger { background: transparent; border-color: var(--nl-danger); color: var(--nl-danger-ink); } .nl-btn--danger:hover { background: var(--nl-danger); color: #FFFFFF; } .nl-btn--sm { height: 32px; padding: 0 14px; font-size: 14px; } .nl-btn--lg { height: 52px; padding: 0 28px; font-size: 17px; } /* Botão só-ícone: círculo perfeito, nunca abaixo do alvo de toque */ .nl-btn--icon { width: var(--nl-tap); height: var(--nl-tap); min-width: var(--nl-tap); min-height: var(--nl-tap); padding: 0; } .nl-btn--icon.nl-btn--sm { width: 36px; height: 36px; min-width: 36px; min-height: 36px; } .nl-btn--icon.nl-btn--lg { width: 52px; height: 52px; min-width: 52px; min-height: 52px; } /* Gesto de massa */ .nl-btn--hard { box-shadow: var(--nl-sh-sm); } .nl-btn--hard:hover { transform: translate(-2px, -2px); box-shadow: var(--nl-sh-md); } .nl-btn--hard:active { transform: translate(2px, 2px); box-shadow: none; } /* Botão em largura total, conteúdo alinhado à esquerda (menus laterais) */ .nl-btn--block { width: 100%; } .nl-btn--start { justify-content: flex-start; } /* Estado de carregamento */ .nl-btn.is-loading { pointer-events: none; opacity: .7; } /* ========================================================================== 5. BADGES / CHIPS ========================================================================== */ .nl-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; font-size: 13px; text-transform: lowercase; white-space: nowrap; border: var(--nl-b-base) solid var(--nl-border); border-radius: var(--nl-r-pill); color: var(--nl-fg); } .nl-badge--tech { font-family: var(--nl-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; } .nl-badge--solid { background: var(--nl-bg-inverse); color: var(--nl-fg-inverse); border-color: var(--nl-bg-inverse); } .nl-badge--accent { background: var(--nl-bg-accent); color: var(--nl-fg-on-accent); } .nl-badge--success { background: var(--nl-success-soft); color: var(--nl-success-ink); border-color: var(--nl-success); } .nl-badge--warning { background: var(--nl-warning-soft); color: var(--nl-warning-ink); border-color: var(--nl-warning); } .nl-badge--danger { background: var(--nl-danger-soft); color: var(--nl-danger-ink); border-color: var(--nl-danger); } .nl-badge--info { background: var(--nl-info-soft); color: var(--nl-info-ink); border-color: var(--nl-info); } .nl-badge--muted { border-color: var(--nl-border-soft); color: var(--nl-fg-2); } .nl-dot { width: 6px; height: 6px; border-radius: var(--nl-r-pill); background: currentColor; flex: none; } /* Chip clicável (sugestões do empty state) */ .nl-chip { display: inline-flex; align-items: center; gap: var(--nl-s2); min-height: var(--nl-tap); padding: 8px var(--nl-s5); font-size: 15px; text-align: left; text-transform: lowercase; cursor: pointer; background: transparent; color: var(--nl-fg); border: var(--nl-b-base) solid var(--nl-border); border-radius: var(--nl-r-pill); transition: background-color var(--nl-dur-fast) linear, color var(--nl-dur-fast) linear, transform var(--nl-dur-base) var(--nl-ease), box-shadow var(--nl-dur-base) var(--nl-ease); } .nl-chip:hover { background: var(--nl-bg-inverse); color: var(--nl-fg-inverse); transform: translate(-2px, -2px); box-shadow: var(--nl-sh-sm); } .nl-chip:active { transform: translate(0, 0); box-shadow: none; } /* ========================================================================== 6. CARDS ========================================================================== */ .nl-card { position: relative; background: var(--nl-bg-subtle); border: var(--nl-b-hair) solid var(--nl-border-soft); border-radius: var(--nl-r-lg); } .nl-card--outlined { background: var(--nl-bg); border: var(--nl-b-base) solid var(--nl-border); } .nl-card--brutal { background: var(--nl-bg); border: var(--nl-b-bold) solid var(--nl-border); box-shadow: var(--nl-sh-md); } .nl-card--inverse { background: var(--nl-bg-inverse); color: var(--nl-fg-inverse); } .nl-card--accent { background: var(--nl-bg-accent); color: var(--nl-fg-on-accent); border: var(--nl-b-bold) solid var(--nl-border); } .nl-card--int { cursor: pointer; transition: transform var(--nl-dur-base) var(--nl-ease), box-shadow var(--nl-dur-base) var(--nl-ease); } .nl-card--int:hover { transform: translate(-3px, -3px); box-shadow: var(--nl-sh-md); } .nl-card--int:active { transform: translate(0, 0); box-shadow: var(--nl-sh-xs); } .nl-card__body { padding: var(--nl-s5); display: grid; gap: var(--nl-s2); } .nl-card__title { font-family: var(--nl-font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; text-transform: lowercase; } .nl-card__desc { font-size: 14px; color: var(--nl-fg-2); } .nl-card--inverse .nl-card__desc { color: var(--nl-fg-2-on-inverse); } .nl-card--accent .nl-card__desc { color: color-mix(in srgb, var(--nl-seed-accent-ink) 78%, var(--nl-seed-accent)); } /* ========================================================================== 7. FORMULÁRIOS ========================================================================== */ .nl-field { width: 100%; font-family: var(--nl-font-sans); font-size: 16px; /* 16px evita zoom automático no iOS */ color: var(--nl-fg); background: var(--nl-bg); border: var(--nl-b-base) solid var(--nl-border); transition: border-color var(--nl-dur-fast) linear, box-shadow var(--nl-dur-fast) linear; } .nl-field::placeholder { color: var(--nl-fg-muted); text-transform: lowercase; } .nl-field:focus, .nl-field:focus-visible { outline: none; border-color: var(--nl-focus); box-shadow: 0 0 0 3px var(--nl-focus-ring); } .nl-field:disabled { background: var(--nl-bg-muted); color: var(--nl-fg-disabled); cursor: not-allowed; } .nl-field[aria-invalid="true"] { border-color: var(--nl-danger); } .nl-field[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--nl-danger-soft); } .nl-field--input { height: 44px; padding: 0 var(--nl-s4); border-radius: var(--nl-r-pill); } .nl-field--area { min-height: 112px; padding: var(--nl-s4); border-radius: var(--nl-r-lg); resize: vertical; } .nl-field--search { height: 40px; padding: 0 var(--nl-s4); border-radius: var(--nl-r-pill); font-size: 14px; } .nl-label { display: block; margin-bottom: 6px; font-family: var(--nl-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--nl-fg-2); } .nl-hint { margin: 0; font-size: 14px; color: var(--nl-fg-2); } .nl-error { margin: 0; display: flex; align-items: center; gap: var(--nl-s2); padding: 10px var(--nl-s3); font-size: 14px; color: var(--nl-danger-ink); background: var(--nl-danger-soft); border: var(--nl-b-base) solid var(--nl-danger); border-radius: var(--nl-r-md); } .nl-error[hidden] { display: none; } /* --- Campo com ícone / ação ------------------------------------------- */ .nl-inputgroup { position: relative; display: block; } .nl-inputgroup__icon { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); width: 16px; height: 16px; color: var(--nl-fg-muted); pointer-events: none; } .nl-inputgroup__icon ~ .nl-field { padding-left: 40px; } .nl-inputgroup__action { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--nl-r-pill); background: transparent; color: var(--nl-fg-muted); cursor: pointer; transition: background-color var(--nl-dur-fast) linear, color var(--nl-dur-fast) linear; } .nl-inputgroup__action:hover { background: var(--nl-bg-muted); color: var(--nl-fg); } .nl-inputgroup:has(.nl-inputgroup__action) .nl-field { padding-right: 44px; } /* Toggle de senha: exatamente UM ícone visível por vez. O JS alterna [data-visible]; sem JS, mostra o de "revelar". */ .nl-inputgroup__action [data-icon] { display: none; } .nl-inputgroup__action [data-icon="show"] { display: block; } .nl-inputgroup__action[data-visible="true"] [data-icon="show"] { display: none; } .nl-inputgroup__action[data-visible="true"] [data-icon="hide"] { display: block; } /* Mata os controles nativos duplicados do Edge/Chrome */ input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear, input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { display: none; } /* Autofill: o amarelo do Chrome destrói a paleta */ .nl-field:-webkit-autofill, .nl-field:-webkit-autofill:hover, .nl-field:-webkit-autofill:focus { -webkit-text-fill-color: var(--nl-fg); -webkit-box-shadow: 0 0 0 1000px var(--nl-bg) inset; caret-color: var(--nl-fg); } /* --- Switch ------------------------------------------------------------ */ .nl-switch { position: relative; width: 46px; height: 26px; flex: none; padding: 0; border: var(--nl-b-base) solid var(--nl-border); border-radius: var(--nl-r-pill); background: var(--nl-bg-muted); cursor: pointer; transition: background-color var(--nl-dur-fast) linear; } .nl-switch__knob { position: absolute; top: 50%; left: 3px; width: 16px; height: 16px; transform: translateY(-50%); border-radius: var(--nl-r-pill); background: var(--nl-fg-muted); transition: transform var(--nl-dur-base) var(--nl-ease), background-color var(--nl-dur-fast) linear; } .nl-switch[aria-pressed="true"] { background: var(--nl-bg-accent); } .nl-switch[aria-pressed="true"] .nl-switch__knob { transform: translateY(-50%) translateX(20px); background: var(--nl-fg-on-accent); } .nl-switch:disabled { opacity: .5; cursor: wait; } /* ========================================================================== 8. SHELL DO APP — sidebar · header · rail ========================================================================== */ .nl-shell { display: flex; height: 100dvh; background: var(--nl-bg); color: var(--nl-fg); } /* --- Sidebar de conversas --- */ .nl-sidebar { display: flex; flex-direction: column; width: var(--nl-sidebar-w); flex: none; background: var(--nl-bg); border-right: var(--nl-b-bold) solid var(--nl-border); overflow: hidden; } .nl-sidebar__brand { display: flex; align-items: center; gap: var(--nl-s3); font-family: var(--nl-font-display); font-size: 20px; font-weight: 700; letter-spacing: -.05em; line-height: 1; text-transform: lowercase; color: var(--nl-fg); text-decoration: none; } .nl-sidebar__brand img, .nl-sidebar__brand svg { width: 32px; height: 32px; flex: none; border-radius: var(--nl-r-sm); border: var(--nl-b-base) solid var(--nl-border); object-fit: cover; } .nl-sidebar__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; } .nl-sidebar__footer { border-top: var(--nl-b-base) solid var(--nl-border-soft); display: grid; gap: var(--nl-s2); } /* Item da lista de conversas */ .nl-navitem { display: flex; align-items: center; gap: var(--nl-s2); width: 100%; padding: 7px var(--nl-s3); font-size: 14px; text-align: left; text-transform: lowercase; text-decoration: none; color: var(--nl-fg-2); background: transparent; border: 0; border-radius: var(--nl-r-pill); cursor: pointer; transition: background-color var(--nl-dur-fast) linear, color var(--nl-dur-fast) linear; } .nl-navitem:hover { background: var(--nl-bg-muted); color: var(--nl-fg); } .nl-navitem.is-active, .nl-navitem[aria-current="page"] { background: var(--nl-bg-inverse); color: var(--nl-fg-inverse); } .nl-navitem:focus-visible { outline-offset: -3px; } /* REGRA DE CAIXA: chrome é lowercase; conteúdo do usuário preserva a caixa */ .nl-navitem--content { text-transform: none; } /* Indicador de presença */ .nl-presence { display: inline-flex; align-items: center; gap: var(--nl-s2); font-size: 13px; text-transform: lowercase; color: var(--nl-fg-2); } .nl-presence__dot { width: 8px; height: 8px; border-radius: var(--nl-r-pill); background: var(--nl-fg-disabled); flex: none; } /* --- Header do chat --- */ .nl-header { display: flex; align-items: center; gap: var(--nl-s3); height: var(--nl-header-h); flex: none; padding: 0 var(--nl-s5); background: var(--nl-bg); border-bottom: var(--nl-b-bold) solid var(--nl-border); } .nl-header__title { font-family: var(--nl-font-display); font-size: 19px; font-weight: 700; letter-spacing: -.03em; text-transform: lowercase; } .nl-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--nl-s1); } /* --- Rail vertical de integrações MCP --- */ .nl-rail { display: flex; flex-direction: column; align-items: center; gap: var(--nl-s3); width: var(--nl-rail-w); flex: none; padding: var(--nl-s4) 0; background: var(--nl-bg); border-left: var(--nl-b-bold) solid var(--nl-border); overflow-y: auto; overscroll-behavior: contain; } .nl-rail::-webkit-scrollbar { width: 0; } .nl-rail__label { padding: var(--nl-s2) 0; font-family: var(--nl-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .2em; line-height: 1; color: var(--nl-fg-2); writing-mode: vertical-rl; transform: rotate(180deg); } /* ========================================================================== 9. SUPERFÍCIE DE CHAT ========================================================================== */ .nl-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--nl-bg); } .nl-chat__scroll { flex: 1; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: var(--nl-s8) var(--nl-s6) var(--nl-s4); } /* Coluna única: chat, empty state e composer no MESMO eixo */ .nl-chat__inner, .nl-empty, .nl-composer, .nl-composer__hint, .nl-composer__col { width: 100%; max-width: var(--nl-col); margin-inline: auto; } .nl-chat__inner { display: grid; gap: var(--nl-s5); } /* --- Empty state --- */ .nl-empty { display: grid; gap: var(--nl-s5); justify-items: center; margin-block: auto; padding: var(--nl-s10) var(--nl-s2); text-align: center; } .nl-empty[hidden] { display: none; } .nl-empty__avatar { width: 112px; height: 112px; border: var(--nl-b-bold) solid var(--nl-border); border-radius: var(--nl-r-xl); background: var(--nl-bg-muted); object-fit: cover; } .nl-empty__title { font-family: var(--nl-font-display); font-size: clamp(2.25rem, 5.5vw, 3.5rem); font-weight: 700; letter-spacing: -.04em; line-height: .92; text-transform: lowercase; } .nl-empty__sub { margin: 0; font-size: 16px; text-transform: lowercase; color: var(--nl-fg-2); } .nl-empty__chips { display: flex; flex-wrap: wrap; gap: var(--nl-s2); justify-content: center; margin-top: var(--nl-s2); } /* --- Composer --- */ .nl-composer__wrap { flex: none; display: block; padding: var(--nl-s3) var(--nl-s6) var(--nl-s5); background: var(--nl-bg); } .nl-composer__col { position: relative; display: flex; flex-direction: column; gap: var(--nl-s2); } .nl-composer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: var(--nl-s2); padding: var(--nl-s2); background: var(--nl-bg); border: var(--nl-b-bold) solid var(--nl-border); border-radius: var(--nl-r-2xl); transition: border-color var(--nl-dur-fast) linear, box-shadow var(--nl-dur-fast) linear; } /* O anel do composer NÃO é lime — o lime da tela é o botão de enviar. Foco = halo neutro. Crisp, sem glow. */ .nl-composer:focus-within { box-shadow: 0 0 0 3px var(--nl-bg-muted); } .nl-composer.is-dragover { border-color: var(--nl-focus); box-shadow: 0 0 0 3px var(--nl-focus-ring); } .nl-composer textarea { width: 100%; min-width: 0; min-height: 36px; max-height: 200px; padding: 7px var(--nl-s2); border: 0; background: transparent; resize: none; font-family: var(--nl-font-sans); font-size: 16px; line-height: 1.45; color: inherit; overflow-y: auto; } .nl-composer textarea:focus { outline: none; } .nl-composer textarea::placeholder { color: var(--nl-fg-muted); text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nl-composer__tools { display: flex; align-items: center; gap: var(--nl-s1); flex: none; } .nl-composer__hint { display: block; margin: 0; text-align: center; font-size: 12px; text-transform: lowercase; color: var(--nl-fg-2); } /* ========================================================================== 10. OVERLAYS — modal · toast · tooltip ========================================================================== */ .nl-backdrop { position: fixed; inset: 0; background: var(--nl-scrim); } .nl-modal { display: flex; flex-direction: column; width: min(100%, 560px); max-height: min(88dvh, 720px); background: var(--nl-bg); color: var(--nl-fg); border: var(--nl-b-bold) solid var(--nl-border); border-radius: var(--nl-r-xl); box-shadow: var(--nl-sh-float); overflow: hidden; } .nl-modal__head { flex: none; display: flex; align-items: flex-start; gap: var(--nl-s3); padding: var(--nl-s5); border-bottom: var(--nl-b-base) solid var(--nl-border); } .nl-modal__head > :first-child { flex: 1; min-width: 0; } .nl-modal__head .nl-btn { margin-top: -4px; margin-right: -8px; } .nl-modal__title { font-family: var(--nl-font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.03em; text-transform: lowercase; } .nl-modal__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--nl-s5); } .nl-modal__foot { flex: none; display: flex; justify-content: flex-end; gap: var(--nl-s2); padding: var(--nl-s4) var(--nl-s5); border-top: var(--nl-b-base) solid var(--nl-border-soft); } .nl-toast { display: flex; align-items: flex-start; gap: var(--nl-s2); padding: var(--nl-s3) var(--nl-s4); background: var(--nl-bg); color: var(--nl-fg); border: var(--nl-b-bold) solid var(--nl-border); border-radius: var(--nl-r-lg); box-shadow: var(--nl-sh-md); font-size: 14px; line-height: 1.45; } .nl-toast--success { border-color: var(--nl-success); } .nl-toast--danger { border-color: var(--nl-danger); } .nl-toast--warning { border-color: var(--nl-warning); } .nl-toast--info { border-color: var(--nl-info); } .nl-tooltip { padding: 4px 10px; font-family: var(--nl-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; background: var(--nl-bg-inverse); color: var(--nl-fg-inverse); border-radius: var(--nl-r-sm); } /* ========================================================================== 11. TELA DE AUTENTICAÇÃO ========================================================================== */ .nl-auth { display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; background: var(--nl-bg); /* chapado. sem mesh, sem blur, sem gradiente */ color: var(--nl-fg); } .nl-auth__bar { display: flex; align-items: center; gap: var(--nl-s3); padding: var(--nl-s4) var(--nl-s6); border-bottom: var(--nl-b-bold) solid var(--nl-border); } .nl-auth__main { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--nl-s10); width: 100%; max-width: 1120px; margin-inline: auto; padding: var(--nl-s10) var(--nl-s6); } @media (min-width: 900px) { .nl-auth__main { grid-template-columns: 1fr minmax(380px, 440px); gap: var(--nl-s14); padding-block: var(--nl-s14); } } .nl-auth__pitch { display: grid; gap: var(--nl-s4); } .nl-auth__eyebrow { margin: 0; font-family: var(--nl-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--nl-fg-2); } .nl-auth__title { font-family: var(--nl-font-display); font-weight: 700; font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -.04em; line-height: .9; text-transform: lowercase; color: var(--nl-fg); } /* Uma cor só na headline — sem marca-texto, sem segunda tinta. O em existe só por semântica (ênfase no nome da marca), sem estilo próprio. */ .nl-auth__title em { font-style: normal; color: inherit; } .nl-auth__sub { margin: 0; font-size: 1.0625rem; line-height: 1.5; text-transform: lowercase; color: var(--nl-fg-2); max-width: 46ch; } .nl-auth__card { display: grid; gap: var(--nl-s5); padding: var(--nl-s6); background: var(--nl-bg); border: var(--nl-b-bold) solid var(--nl-border); border-radius: var(--nl-r-xl); box-shadow: var(--nl-sh-md); /* dura. não é blur. */ } .nl-auth__card h1, .nl-auth__card h2 { font-size: 1.75rem; letter-spacing: -.03em; } .nl-auth__foot { padding: var(--nl-s5) var(--nl-s6); border-top: var(--nl-b-base) solid var(--nl-border-soft); text-align: center; font-family: var(--nl-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--nl-fg-2); } .nl-auth__status { margin-left: auto; display: inline-flex; align-items: center; gap: var(--nl-s2); padding: 5px 12px; font-family: var(--nl-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--nl-fg); background: var(--nl-bg); border: var(--nl-b-base) solid var(--nl-border); border-radius: var(--nl-r-pill); } .nl-auth__status .nl-dot { background: var(--nl-success); } /* ========================================================================== 12. UTILITÁRIOS ========================================================================== */ .nl-rule { border-top: var(--nl-b-brut) solid var(--nl-border); } .nl-divider { border-top: var(--nl-b-hair) solid var(--nl-border-soft); } .nl-stack { display: grid; gap: var(--nl-s3); } .nl-press { transition: transform var(--nl-dur-base) var(--nl-ease), box-shadow var(--nl-dur-base) var(--nl-ease); } .nl-press:hover { transform: translate(-2px, -2px); box-shadow: var(--nl-sh-md); } .nl-press:active { transform: translate(2px, 2px); box-shadow: none; } /* Ícones herdam a tinta da superfície, nunca uma cor fixa */ .nl-btn svg, .nl-navitem svg, .nl-chip svg, .nl-badge svg { color: currentColor; stroke: currentColor; } /* ========================================================================== 13. RESPONSIVO ========================================================================== */ @media (max-width: 1080px) { .nl-rail { display: none; } } @media (max-width: 860px) { .nl-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; transform: translateX(-100%); transition: transform var(--nl-dur-slow) var(--nl-ease); box-shadow: var(--nl-sh-lg); } .nl-sidebar.is-open { transform: translateX(0); } .nl-chat__scroll { padding: var(--nl-s5) var(--nl-s4) var(--nl-s3); } .nl-composer__wrap { padding: var(--nl-s2) var(--nl-s4) var(--nl-s4); } .nl-header { padding: 0 var(--nl-s3); } .nl-auth__bar, .nl-auth__foot { padding-inline: var(--nl-s4); } .nl-auth__main { padding: var(--nl-s8) var(--nl-s4); gap: var(--nl-s8); } .nl-auth__card { padding: var(--nl-s5); } } @media (max-width: 480px) { .nl-sidebar { width: min(88vw, var(--nl-sidebar-w)); } .nl-empty__avatar { width: 88px; height: 88px; } .nl-modal__head, .nl-modal__body { padding: var(--nl-s4); } .nl-modal__foot { padding: var(--nl-s3) var(--nl-s4); } } /* ========================================================================== 14. ALTO CONTRASTE / IMPRESSÃO ========================================================================== */ @media (forced-colors: active) { .nl-btn, .nl-chip, .nl-card, .nl-field, .nl-composer, .nl-badge, .nl-modal { border: 1px solid CanvasText; } .nl-btn--accent, .nl-badge--accent { forced-color-adjust: none; } }