/* ========================================================================== ZetaUno — zetauno-style.css Folha de estilo única do Design System ZetaUno para projetos web. COMO USAR 1. Linke este arquivo no do seu projeto: 2. Atribua as classes aos elementos HTML desejados:

Título

3. Tema escuro: adicione data-theme="dark" no : 4. Fontes: os @font-face abaixo apontam para a pasta do Design System. Se copiar este arquivo para outro projeto, copie também as fontes e ajuste os caminhos. Space Grotesk e Mozilla Text são OFL 1.1: os arquivos de licença (*-OFL.txt) precisam viajar junto com os .ttf. SUMÁRIO 01. Fontes (@font-face) 02. Tokens (cores, tipografia, espaçamento, efeitos) 03. Temas claro / escuro 04. Base (reset leve + defaults de elementos) 05. Tipografia (.zeta-display-*, .zeta-h*, .zeta-body*, .zeta-overline…) 06. Layout e seções (.zeta-container, .zeta-section, .zeta-grid, .zeta-hero) 07. Botões (.zeta-btn, .zeta-icon-btn) 08. Badges e Tags (.zeta-badge, .zeta-tag) 09. Cápsula e marca (.zeta-capsule, .zeta-bolt, .zeta-logo) 10. Formulários (.zeta-form, .zeta-field, .zeta-label, .zeta-input, .zeta-select, .zeta-checkbox, .zeta-radio, .zeta-switch, .zeta-hint) 11. Alertas (.zeta-alert) 12. Cards (.zeta-card, .zeta-stat) 13. Tabelas e paginação (.zeta-table, .zeta-pagination) 14. Gráficos (.zeta-chart, legenda e paleta) 15. Utilitários (divisor, divisor com rótulo, sombras, texto, hide-empty) 16. Responsividade (grade que colapsa, sidebar mobile, helpers de breakpoint) 17. Autenticação (tela de login/cadastro em duas colunas — .zeta-auth) 18. Modal / Diálogo (.zeta-modal — overlay centralizado com botão fechar) 19. Segmented (.zeta-segmented) + Deflist (.zeta-deflist) 20. Mídia (.zeta-media-grid, .zeta-media-thumb, .zeta-media-item, .zeta-media-picker — prévias, acervo e seletor de arquivos) ========================================================================== */ /* ========================================================================== 01. FONTES ========================================================================== */ /* Space Grotesk — títulos / display (variável, pesos 300–700) */ @font-face { font-family: "Space Grotesk"; src: url("Prototype/Assets/Fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype"); font-weight: 300 700; font-style: normal; font-display: swap; } /* Mozilla Text — corpo / UI Fonte variável (200–700) num arquivo só, então não há um @font-face por peso: qualquer valor da faixa é interpolado. Substituiu a Glacial Indifference, que falhava ao ser exibida em alguns navegadores. Não possui itálico — o navegador o sintetiza, como já fazia antes. */ @font-face { font-family: "Mozilla Text"; src: url("Prototype/Assets/Fonts/MozillaText-VariableFont_wght.ttf") format("truetype"); font-weight: 200 700; font-style: normal; font-display: swap; } /* JetBrains Mono — código / números tabulares */ @font-face { font-family: "JetBrains Mono"; src: url("https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjPVmUsaaDhw.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* ========================================================================== 02. TOKENS ========================================================================== */ :root { /* ---- Escala de verde da marca ---- */ --zeta-green-50: #f2fbe6; --zeta-green-100: #e0f5c4; --zeta-green-200: #c6ec93; --zeta-green-300: #a9df5e; --zeta-green-400: #90dc3d; /* destaque do raio do logo */ --zeta-green-500: #7bc62b; /* verde PRIMÁRIO da marca */ --zeta-green-600: #63a81c; /* hover / pressionado */ --zeta-green-700: #4c8214; --zeta-green-800: #3a6210; --zeta-green-900: #2c4a0f; /* ---- Escala neutra / tinta ---- */ --zeta-black: #0d0f0c; --zeta-950: #141613; --zeta-900: #1c1f1a; --zeta-800: #2a2d28; --zeta-700: #3d423b; --zeta-600: #5b6157; --zeta-500: #7b8175; --zeta-400: #a4a99f; --zeta-300: #c8ccc3; --zeta-200: #e0e2dc; --zeta-100: #eceee9; --zeta-50: #f4f5f2; --zeta-white: #ffffff; /* ---- Linhas do grid de fundo ---- */ --grid-line-light: rgba(13, 15, 12, 0.055); --grid-line-dark: rgba(255, 255, 255, 0.05); /* ---- Status semântico ---- */ --status-success: #2fae4b; --status-warning: #e8a417; --status-danger: #e0492e; --status-info: #2f8fd0; /* ---- Paleta de gráficos (pizza / barras — verde monocromático) ---- */ --chart-1: #7bc62b; --chart-2: #0d0f0c; --chart-3: #63a81c; --chart-4: #a9df5e; --chart-5: #7b8175; --chart-6: #c6ec93; /* ---- Paleta de séries (gráfico de múltiplas linhas — matizes distintos) ---- Ordem fixa para comparar várias linhas ao mesmo tempo. As duas séries azuis têm variantes mais claras no tema escuro (ver seção 03) para manter contraste sobre o palco preto. */ --chart-line-1: var(--zeta-green-500); /* verde */ --chart-line-2: var(--status-warning); /* laranja */ --chart-line-3: var(--status-danger); /* vermelho */ --chart-line-4: #1e5aa8; /* azul escuro */ --chart-line-5: var(--status-info); /* azul claro */ /* ---- Paleta de séries ALTERNATIVA (alto contraste) ---- Mesmos matizes da paleta de séries (verde, laranja, vermelho, azul escuro, azul claro), porém mais vívidos e saturados. Serve para dar mais contraste às linhas do gráfico e, ao mesmo tempo, manter as cores dos alertas (--status-*) exclusivas dos alertas — aqui elas não são reaproveitadas. Os tons mais escuros (verde e azul escuro) clareiam no tema escuro (seção 03). */ --chart-line-alt-1: #2f9e12; /* verde vívido */ --chart-line-alt-2: #f2600c; /* laranja puro */ --chart-line-alt-3: #d81e2c; /* vermelho puro */ --chart-line-alt-4: #1e2f8f; /* azul escuro → índigo profundo */ --chart-line-alt-5: #14b0d4; /* azul claro → ciano/turquesa brilhante */ /* ---- Famílias tipográficas ---- */ --font-display: "Space Grotesk", "Arial Black", sans-serif; --font-body: "Mozilla Text", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- Pesos ---- */ --fw-regular: 400; --fw-bold: 700; /* ---- Escala de tipos (1rem = 16px) ---- Os tamanhos display/H1 são FLUIDOS via clamp(): encolhem em telas estreitas e travam no valor de desktop (o máximo do clamp), então a aparência em telas largas permanece idêntica. Formato do clamp: clamp(mínimo-mobile, base + escala-por-viewport, máximo-desktop). */ --fs-display-2xl: clamp(2.5rem, 1.4rem + 5.5vw, 5rem); /* 40 → 80 — hero */ --fs-display-xl: clamp(2rem, 1.4rem + 3.6vw, 3.75rem); /* 32 → 60 */ --fs-display-lg: clamp(1.75rem, 1.2rem + 2.8vw, 3rem); /* 28 → 48 */ --fs-h1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem); /* 28 → 36 */ --fs-h2: 1.75rem; /* 28 */ --fs-h3: 1.375rem; /* 22 */ --fs-h4: 1.125rem; /* 18 */ --fs-body-lg: 1.125rem; /* 18 */ --fs-body: 1rem; /* 16 */ --fs-body-sm: 0.875rem; /* 14 */ --fs-caption: 0.75rem; /* 12 */ --fs-overline: 0.6875rem; /* 11 */ /* ---- Alturas de linha ---- */ --lh-tight: 0.98; --lh-snug: 1.15; --lh-normal: 1.5; --lh-relaxed: 1.65; /* ---- Espaçamento entre letras ---- */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-overline: 0.18em; /* ---- Espaçamento (base 4px) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-12: 6rem; /* ---- Raios ---- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 26px; --radius-2xl: 36px; --radius-pill: 999px; /* ---- Larguras de container ---- */ --container-sm: 640px; --container-md: 960px; --container-lg: 1200px; --container-xl: 1400px; /* ---- Alturas de controles ---- */ --control-h-sm: 34px; --control-h-md: 42px; --control-h-lg: 52px; /* ---- Layout de sistema ---- */ --sidebar-w: 260px; --topbar-h: 64px; /* ---- Sombras — suaves, neutras, sem brilhos coloridos ---- */ --shadow-xs: 0 1px 2px rgba(13, 15, 12, 0.06); --shadow-sm: 0 1px 3px rgba(13, 15, 12, 0.08), 0 1px 2px rgba(13, 15, 12, 0.05); --shadow-md: 0 4px 12px rgba(13, 15, 12, 0.08), 0 2px 4px rgba(13, 15, 12, 0.05); --shadow-lg: 0 12px 28px rgba(13, 15, 12, 0.10), 0 4px 10px rgba(13, 15, 12, 0.06); --shadow-xl: 0 24px 56px rgba(13, 15, 12, 0.14); --shadow-green: 0 8px 24px rgba(123, 198, 43, 0.35); /* apenas CTA hero */ /* ---- Bordas ---- */ --border-width: 1px; --border-width-strong: 1.5px; /* ---- Movimento ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 340ms; /* ---- Grid técnico de fundo ---- */ --grid-size: 34px; } /* ========================================================================== 03. TEMAS ========================================================================== */ /* Tema claro (padrão) — superfície cinza-quente clara */ :root, [data-theme="light"] { --bg-base: #eef0eb; --bg-grid: var(--grid-line-light); --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #f4f5f2; --surface-inverse: #0d0f0c; --border: #e0e2dc; --border-strong: #c8ccc3; --text-primary: #0d0f0c; --text-secondary: #5b6157; --text-muted: #7b8175; --text-inverse: #ffffff; --text-on-green: #0d0f0c; --accent: var(--zeta-green-500); --accent-hover: var(--zeta-green-600); --accent-contrast: #0d0f0c; --focus-ring: rgba(123, 198, 43, 0.45); } /* Tema escuro — palco preto, energia lime */ [data-theme="dark"] { --bg-base: #0d0f0c; --bg-grid: var(--grid-line-dark); --surface: #1c1f1a; --surface-raised: #242821; --surface-sunken: #141613; --surface-inverse: #ffffff; --border: #2a2d28; --border-strong: #3d423b; --text-primary: #f4f5f2; --text-secondary: #a4a99f; --text-muted: #7b8175; --text-inverse: #0d0f0c; --text-on-green: #0d0f0c; --accent: var(--zeta-green-500); --accent-hover: var(--zeta-green-400); --accent-contrast: #0d0f0c; --focus-ring: rgba(144, 220, 61, 0.5); /* Azuis da paleta de séries clareados para permanecerem legíveis no preto */ --chart-line-4: #5a8fd6; /* azul escuro → azul médio */ --chart-line-5: #7cc4f0; /* azul claro mais luminoso */ /* Paleta ALTERNATIVA: clareia o verde e separa bem os dois azuis no palco preto */ --chart-line-alt-1: #4fc21a; /* verde vívido mais luminoso */ --chart-line-alt-4: #6c7fe8; /* azul escuro → índigo claro (matiz distinto do ciano) */ --chart-line-alt-5: #45d1f2; /* azul claro → ciano brilhante */ } /* ========================================================================== 04. BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-primary); background-color: var(--bg-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Mídia nunca estoura o contêiner em telas estreitas */ img, video { max-width: 100%; height: auto; } ::selection { background: var(--zeta-green-300); color: var(--zeta-black); } /* Anel de foco padrão para todos os controles interativos do sistema */ .zeta-btn:focus-visible, .zeta-icon-btn:focus-visible, .zeta-tag:focus-visible, .zeta-input:focus-visible, .zeta-select:focus-visible, .zeta-checkbox:focus-visible, .zeta-radio:focus-visible, .zeta-switch:focus-visible, .zeta-topbar__home:focus-visible, .zeta-link:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); } /* ========================================================================== 05. TIPOGRAFIA Títulos: Space Grotesk. Corpo: Mozilla Text. ========================================================================== */ /* ---- Display (heros de marketing) ---- */ .zeta-display-2xl, .zeta-display-xl, .zeta-display-lg { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-primary); margin: 0; } .zeta-display-2xl { font-size: var(--fs-display-2xl); } /* 80px */ .zeta-display-xl { font-size: var(--fs-display-xl); } /* 60px */ .zeta-display-lg { font-size: var(--fs-display-lg); } /* 48px */ /* ---- Títulos ---- */ .zeta-h1, .zeta-h2, .zeta-h3, .zeta-h4 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-primary); margin: 0; } .zeta-h1 { font-size: var(--fs-h1); } /* 36px */ .zeta-h2 { font-size: var(--fs-h2); } /* 28px */ .zeta-h3 { font-size: var(--fs-h3); } /* 22px */ .zeta-h4 { font-size: var(--fs-h4); } /* 18px */ /* Manchete two-tone: a linha de destaque em lime, geralmente itálica.

Soluções
Completas

*/ .zeta-headline-accent { color: var(--zeta-green-500); font-style: italic; } /* Sobre palco escuro, use o lime mais claro */ .zeta-headline-accent--on-dark { color: var(--zeta-green-400); } /* ---- Corpo de texto ---- */ .zeta-body-lg, .zeta-body, .zeta-body-sm, .zeta-caption { font-family: var(--font-body); font-weight: var(--fw-regular); color: var(--text-primary); margin: 0; } .zeta-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); } /* 18px */ .zeta-body { font-size: var(--fs-body); line-height: var(--lh-normal); } /* 16px */ .zeta-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); } /* 14px */ .zeta-caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--text-muted); } /* 12px */ /* Rótulo overline / eyebrow em caixa alta */ .zeta-overline { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-muted); margin: 0; } /* Texto monoespaçado (códigos, kWh tabulares) */ .zeta-mono { font-family: var(--font-mono); font-size: var(--fs-body-sm); } /* Cores de texto auxiliares */ .zeta-text-secondary { color: var(--text-secondary); } .zeta-text-muted { color: var(--text-muted); } .zeta-text-accent { color: var(--accent-hover); } .zeta-text-inverse { color: var(--text-inverse); } /* Link padrão da marca */ .zeta-link { color: var(--accent-hover); font-weight: var(--fw-bold); text-decoration: none; border-radius: var(--radius-xs); transition: color var(--dur-fast) var(--ease-out); } .zeta-link:hover { color: var(--accent); } /* ========================================================================== 06. LAYOUT E SEÇÕES ========================================================================== */ /* Containers centralizados */ .zeta-container, .zeta-container--sm, .zeta-container--md, .zeta-container--xl { width: 100%; max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--space-5); } .zeta-container--sm { max-width: var(--container-sm); } .zeta-container--md { max-width: var(--container-md); } .zeta-container--xl { max-width: var(--container-xl); } /* Seção de página (blocos verticais de conteúdo) */ .zeta-section { padding-block: var(--space-9); } .zeta-section--compact { padding-block: var(--space-6); } /* Cabeçalho de seção: overline + título + descrição */ .zeta-section__header { margin-bottom: var(--space-6); } .zeta-section__header .zeta-overline { margin-bottom: var(--space-2); } /* Grid técnico de fundo — a assinatura visual da ZetaUno */ .zeta-grid { background-color: var(--bg-base); background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); } /* Palco escuro (fundo de produto / painéis de marca) */ .zeta-stage-dark { background-color: var(--zeta-black); color: var(--zeta-white); --bg-base: var(--zeta-black); --bg-grid: var(--grid-line-dark); } /* Hero: seção grande sobre o grid, com espaço generoso */ .zeta-hero { padding-block: var(--space-10); } /* Cabeçalho fixo translúcido (sites) */ .zeta-header { position: sticky; top: 0; z-index: 50; height: var(--topbar-h); display: flex; align-items: center; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } [data-theme="dark"] .zeta-header { background: rgba(13, 15, 12, 0.8); } /* Barra superior de sistemas de gestão */ .zeta-topbar { position: sticky; top: 0; z-index: 50; min-height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-4); padding-inline: var(--space-5); background: var(--surface); border-bottom: 1px solid var(--border); } /* Agrupamento de itens à esquerda/direita da barra (logo+sistema+página / ações) */ .zeta-topbar__group { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } /* Logo da barra como atalho para a tela inicial do sistema. Uso: */ .zeta-topbar__home { display: inline-flex; align-items: center; border-radius: var(--radius-xs); transition: opacity var(--dur-fast) var(--ease-out); } .zeta-topbar__home:hover { opacity: 0.7; } /* Divisor vertical entre logo, sistema e nome da página */ .zeta-topbar__divider { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; } /* Nome do sistema (ex.: CSMS) */ .zeta-topbar__system { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-body); letter-spacing: var(--ls-tight); color: var(--text-primary); white-space: nowrap; } /* Nome da página atual */ .zeta-topbar__page { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Sino/ação com indicador de notificação (ponto no canto) */ .zeta-topbar__notify { position: relative; } .zeta-topbar__notify-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--status-danger); border: 2px solid var(--surface); } /* Avatar de perfil (círculo com ícone ou iniciais) */ .zeta-avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-md); height: var(--control-h-md); border-radius: 50%; background: var(--accent); color: var(--text-on-green); font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); border: none; cursor: pointer; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); } .zeta-avatar:active { transform: scale(0.96); } /* Envoltório do perfil na barra: ancora o dropdown abaixo do avatar */ .zeta-topbar__profile { position: relative; } /* Menu suspenso (dropdown) — ex.: menu do perfil na barra superior. Oculto por padrão; a classe .is-open exibe (controlada por JS). Fecha por clique fora ou Esc. Uso:
Nome da Conta
detalhe opcional
*/ .zeta-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 220px; display: none; padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .zeta-menu.is-open { display: block; } .zeta-menu__header { padding: 10px 12px; margin-bottom: var(--space-2); border-bottom: 1px solid var(--border); } .zeta-menu__name { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); color: var(--text-primary); } .zeta-menu__meta { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; } .zeta-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; border-radius: var(--radius-sm); background: transparent; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); color: var(--text-primary); text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .zeta-menu__item:hover { background: var(--surface-sunken); } .zeta-menu__item--danger { color: var(--status-danger); } .zeta-menu__item--danger:hover { background: rgba(224, 73, 46, 0.10); } /* Barra lateral de navegação */ .zeta-sidebar { width: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-4); background: var(--surface); border-right: 1px solid var(--border); } /* Modificador --fixed: barra fixa que acompanha a rolagem (estilo painel admin). Fica logo abaixo da barra superior (--topbar-h) e ocupa o resto da altura da janela; o conteúdo interno rola se passar da altura disponível. */ .zeta-sidebar--fixed { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); min-height: 0; overflow-y: auto; } /* Grupo de itens de navegação (topo da barra) */ .zeta-sidebar__nav { display: flex; flex-direction: column; gap: var(--space-2); } /* Rodapé da barra: fixado na base (ex.: botão de configurações) */ .zeta-sidebar__footer { margin-top: auto; /* empurra para o fim da coluna */ padding-top: var(--space-3); border-top: 1px solid var(--border); } /* Item de navegação (sidebar ou menu) */ .zeta-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: none; border-radius: var(--radius-sm); background: transparent; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); color: var(--text-secondary); text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .zeta-nav-item:hover { background: var(--surface-sunken); color: var(--text-primary); } .zeta-nav-item--active { background: var(--accent); color: var(--text-on-green); } .zeta-nav-item--active:hover { background: var(--accent); color: var(--text-on-green); } /* ========================================================================== 07. BOTÕES Assinatura: pílula lime com rótulo preto. Uso: ========================================================================== */ .zeta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-h-md); padding: 0 22px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: 1; letter-spacing: 0.01em; white-space: nowrap; text-decoration: none; /* o botão também pode ser um de navegação */ border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); /* primário é o padrão */ background: var(--accent); color: var(--text-on-green); } .zeta-btn:active:not(:disabled) { transform: scale(0.97); } .zeta-btn:disabled { opacity: 0.45; cursor: not-allowed; } /* Variantes */ .zeta-btn--primary { background: var(--accent); color: var(--text-on-green); } .zeta-btn--primary:hover:not(:disabled) { background: var(--accent-hover); } .zeta-btn--secondary { background: var(--surface-inverse); color: var(--text-inverse); } .zeta-btn--secondary:hover:not(:disabled) { background: var(--zeta-800); } .zeta-btn--outline { background: transparent; color: var(--text-primary); border: var(--border-width-strong) solid var(--border-strong); } .zeta-btn--outline:hover:not(:disabled) { background: var(--surface-sunken); border-color: var(--text-primary); } .zeta-btn--ghost { background: transparent; color: var(--text-primary); } .zeta-btn--ghost:hover:not(:disabled) { background: var(--surface-sunken); } /* Ação destrutiva — a que interrompe algo em andamento ou não tem volta (parar uma recarga, reiniciar o equipamento, excluir). O vermelho aqui não é decoração: ele separa, à distância de um relance, o botão que só faz o pedido seguir daquele que corta alguma coisa. Por isso é raro — quando dois destes aparecem juntos numa tela, o alerta se dilui. */ .zeta-btn--danger { background: var(--status-danger); color: #fff; } .zeta-btn--danger:hover:not(:disabled) { filter: brightness(0.92); } /* A mesma ação destrutiva, em contorno. Serve onde ela mora SOLTA numa página — no fim de um formulário de edição, por exemplo — e não dentro de um pop-up já dedicado a ela: ali o vermelho cheio brigaria com o botão primário da tela, que é o que a pessoa foi fazer. O contorno avisa sem disputar; o vermelho cheio fica para a CONFIRMAÇÃO, quando não há mais nada a disputar. */ .zeta-btn--danger-outline { background: transparent; color: var(--status-danger); border: var(--border-width-strong) solid var(--status-danger); } .zeta-btn--danger-outline:hover:not(:disabled) { background: rgba(224, 73, 46, 0.10); } /* Tamanhos */ .zeta-btn--sm { height: var(--control-h-sm); padding: 0 16px; font-size: var(--fs-body-sm); gap: 6px; } .zeta-btn--lg { height: var(--control-h-lg); padding: 0 30px; font-size: var(--fs-body-lg); gap: 10px; } /* Modificadores */ .zeta-btn--square { border-radius: var(--radius-sm); } /* sem pílula */ .zeta-btn--full { display: flex; width: 100%; } .zeta-btn--glow { box-shadow: var(--shadow-green); } /* apenas 1 CTA hero por página */ /* Botão de ícone (quadrado ou redondo, um glifo só) */ .zeta-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-md); height: var(--control-h-md); padding: 0; text-decoration: none; /* o botão de ícone também pode ser um */ border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .zeta-icon-btn:hover:not(:disabled) { background: var(--surface-sunken); } .zeta-icon-btn:active:not(:disabled) { transform: scale(0.97); } .zeta-icon-btn:disabled { opacity: 0.45; cursor: not-allowed; } .zeta-icon-btn--primary { background: var(--accent); color: var(--text-on-green); } .zeta-icon-btn--primary:hover:not(:disabled) { background: var(--accent-hover); } .zeta-icon-btn--secondary { background: var(--surface-inverse); color: var(--text-inverse); } .zeta-icon-btn--secondary:hover:not(:disabled) { background: var(--accent-hover); } .zeta-icon-btn--outline { border: var(--border-width-strong) solid var(--border-strong); color: var(--text-primary); } .zeta-icon-btn--sm { width: var(--control-h-sm); height: var(--control-h-sm); } .zeta-icon-btn--lg { width: var(--control-h-lg); height: var(--control-h-lg); } .zeta-icon-btn--round { border-radius: var(--radius-pill); } /* ========================================================================== 08. BADGES E TAGS ========================================================================== */ /* Badge — pílula pequena de status. Uso: Ativa */ .zeta-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-caption); letter-spacing: 0.01em; line-height: 1; padding: 5px 10px; border-radius: var(--radius-pill); /* tom neutro é o padrão */ color: var(--text-secondary); background: var(--surface-sunken); } /* Ponto de status opcional: antes do texto */ .zeta-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* Tons suaves (fundo claro, texto escuro do tom) */ .zeta-badge--green { color: var(--zeta-green-700); background: var(--zeta-green-100); } .zeta-badge--neutral { color: var(--text-secondary); background: var(--surface-sunken); } .zeta-badge--success { color: #1f7a34; background: #e2f6e6; } .zeta-badge--warning { color: #8a5c00; background: #fbeecb; } .zeta-badge--danger { color: #9c2c18; background: #fbe3dd; } .zeta-badge--info { color: #1c5f8a; background: #dcecf7; } /* Tons sólidos (fundo cheio) */ .zeta-badge--green.zeta-badge--solid { color: #0d0f0c; background: var(--zeta-green-500); } .zeta-badge--neutral.zeta-badge--solid { color: #ffffff; background: var(--zeta-800); } .zeta-badge--success.zeta-badge--solid { color: #ffffff; background: var(--status-success); } .zeta-badge--warning.zeta-badge--solid { color: #0d0f0c; background: var(--status-warning); } .zeta-badge--danger.zeta-badge--solid { color: #ffffff; background: var(--status-danger); } .zeta-badge--info.zeta-badge--solid { color: #ffffff; background: var(--status-info); } /* Tag — chip de filtro/categoria, selecionável. Uso: */ .zeta-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); line-height: 1; padding: 7px 12px; border-radius: var(--radius-pill); border: var(--border-width-strong) solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .zeta-tag:hover { background: var(--surface-sunken); } .zeta-tag--selected { border-color: var(--accent); background: var(--zeta-green-100); color: var(--zeta-green-700); } /* Botão de remover dentro da tag: */ .zeta-tag__remove { display: inline-flex; border: none; background: transparent; cursor: pointer; padding: 0; color: inherit; opacity: 0.7; font-size: 14px; line-height: 1; } .zeta-tag__remove:hover { opacity: 1; } /* ========================================================================== 09. CÁPSULA E MARCA ========================================================================== */ /* Capsule — o callout estádio assinatura da ZetaUno (raio + rótulo). Uso: Faça parte da inovação */ .zeta-capsule { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: 1; padding: 12px 22px; border-radius: var(--radius-pill); /* tom verde é o padrão */ background: var(--accent); color: #0d0f0c; } .zeta-capsule--dark { background: var(--surface-inverse); color: var(--text-inverse); } .zeta-capsule--light { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); box-shadow: var(--shadow-md); } .zeta-capsule--sm { padding: 8px 16px; font-size: var(--fs-body-sm); } .zeta-capsule--lg { padding: 16px 30px; font-size: var(--fs-body-lg); } /* Glifo do raio do logo (herda a cor do texto via currentColor). Funciona dentro da cápsula ou solto para ênfase de energia/carregamento. */ .zeta-bolt { display: inline-block; width: 16px; height: 20px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpolygon points='14,0 0,18 9,18 6,32 24,10 13,10'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpolygon points='14,0 0,18 9,18 6,32 24,10 13,10'/%3E%3C/svg%3E") no-repeat center / contain; } .zeta-bolt--sm { width: 12px; height: 15px; } .zeta-bolt--lg { width: 20px; height: 26px; } /* Logo — use sempre os SVGs oficiais, nunca redesenhe. Uso: */ .zeta-logo { display: block; height: 40px; width: auto; } .zeta-logo--sm { height: 28px; } .zeta-logo--lg { height: 56px; } /* ========================================================================== 10. FORMULÁRIOS ========================================================================== */ /* Empilhamento vertical de campos — o contêiner de um formulário. Uso:
…campos…
*/ .zeta-form { display: flex; flex-direction: column; gap: var(--space-5); } /* Linha auxiliar dentro do form (ex.: "manter conectado" + "esqueci a senha") */ .zeta-form__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } /* Grupo de campo: label + controle + hint. Uso:
Texto de ajuda
*/ .zeta-field { display: flex; flex-direction: column; gap: 6px; width: 100%; } /* Rótulo de campo */ .zeta-label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); color: var(--text-primary); } /* Campo de texto */ .zeta-input { width: 100%; height: var(--control-h-md); padding: 0 14px; font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-primary); background: var(--surface); border: var(--border-width-strong) solid var(--border-strong); border-radius: var(--radius-sm); outline: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .zeta-input::placeholder { color: var(--text-muted); } .zeta-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus-ring); } .zeta-input:disabled { background: var(--surface-sunken); opacity: 0.6; cursor: not-allowed; } .zeta-input--error { border-color: var(--status-danger); } .zeta-input--error:focus { border-color: var(--status-danger); box-shadow: 0 0 0 4px rgba(224, 73, 46, 0.25); } /* Área de texto */ textarea.zeta-input { height: auto; min-height: 96px; padding: 10px 14px; resize: vertical; line-height: var(--lh-normal); } /* Campo com ícone à esquerda:
…
*/ .zeta-input-group { position: relative; width: 100%; } .zeta-input-group__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; } .zeta-input-group .zeta-input { padding-left: 41px; } /* Ação à direita dentro do input-group (ex.: botão de mostrar/ocultar senha). Combine com o modificador --action no grupo para abrir espaço no campo:
…
*/ .zeta-input-group__action { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); } .zeta-input-group--action .zeta-input { padding-right: 44px; } /* Texto de ajuda e de erro sob o campo */ .zeta-hint { font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); } .zeta-hint--error { color: var(--status-danger); } /* Select nativo estilizado como o Input (seta via background) */ .zeta-select { width: 100%; height: var(--control-h-md); padding: 0 38px 0 14px; appearance: none; -webkit-appearance: none; font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-primary); background-color: var(--surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237b8175' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; border: var(--border-width-strong) solid var(--border-strong); border-radius: var(--radius-sm); outline: none; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .zeta-select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus-ring); } .zeta-select:disabled { background-color: var(--surface-sunken); cursor: not-allowed; opacity: 0.6; } /* Checkbox — quadrado lime quando marcado. Uso: */ .zeta-checkbox { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex-shrink: 0; margin: 0; border-radius: var(--radius-xs); border: var(--border-width-strong) solid var(--border-strong); background: var(--surface); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .zeta-checkbox:checked { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%230d0f0c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .zeta-checkbox:disabled { opacity: 0.5; cursor: not-allowed; } /* Radio — mesmo corpo do checkbox, redondo e com um ponto no lugar do "check". A forma é o que distingue os dois para quem lê a tela de relance: quadrado = várias respostas; redondo = uma só. Uso: */ .zeta-radio { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex-shrink: 0; margin: 0; border-radius: var(--radius-pill); border: var(--border-width-strong) solid var(--border-strong); background: var(--surface); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .zeta-radio:checked { border-color: var(--accent); /* O ponto é um gradiente, e não um pseudo-elemento: não aceita ::before */ background-image: radial-gradient(circle, var(--accent) 0 5px, transparent 6px); } .zeta-radio:disabled { opacity: 0.5; cursor: not-allowed; } /* Linha inteira selecionável: o rótulo que envolve um radio/checkbox pode ser uma FAIXA clicável, e não só o texto ao lado da caixa. Numa lista de opções com ícone, nome e etiqueta, é o que dá um alvo do tamanho da linha. Uso: */ .zeta-choice--linha { display: flex; width: 100%; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); transition: background var(--dur-fast) var(--ease-out); } .zeta-choice--linha:hover { background: var(--surface); } .zeta-choice--linha:has(:checked) { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); } /* Switch — alternador on/off, trilho lime quando ligado. Uso: */ .zeta-switch { appearance: none; -webkit-appearance: none; position: relative; width: 42px; height: 24px; flex-shrink: 0; margin: 0; border: none; border-radius: var(--radius-pill); background: var(--border-strong); cursor: pointer; transition: background var(--dur-base) var(--ease-out); } .zeta-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: left var(--dur-base) var(--ease-out); } .zeta-switch:checked { background: var(--accent); } .zeta-switch:checked::before { left: 21px; } .zeta-switch:disabled { opacity: 0.5; cursor: not-allowed; } /* Rótulo que envolve checkbox/switch + texto */ .zeta-choice { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-primary); cursor: pointer; } .zeta-choice:has(:disabled) { opacity: 0.5; cursor: not-allowed; } /* ========================================================================== 11. ALERTAS Mensagens de feedback em bloco (sucesso, aviso, erro, informação). Uso: */ .zeta-alert { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: var(--radius-md); border: 1px solid var(--border); border-left-width: 4px; border-left-style: solid; font-family: var(--font-body); font-size: var(--fs-body-sm); background: var(--surface); color: var(--text-primary); border-left-color: var(--zeta-500); } .zeta-alert__title { font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: var(--lh-snug); } .zeta-alert__text { color: var(--text-secondary); line-height: var(--lh-normal); } .zeta-alert--success { background: #e2f6e6; border-color: #e2f6e6; border-left-color: var(--status-success); color: #1f7a34; } .zeta-alert--warning { background: #fbeecb; border-color: #fbeecb; border-left-color: var(--status-warning); color: #8a5c00; } .zeta-alert--danger { background: #fbe3dd; border-color: #fbe3dd; border-left-color: var(--status-danger); color: #9c2c18; } .zeta-alert--info { background: #dcecf7; border-color: #dcecf7; border-left-color: var(--status-info); color: #1c5f8a; } .zeta-alert--green { background: var(--zeta-green-100); border-color: var(--zeta-green-100); border-left-color: var(--zeta-green-500); color: var(--zeta-green-700); } .zeta-alert--success .zeta-alert__text, .zeta-alert--warning .zeta-alert__text, .zeta-alert--danger .zeta-alert__text, .zeta-alert--info .zeta-alert__text, .zeta-alert--green .zeta-alert__text { color: inherit; opacity: 0.85; } /* ========================================================================== 12. CARDS ========================================================================== */ /* Card — contêiner de superfície: arredondado, sombra suave, borda hairline. Uso:
Título
Subtítulo
…
Conteúdo
*/ .zeta-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } .zeta-card--flat { box-shadow: none; } /* Card acionável — o card INTEIRO é o botão. --------------------------------------------------------------------------- Para uma lista em que cada item leva a uma única ação, o botão dentro do card é redundante: ele repete, num alvo pequeno, o que o card já significa. Aqui o card é o alvo, e ele responde ao mouse de duas formas ao mesmo tempo — a superfície puxa para o verde da marca e a peça flutua alguns pixels. Use SEMPRE em */ .zeta-card--acionavel { display: block; width: 100%; padding: 0; font: inherit; color: inherit; text-decoration: none; /* o card acionável também pode ser um */ text-align: left; cursor: pointer; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .zeta-card--acionavel:hover { /* Verde leve: o suficiente para o card responder, longe do peso de um botão preenchido — quem manda na hierarquia continua sendo o conteúdo. */ background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); transform: translateY(-3px); box-shadow: var(--shadow-lg); } /* O clique afunda: sem isso a peça fica flutuando enquanto o botão é apertado, e o gesto perde o fim. */ .zeta-card--acionavel:active { transform: translateY(-1px); } .zeta-card--acionavel:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring), var(--shadow-lg); } /* Sem movimento, a cor sozinha continua marcando o alvo */ @media (prefers-reduced-motion: reduce) { .zeta-card--acionavel { transition: background var(--dur-base) linear; } .zeta-card--acionavel:hover, .zeta-card--acionavel:active { transform: none; } } .zeta-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 0; } .zeta-card__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); letter-spacing: -0.01em; color: var(--text-primary); } .zeta-card__subtitle { font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: 3px; } .zeta-card__action { flex-shrink: 0; } .zeta-card__body { padding: 20px; } /* Card de imagem (estilo dos posts): mídia em palco preto, raio maior */ .zeta-card--image { border-radius: var(--radius-xl); } .zeta-card__media { display: flex; align-items: center; justify-content: center; background: var(--zeta-black); aspect-ratio: 4 / 3; overflow: hidden; } .zeta-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; } /* StatCard — tile de KPI: rótulo, valor grande, delta opcional. Uso:
Energia entregue …svg…
1.284 kWh
▲ 12%
*/ .zeta-stat { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .zeta-stat__top { display: flex; align-items: center; justify-content: space-between; } .zeta-stat__label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .zeta-stat__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--accent-hover); } .zeta-stat__value { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display-lg); line-height: 1; letter-spacing: var(--ls-tight); color: var(--text-primary); } .zeta-stat__unit { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body); color: var(--text-muted); margin-left: 6px; } .zeta-stat__delta { display: flex; align-items: center; gap: 5px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); } .zeta-stat__delta--up { color: var(--status-success); } .zeta-stat__delta--down { color: var(--status-danger); } /* Variante acento: o único tile lime do painel */ .zeta-stat--accent { background: var(--accent); border-color: transparent; } .zeta-stat--accent .zeta-stat__label { color: rgba(13, 15, 12, 0.65); } .zeta-stat--accent .zeta-stat__icon { background: rgba(13, 15, 12, 0.12); color: #0d0f0c; } .zeta-stat--accent .zeta-stat__value { color: #0d0f0c; } .zeta-stat--accent .zeta-stat__unit { color: rgba(13, 15, 12, 0.7); } .zeta-stat--accent .zeta-stat__delta--up, .zeta-stat--accent .zeta-stat__delta--down { color: #0d0f0c; } /* ========================================================================== 13. TABELAS Uso:
…
*/ .zeta-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .zeta-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: var(--fs-body-sm); } .zeta-table thead tr { border-bottom: var(--border-width-strong) solid var(--border); } .zeta-table th { text-align: left; padding: 14px 18px; font-weight: var(--fw-bold); font-size: var(--fs-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .zeta-table td { padding: 14px 18px; color: var(--text-primary); vertical-align: middle; } .zeta-table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--dur-fast) var(--ease-out); } .zeta-table tbody tr:last-child { border-bottom: none; } .zeta-table tbody tr:hover { background: var(--surface-sunken); } /* Modificadores */ .zeta-table--striped tbody tr:nth-child(even) { background: var(--surface-sunken); } .zeta-table--compact th, .zeta-table--compact td { padding: 10px 14px; } .zeta-table--static tbody tr:hover { background: transparent; } /* Alinhamentos de célula */ .zeta-table .zeta-td--right { text-align: right; } .zeta-table .zeta-td--center { text-align: center; } /* Números tabulares (kWh, valores) */ .zeta-table .zeta-td--num { text-align: right; font-variant-numeric: tabular-nums; } /* ---- Paginação ---- Navegação entre páginas de uma lista, tabela ou grade de cards. Fica ABAIXO do conteúdo que ela pagina. Três coisas, sempre: para onde ir (primeira / anterior / próxima / última), ONDE se está (o número da página atual, num campo que aceita digitação para saltar direto) e QUANTAS existem (o total ao lado). O campo é a própria indicação da página atual — em vez de repetir o número num rótulo à parte. As setas das pontas desabilitam quando não há para onde ir, então o limite da lista é visível sem precisar tentar. Uso: */ .zeta-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); } .zeta-pagination__nav { display: flex; align-items: center; gap: 6px; } .zeta-pagination__jump { display: flex; align-items: center; gap: 8px; } .zeta-pagination__label { font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--text-secondary); white-space: nowrap; } .zeta-pagination__total { color: var(--text-primary); font-weight: var(--fw-bold); } /* O campo herda .zeta-input; aqui só encolhe e centraliza o número */ .zeta-pagination__field { width: 68px; text-align: center; font-variant-numeric: tabular-nums; padding-inline: 8px; } /* ========================================================================== 14. GRÁFICOS O desenho do gráfico (SVG/canvas/lib) fica por conta do projeto; estas classes dão o contêiner, a legenda e a paleta oficial da marca. Ordem das séries: chart-1 (verde marca) → chart-6 (verde pálido). ========================================================================== */ /* Contêiner de gráfico (geralmente dentro de um .zeta-card) */ .zeta-chart { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; } /* Legenda horizontal */ .zeta-chart__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; } .zeta-chart__legend-item { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--text-secondary); } .zeta-chart__swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } /* Cores de série — use como fundo do swatch ou fill/stroke das marcas */ .zeta-chart-color-1 { background: var(--chart-1); } .zeta-chart-color-2 { background: var(--chart-2); } .zeta-chart-color-3 { background: var(--chart-3); } .zeta-chart-color-4 { background: var(--chart-4); } .zeta-chart-color-5 { background: var(--chart-5); } .zeta-chart-color-6 { background: var(--chart-6); } /* Para SVG: , */ .zeta-chart-stroke-1 { stroke: var(--chart-1); } .zeta-chart-fill-1 { fill: var(--chart-1); } .zeta-chart-stroke-2 { stroke: var(--chart-2); } .zeta-chart-fill-2 { fill: var(--chart-2); } .zeta-chart-stroke-3 { stroke: var(--chart-3); } .zeta-chart-fill-3 { fill: var(--chart-3); } .zeta-chart-stroke-4 { stroke: var(--chart-4); } .zeta-chart-fill-4 { fill: var(--chart-4); } .zeta-chart-stroke-5 { stroke: var(--chart-5); } .zeta-chart-fill-5 { fill: var(--chart-5); } .zeta-chart-stroke-6 { stroke: var(--chart-6); } .zeta-chart-fill-6 { fill: var(--chart-6); } /* ---- Paleta de séries: gráfico de múltiplas linhas (5 matizes distintos) ---- Sufixo l1…l5 = verde, laranja, vermelho, azul escuro, azul claro. Swatch da legenda: Linha SVG: Marcador SVG: */ .zeta-chart-color-l1 { background: var(--chart-line-1); } .zeta-chart-color-l2 { background: var(--chart-line-2); } .zeta-chart-color-l3 { background: var(--chart-line-3); } .zeta-chart-color-l4 { background: var(--chart-line-4); } .zeta-chart-color-l5 { background: var(--chart-line-5); } .zeta-chart-stroke-l1 { stroke: var(--chart-line-1); } .zeta-chart-fill-l1 { fill: var(--chart-line-1); } .zeta-chart-stroke-l2 { stroke: var(--chart-line-2); } .zeta-chart-fill-l2 { fill: var(--chart-line-2); } .zeta-chart-stroke-l3 { stroke: var(--chart-line-3); } .zeta-chart-fill-l3 { fill: var(--chart-line-3); } .zeta-chart-stroke-l4 { stroke: var(--chart-line-4); } .zeta-chart-fill-l4 { fill: var(--chart-line-4); } .zeta-chart-stroke-l5 { stroke: var(--chart-line-5); } .zeta-chart-fill-l5 { fill: var(--chart-line-5); } /* ---- Paleta de séries ALTERNATIVA: alto contraste (sufixo a1…a5) ---- Mesmos usos das classes l1…l5, porém com cores mais vívidas e sem reaproveitar as cores dos alertas (--status-*). Use quando o gráfico precisar de mais contraste sem colidir com a identidade dos alertas. */ .zeta-chart-color-a1 { background: var(--chart-line-alt-1); } .zeta-chart-color-a2 { background: var(--chart-line-alt-2); } .zeta-chart-color-a3 { background: var(--chart-line-alt-3); } .zeta-chart-color-a4 { background: var(--chart-line-alt-4); } .zeta-chart-color-a5 { background: var(--chart-line-alt-5); } .zeta-chart-stroke-a1 { stroke: var(--chart-line-alt-1); } .zeta-chart-fill-a1 { fill: var(--chart-line-alt-1); } .zeta-chart-stroke-a2 { stroke: var(--chart-line-alt-2); } .zeta-chart-fill-a2 { fill: var(--chart-line-alt-2); } .zeta-chart-stroke-a3 { stroke: var(--chart-line-alt-3); } .zeta-chart-fill-a3 { fill: var(--chart-line-alt-3); } .zeta-chart-stroke-a4 { stroke: var(--chart-line-alt-4); } .zeta-chart-fill-a4 { fill: var(--chart-line-alt-4); } .zeta-chart-stroke-a5 { stroke: var(--chart-line-alt-5); } .zeta-chart-fill-a5 { fill: var(--chart-line-alt-5); } /* Exceção de contraste do azul-claro (a5) no TEMA CLARO. O tom claro tem 2,56:1 sobre o branco: ótimo para uma fatia ou um fundo grande, fraco para um traço de 2px, que é o mínimo de 3:1 exigido para objetos gráficos finos. Só o TRAÇO desce um passo (3,4:1); fatias, swatches e pílulas seguem com --chart-line-alt-5 e a aparência já aprovada. */ [data-theme="light"] .zeta-chart-stroke-a5 { stroke: #0f92b0; } /* ---- Pílulas de estatística (pizza com legenda + totais) ---- Faixa de pílulas coloridas abaixo do gráfico, uma por série + um total. A cor de fundo vem das classes da paleta (.zeta-chart-color-*); o texto é claro por padrão. Em fundos claros (ex.: o ciano da paleta), acrescente .zeta-chart__stat--ink para texto escuro. O total usa .zeta-chart__stat--total. */ .zeta-chart__stats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .zeta-chart__stat { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); line-height: 1; color: #fff; /* fundo definido pela classe de cor da paleta ou por --total */ } .zeta-chart__stat--total { background: var(--zeta-500); } .zeta-chart__stat--ink { color: var(--zeta-black); } /* Rótulos de eixo */ .zeta-chart__axis-label { font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); } /* ---- Gráfico de linhas em SVG: cenário, eixos e camada de leitura ---- O traçado é gerado pelo projeto (ver Prototype/js/chart-line.js); estas classes padronizam TUDO em volta do dado: malha, eixos, marcações, rótulo de ponta e o tooltip que segue o ponteiro. Regra que orienta a seção: o DADO é a única coisa que pode ser forte. Malha e eixos são hairline (1px, sólidos — nunca tracejados) e ficam a um passo da superfície; texto de eixo usa tons de texto, nunca a cor da série. Uso:
…
…
*/ /* Cenário do traçado: âncora para o tooltip (posicionado em px sobre ele) */ .zeta-chart__plot { position: relative; width: 100%; } .zeta-chart__plot > svg { display: block; width: 100%; height: auto; overflow: visible; } /* Malha e eixos — hairline sólido, um passo off-surface, recessivos. vector-effect no SVG mantém 1px real mesmo com o gráfico escalado. */ .zeta-chart-grid { stroke: var(--border); stroke-width: 1px; fill: none; } .zeta-chart-axis { stroke: var(--border-strong); stroke-width: 1px; fill: none; } /* Marcações dos eixos: números tabulares para alinharem na vertical */ .zeta-chart-tick { font-family: var(--font-body); font-size: 11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; } /* Rótulo direto na ponta da linha (o último valor da série). Fica em tom de TEXTO — a identidade vem da marca colorida ao lado. */ .zeta-chart-label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11px; fill: var(--text-primary); font-variant-numeric: tabular-nums; } /* Anel na cor da superfície: mantém o ponto legível onde ele cruza a linha */ .zeta-chart-ring { stroke: var(--surface); stroke-width: 2px; } /* Fio vertical que encontra o X sob o ponteiro (oculto até o hover/foco) */ .zeta-chart-crosshair { stroke: var(--border-strong); stroke-width: 1px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); } .zeta-chart__plot.is-active .zeta-chart-crosshair { opacity: 1; } /* Ponto que acompanha o fio; some junto com ele */ .zeta-chart-cursor { opacity: 0; } .zeta-chart__plot.is-active .zeta-chart-cursor { opacity: 1; } /* ---- Tooltip de leitura ---- O VALOR lidera (forte, alto contraste) e o rótulo vem depois: aqui o leitor já sabe qual é a série e quer o número. Não recebe eventos de ponteiro para não disputar o hover com o gráfico. */ .zeta-tooltip { position: absolute; z-index: 2; display: none; pointer-events: none; min-width: 96px; padding: 9px 12px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); transform: translate(-50%, -100%); white-space: nowrap; } .zeta-tooltip.is-open { display: block; } /* Variante que segue o PONTEIRO, para revelar um texto cortado por reticências (um nome longo numa coluna estreita, por exemplo). Diferenças em relação ao tooltip de gráfico: posiciona-se pela janela (fixed), não por um contêiner, e nasce ABAIXO e à direita do cursor, para não tapar o que está sendo lido. O texto pode ser comprido, então aqui ele quebra em vez de esticar a caixa. Uso: ver CSMS.ativarDicas() em Prototype/js/data.js. */ .zeta-tooltip--pointer { position: fixed; z-index: 90; min-width: 0; max-width: min(340px, 70vw); padding: 7px 11px; transform: none; white-space: normal; } .zeta-tooltip__text { font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--text-primary); line-height: var(--lh-normal); } .zeta-tooltip__value { display: flex; align-items: center; gap: 7px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); color: var(--text-primary); font-variant-numeric: tabular-nums; } .zeta-tooltip__meta { margin-top: 3px; font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; } /* Chave da série: um traço curto (não um quadrado) — na densidade do tooltip um bloco preenchido é tinta de dado fazendo o trabalho de um rótulo. */ .zeta-tooltip__key { width: 12px; height: 2px; border-radius: 1px; flex-shrink: 0; } /* ---- Esqueleto de carregamento (.zeta-skeleton) ---- Bloco vazio que ocupa o LUGAR de um conteúdo que ainda não chegou, pulsando de leve enquanto se espera. Serve para dizer "está vindo" sem inventar um número nem deixar a tela pular quando o dado aparecer. Ele não define tamanho: quem usa dá a altura do que vai substituir — um esqueleto que não tem a medida do conteúdo real perde a razão de existir, porque o layout salta assim que os dados chegam. O pulso passa por um VERDE da marca, em vez de só variar a opacidade: um bloco cor de superfície clareando e escurecendo quase não se percebe no palco escuro, e o esqueleto existe justamente para ser notado. A tonalidade é uma lavagem — o suficiente para o movimento saltar aos olhos sem o bloco vazio virar o elemento mais chamativo da tela. A borda acompanha, com um pouco mais de força, porque é ela que desenha o contorno do que está por vir. Com `prefers-reduced-motion` a animação some e fica o bloco com um tom verde fixo: a informação "isto está carregando" continua legível sem movimento. Uso:
*/ .zeta-skeleton { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); animation: zeta-pulse 2.6s var(--ease-in-out) infinite; } @keyframes zeta-pulse { 0%, 100% { background: var(--surface); border-color: var(--border); } 50% { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); } } /* Esqueletos vizinhos não pulsam em uníssono: dois blocos piscando juntos viram um clarão só, que pisca a tela inteira. Escalonados, o movimento corre de um para o outro e a espera parece um processo em curso. O atraso é FIXO (0.8s), menor que meio ciclo: o segundo bloco não espera o primeiro terminar — ele entra enquanto o outro ainda sobe, e o pulso atravessa a fila como uma onda. Numa fila de três ou mais, o padrão se repete alternando um sim, um não. */ .zeta-skeleton:nth-child(even) { animation-delay: 0.8s; } @media (prefers-reduced-motion: reduce) { .zeta-skeleton { animation: none; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 26%, var(--border)); } } /* Selo de ícone — o quadrado arredondado que marca um item numa lista de funções, ao lado do título. Serve para o olho encontrar a linha certa numa grade de cards parecidos; sozinho não identifica nada, então acompanha sempre um título escrito. (`zeta-modal__icon` e `zeta-stat__icon` são versões deste mesmo desenho presas aos seus componentes — este é o que se usa fora deles.) Uso: */ .zeta-icon-chip { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--accent-hover); } .zeta-icon-chip--sm { width: 28px; height: 28px; border-radius: var(--radius-sm); } /* Indicador de operação em andamento — o anel que gira. --------------------------------------------------------------------------- Diferente do esqueleto, que ocupa o lugar do conteúdo que vai chegar, este é para a espera SEM forma prevista: uma consulta que ainda não sabe o que vai responder (buscar atualizações de firmware, por exemplo). O anel é um círculo de borda com um único lado no verde da marca: girando, é esse trecho que marca o movimento. Vem sempre acompanhado de texto — é o texto que diz o que está acontecendo; o anel só diz que ainda não acabou. Com `prefers-reduced-motion` a rotação não some (um indicador parado deixa de indicar), ela desacelera bastante: o sinal permanece, o movimento rápido que incomoda, não. Uso: Buscando… */ .zeta-spinner { display: inline-block; flex: none; width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: zeta-spin 0.8s linear infinite; } .zeta-spinner--sm { width: 16px; height: 16px; border-width: 2px; } @keyframes zeta-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .zeta-spinner { animation-duration: 2.4s; } } /* Barra horizontal simples em CSS puro (proporções pequenas, sem lib):
*/ .zeta-bar { width: 100%; height: 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; } .zeta-bar__fill { height: 100%; border-radius: var(--radius-pill); background: var(--accent); transition: width var(--dur-slow) var(--ease-out); } /* ========================================================================== 15. UTILITÁRIOS ========================================================================== */ /* Divisor hairline */ .zeta-divider { border: none; border-top: 1px solid var(--border); margin-block: var(--space-5); } /* Divisor com rótulo centralizado (ex.: "ou"). Uso:
ou
*/ .zeta-divider-label { display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-wide); } .zeta-divider-label::before, .zeta-divider-label::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* Esconde o elemento quando está vazio (ex.: área de feedback/alertas). */ .zeta-hide-empty:empty { display: none; } /* Sombras prontas */ .zeta-shadow-xs { box-shadow: var(--shadow-xs); } .zeta-shadow-sm { box-shadow: var(--shadow-sm); } .zeta-shadow-md { box-shadow: var(--shadow-md); } .zeta-shadow-lg { box-shadow: var(--shadow-lg); } .zeta-shadow-xl { box-shadow: var(--shadow-xl); } /* Superfícies */ .zeta-surface { background: var(--surface); } .zeta-surface-sunken { background: var(--surface-sunken); } .zeta-surface-inverse { background: var(--surface-inverse); color: var(--text-inverse); } /* Truncar texto em uma linha */ .zeta-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Acessibilidade: esconder visualmente mantendo para leitores de tela */ .zeta-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== 16. RESPONSIVIDADE Helpers para montar layouts que vão de desktop a celular sem quebrar. (A tipografia display/H1 já é fluida via tokens com clamp — seção 02.) Breakpoint de referência: 768px (limite tablet/celular). ========================================================================== */ /* Grade que colapsa sozinha — as colunas quebram conforme a largura, SEM media query. O min(…, 100%) impede estouro horizontal em telas minúsculas. Controle a largura mínima da coluna com a variável --zeta-col-min. Uso:
…cards…
*/ .zeta-cols { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(var(--zeta-col-min, 260px), 100%), 1fr)); } /* Mantém a largura da coluna mesmo quando há poucos itens. O padrão (`auto-fit`) descarta as trilhas vazias e estica o que sobrou: uma lista de dois cards vira dois blocos enormes logo acima de outra lista de três cards normais, e a diferença de tamanho parece querer dizer alguma coisa que não quer. Com `auto-fill` as trilhas continuam lá — os cards têm o mesmo tamanho nas duas listas e a linha simplesmente termina antes. Use quando duas grades dividem a mesma tela; para uma grade sozinha, o padrão aproveita melhor a largura. */ .zeta-cols--fill { grid-template-columns: repeat(auto-fill, minmax(min(var(--zeta-col-min, 260px), 100%), 1fr)); } .zeta-cols--sm { --zeta-col-min: 180px; } /* muitas colunas estreitas (KPIs) */ .zeta-cols--lg { --zeta-col-min: 320px; } /* poucas colunas largas */ /* DUAS colunas fixas — para quando o layout pede exatamente duas, e não "quantas couberem" (ex.: pares de gráficos, que perdem a comparação se a tela larga virar três). Colapsa para uma coluna no celular. Uso:
…dois cards por linha…
*/ .zeta-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 768px) { .zeta-cols--2 { grid-template-columns: 1fr; } } /* Casca de aplicação: barra lateral + conteúdo. No celular a sidebar vira uma faixa de navegação horizontal rolável — sem exigir JS. Uso:
…
*/ .zeta-app { display: flex; min-height: 100vh; } .zeta-app > main { flex: 1; min-width: 0; } @media (max-width: 768px) { .zeta-app { flex-direction: column; } .zeta-sidebar { width: 100%; min-height: 0; flex-direction: row; gap: var(--space-1); overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); } .zeta-sidebar .zeta-nav-item { white-space: nowrap; } /* No celular a barra fixa vira a mesma faixa horizontal rolável */ .zeta-sidebar--fixed { position: static; height: auto; overflow-x: auto; overflow-y: visible; } .zeta-sidebar__nav { flex-direction: row; } .zeta-sidebar__footer { margin-top: 0; margin-left: auto; /* empurra Configurações para o fim da faixa */ padding-top: 0; border-top: none; } .zeta-topbar { padding-inline: var(--space-4); } } /* Mostrar/ocultar por breakpoint — útil para trocar a sidebar desktop por um menu mobile, ou esconder colunas secundárias no celular. */ @media (max-width: 768px) { .zeta-hide-mobile { display: none !important; } } @media (min-width: 769px) { .zeta-hide-desktop { display: none !important; } } /* ========================================================================== 17. AUTENTICAÇÃO Tela de autenticação em duas colunas: painel de marca (palco preto + grid técnico) à esquerda e o cartão do formulário à direita. Colapsa para uma coluna abaixo de 920px (o painel de marca some). Serve login, cadastro e recuperação de senha. Uso:
…
…
========================================================================== */ .zeta-auth { display: flex; min-height: 100vh; } /* Painel de marca — palco preto com o grid técnico, independente do tema. O conteúdo principal (logo + headline) fica centralizado na vertical; a nota fica ancorada ao rodapé (position: absolute). */ .zeta-auth__brand { flex: 1 1 46%; position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--space-8); padding: var(--space-8) var(--space-9); background: var(--zeta-black); color: var(--zeta-white); --bg-grid: var(--grid-line-dark); } /* Logo alinhado à esquerda, logo acima da cápsula (dentro da headline) */ .zeta-auth__logo { height: 56px; width: auto; align-self: flex-start; } .zeta-auth__headline { display: flex; flex-direction: column; gap: var(--space-5); max-width: 460px; } .zeta-auth__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display-lg); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--zeta-white); margin: 0; } .zeta-auth__lead { font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--zeta-400); margin: 0; } .zeta-auth__lead strong { color: var(--zeta-100); font-weight: var(--fw-bold); } .zeta-auth__note { position: absolute; left: var(--space-9); right: var(--space-9); bottom: var(--space-8); font-family: var(--font-body); font-size: var(--fs-caption); color: var(--zeta-500); margin: 0; } /* Painel do formulário */ .zeta-auth__panel { flex: 1 1 54%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); position: relative; padding: var(--space-8) var(--space-5); } .zeta-auth__toolbar { position: absolute; top: var(--space-4); right: var(--space-4); } /* Cartão do formulário */ .zeta-auth__card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-7) var(--space-6); } .zeta-auth__card-head { display: flex; flex-direction: column; gap: var(--space-2); } /* Texto legal / rodapé pequeno da tela de auth */ .zeta-auth__legal { margin: 0; text-align: center; font-size: var(--fs-caption); color: var(--text-muted); } /* Colapsa para uma coluna: o painel de marca some no celular/tablet */ @media (max-width: 920px) { .zeta-auth__brand { display: none; } .zeta-auth__panel { flex: 1; } } /* ========================================================================== 18. MODAL / DIÁLOGO Overlay centralizado sobre um backdrop escurecido, com cartão de conteúdo e botão de fechar (X) no canto superior direito. Fica oculto por padrão; a classe .is-open o exibe (controlada por JS). Fecha via botão, clique no backdrop ou tecla Esc — todos com o atributo data-close no JS do projeto. Uso: ========================================================================== */ .zeta-modal { position: fixed; inset: 0; z-index: 1000; display: none; /* oculto por padrão; .is-open exibe */ align-items: center; justify-content: center; padding: var(--space-5); } .zeta-modal.is-open { display: flex; } /* Backdrop escurecido + leve desfoque */ .zeta-modal__backdrop { position: absolute; inset: 0; background: rgba(13, 15, 12, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } /* Cartão do diálogo */ .zeta-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-7) var(--space-6) var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); text-align: center; } /* Animação de entrada (respeita quem prefere menos movimento) */ .zeta-modal.is-open .zeta-modal__dialog { animation: zeta-modal-in var(--dur-base) var(--ease-out); } @keyframes zeta-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .zeta-modal.is-open .zeta-modal__dialog { animation: none; } } /* Botão fechar (X) no canto superior direito */ .zeta-modal__close { position: absolute; top: 10px; right: 10px; color: var(--text-muted); } /* Emblema/ícone opcional no topo (ex.: check de sucesso) */ .zeta-modal__icon { display: inline-flex; align-items: center; justify-content: center; align-self: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--zeta-green-100); color: var(--zeta-green-700); } [data-theme="dark"] .zeta-modal__icon { background: rgba(123, 198, 43, 0.16); color: var(--zeta-green-400); } /* Título e texto herdam a tipografia .zeta-*; estes ajustes só reduzem margens */ .zeta-modal__dialog > .zeta-h3 { margin: 0; } .zeta-modal__dialog > p { margin: 0; } .zeta-modal__dialog > .zeta-btn { margin-top: var(--space-2); } /* Formulário dentro do modal. O diálogo é centralizado — bom para um aviso, ruim para campos: rótulo centralizado sobre um campo largo obriga o olho a procurar onde a linha começa. Este bloco devolve o alinhamento à esquerda para o que é formulário, sem desalinhar o título e o texto de apoio acima dele. */ .zeta-modal__form { text-align: left; display: grid; gap: var(--space-4); } /* Linha de ações do modal — dois ou mais botões lado a lado (cancelar e confirmar, ou escolhas equivalentes). Eles dividem a largura por igual e empilham quando não couberem. */ .zeta-modal__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); } .zeta-modal__actions .zeta-btn { flex: 1 1 150px; } /* ========================================================================== 19. SEGMENTED (alternância) + DEFLIST (ficha de dados) ========================================================================== */ /* Segmented — grupo de opções mutuamente exclusivas, estilo "pílula dupla" (ex.: alternar entre visualização em Cards e Lista). Uso:
*/ .zeta-segmented { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-pill); } .zeta-segmented__option { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: none; border-radius: var(--radius-pill); background: transparent; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); color: var(--text-secondary); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .zeta-segmented__option:hover { color: var(--text-primary); } .zeta-segmented__option--active { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-xs); } /* Deflist — ficha de pares rótulo/valor (ex.: dados de um equipamento). Uso:
Modelo
ZetaDC 120
…
*/ .zeta-deflist { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; } .zeta-deflist dt { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--text-muted); white-space: nowrap; } .zeta-deflist dd { margin: 0; font-size: var(--fs-body-sm); color: var(--text-primary); text-align: right; word-break: break-word; } /* ========================================================================== 20. MÍDIA (prévias, acervo e seletor) Peças para escolher, listar e visualizar arquivos — logotipos e vídeos. Três blocos que se combinam: .zeta-media-grid grade de itens do acervo .zeta-media-item um item: prévia + nome + peso (é