/* AXYIA · axyia.css · classes do design system (gerado por ferramentas/build.py) Carregar depois de tokens.css. Cada valor le um token; nenhum hex aqui. As classes .ds-*, .panel, .snippet, .logo-stage, .selo-stage, .doc-table e .audit servem so a documentacao; podem sair no build do produto. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: var(--track-body); color: var(--fg); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1; font-variant-numeric: tabular-nums; } h1, h2, h3, h4, h5 { margin: 0; text-wrap: balance; font-weight: var(--w-medium); } p { margin: 0; } /* Link do sistema: regra no bloco CORRECOES v2.4 (sem sublinhado em repouso). */ ::selection { background: var(--accent-subtle-strong); color: var(--fg); } /* :focus-visible: regra no bloco FOCO v2.4, no fim deste style. */ button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; } svg { display: inline-block; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ===================================================================== TIPOGRAFIA : classes de papel (cada uma lê 3 tokens: size / lh / track) ===================================================================== */ .t-micro { font-size: var(--text-micro); line-height: var(--lh-micro); letter-spacing: var(--track-micro); font-weight: var(--w-semibold); text-transform: uppercase; } .t-caption { font-size: var(--text-caption); line-height: var(--lh-caption); letter-spacing: var(--track-caption); font-weight: var(--w-regular); } .t-body-sm { font-size: var(--text-body-sm); line-height: var(--lh-body-sm); letter-spacing: var(--track-body-sm); font-weight: var(--w-regular); } .t-body { font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: var(--track-body); font-weight: var(--w-regular); } .t-prose { font-size: var(--text-prose); line-height: var(--lh-prose); letter-spacing: var(--track-prose); font-weight: var(--w-regular); max-width: var(--measure); } .t-body-lg { font-size: var(--text-body-lg); line-height: var(--lh-body-lg); letter-spacing: var(--track-body-lg); font-weight: var(--w-regular); } .t-heading { font-size: var(--text-heading); line-height: var(--lh-heading); letter-spacing: var(--track-heading); font-weight: var(--w-semibold); } .t-title { font-size: var(--text-title); line-height: var(--lh-title); letter-spacing: var(--track-title); font-weight: var(--w-medium); } .t-title-lg { font-size: var(--text-title-lg); line-height: var(--lh-title-lg); letter-spacing: var(--track-title-lg); font-weight: var(--w-medium); } .t-display { font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: var(--w-medium); } .t-hero { font-size: var(--text-hero); line-height: var(--lh-hero); letter-spacing: var(--track-hero); font-weight: var(--w-semibold); font-family: var(--font-display); } .t-display-face { font-family: var(--font-display); font-weight: var(--w-semibold); } .t-medium { font-weight: var(--w-medium); } .t-semibold { font-weight: var(--w-semibold); } .t-secondary { color: var(--fg-secondary); } .t-tertiary { color: var(--fg-tertiary); } .t-disabled { color: var(--fg-disabled); } .eyebrow { font-size: var(--text-micro); line-height: var(--lh-micro); letter-spacing: var(--track-micro); font-weight: var(--w-semibold); text-transform: uppercase; color: var(--fg-tertiary); } .num { font-variant-numeric: tabular-nums; } .num-prop { font-variant-numeric: proportional-nums; } .measure { max-width: var(--measure); } .measure-sm { max-width: var(--measure-sm); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===================================================================== LOGO : sprite. #logo-axyia = oficial, sem ponto (sistema, e-mail, formal). #logo-axyia-ponto = versão com ponto, só site, marketing e proposta (.logo.com-ponto). #selo-axyia, #selo-favicon. Letras em currentColor, quadrado em --brand-mark. ===================================================================== */ .logo { display: inline-block; height: 18px; width: auto; aspect-ratio: var(--logo-ratio); color: var(--logo-fg); flex: none; vertical-align: middle; } .logo.com-ponto { aspect-ratio: var(--logo-ratio-ponto); } .logo-lg { height: 28px; } .logo-xl { height: 48px; } .logo-mark { display: none; width: 24px; height: 24px; flex: none; } [data-surface="site-dark"] .logo, .on-dark .logo { color: var(--axyia-papel); } [data-surface="site-dark"], .on-dark { --logo-fg: var(--axyia-papel); --logo-selo-bg: var(--axyia-papel); --logo-selo-fg: var(--axyia-logo); } .logo-type { font-family: var(--font-logo); font-weight: var(--logo-weight); letter-spacing: var(--logo-track); text-transform: uppercase; color: var(--logo-fg); font-size: 28px; line-height: 1; white-space: nowrap; } .logo-clear { position: relative; display: inline-flex; } .logo-clear::before { content: ""; position: absolute; inset: calc(-1 * var(--sp-6)); border: 1px dashed var(--border-strong); pointer-events: none; } .shell[data-sidebar="collapsed"] .sidebar-brand .logo { display: none; } .shell[data-sidebar="collapsed"] .sidebar-brand .logo-mark { display: block; } .selo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } .selo-stage { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-elevated); } .selo-stage.dark { background: var(--stone-950); border-color: var(--stone-800); } .selo-stage.dark .t-body-sm { color: var(--axyia-papel); } .selo-stage .logo-mark { display: block; width: 64px; height: 64px; } /* ===================================================================== ÍCONES : Solar linear via sprite inline, tamanho por classe, cor herdada ===================================================================== */ .icon { width: var(--icon-md); height: var(--icon-md); flex: none; vertical-align: -0.22em; color: inherit; fill: none; } .icon-xs { width: var(--icon-xs); height: var(--icon-xs); } .icon-sm { width: var(--icon-sm); height: var(--icon-sm); } .icon-md { width: var(--icon-md); height: var(--icon-md); } .icon-lg { width: var(--icon-lg); height: var(--icon-lg); } .icon-xl { width: var(--icon-xl); height: var(--icon-xl); } .icon-hero { width: var(--icon-hero); height: var(--icon-hero); } /* ===================================================================== BOTÃO ===================================================================== */ .btn { --btn-spinner: var(--fg); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--control-md); padding: 0 var(--sp-3); border: 1px solid transparent; border-radius: var(--r-md); font-size: var(--text-body); font-weight: var(--w-medium); line-height: 1; letter-spacing: 0; cursor: pointer; white-space: nowrap; text-decoration: none; user-select: none; position: relative; transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); --btn-spinner: var(--on-accent); } .btn-primary:hover, .btn-primary.is-hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-primary:active, .btn-primary.is-active { background: var(--accent-active); border-color: var(--accent-active); } .btn-secondary { background: var(--bg-elevated); color: var(--fg); border-color: var(--border); } .btn-secondary:hover, .btn-secondary.is-hover { background: var(--bg-muted); border-color: var(--border-strong); } .btn-secondary:active, .btn-secondary.is-active { background: var(--bg-inset); border-color: var(--border-strong); } .btn-ghost { background: transparent; color: var(--fg-secondary); } .btn-ghost:hover, .btn-ghost.is-hover { background: var(--bg-muted); color: var(--fg); } .btn-ghost:active, .btn-ghost.is-active { background: var(--bg-inset); color: var(--fg); } .btn-danger { background: var(--error-solid); color: var(--fg-inverse); border-color: var(--error-solid); --btn-spinner: var(--fg-inverse); } .btn-danger:hover, .btn-danger.is-hover { background: var(--error-fg); border-color: var(--error-fg); } .btn-danger:active, .btn-danger.is-active { background: var(--error-fg); } .btn-ink { background: var(--bg-inverse); color: var(--fg-inverse); border-color: var(--bg-inverse); --btn-spinner: var(--fg-inverse); } .btn-ink:hover, .btn-ink.is-hover { background: var(--border-inverse); border-color: var(--border-inverse); } /* foco do botao: bloco FOCO v2.4. */ .btn:disabled, .btn.is-disabled { background: var(--bg-muted); color: var(--fg-disabled); border-color: var(--border-subtle); cursor: not-allowed; } .btn.is-loading { pointer-events: none; } .btn.is-loading > * { visibility: hidden; } .btn.is-loading::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--btn-spinner); border-right-color: transparent; animation: spin 0.8s linear infinite; } .btn-sm { height: var(--control-sm); padding: 0 var(--sp-2); font-size: var(--text-body-sm); gap: var(--sp-1-5); } .btn-lg { height: var(--control-lg); padding: 0 var(--sp-4); } .btn-icon { width: var(--control-md); padding: 0; } .btn-icon.btn-sm { width: var(--control-sm); } .btn-link { background: none; border: 0; color: var(--accent-fg); padding: 0; height: auto; text-decoration: underline; text-underline-offset: 2px; } .btn-link:hover { color: var(--accent-hover); } @keyframes spin { to { transform: rotate(360deg); } } /* ===================================================================== BADGE (sistema único: tone=status ou tone=tag) ===================================================================== */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); height: 20px; padding: 0 var(--sp-2); border-radius: var(--r-full); border: 1px solid transparent; font-size: var(--text-caption); line-height: 1; letter-spacing: var(--track-caption); font-weight: var(--w-medium); white-space: nowrap; vertical-align: middle; } .badge-status { background: var(--badge-bg, var(--bg-muted)); color: var(--badge-fg, var(--fg-secondary)); } .badge-status[data-status]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--badge-dot); flex: none; } .badge-status[data-status="ext-com-merito"]::before, .badge-status[data-status="acordo"]::before, .badge-status[data-status="arquivado"]::before, .badge-status[data-status="encerrado"]::before { display: none; } .badge-tag { background: transparent; border-color: var(--border-strong); color: var(--fg-secondary); border-radius: var(--r-sm); font-size: var(--text-micro); letter-spacing: var(--track-micro); font-weight: var(--w-semibold); text-transform: uppercase; } .badge-sm { height: 18px; padding: 0 var(--sp-1-5); } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge-count { background: var(--bg-inverse); color: var(--fg-inverse); min-width: 20px; justify-content: center; padding: 0 var(--sp-1-5); font-weight: var(--w-semibold); } [data-status="ativo"] { --badge-bg: var(--status-ativo-bg, var(--status-pill-bg)); --badge-fg: var(--status-ativo-fg); --badge-dot: var(--status-ativo-dot); } [data-status="recurso"] { --badge-bg: var(--status-recurso-bg, var(--status-pill-bg)); --badge-fg: var(--status-recurso-fg); --badge-dot: var(--status-recurso-dot); } [data-status="suspenso"] { --badge-bg: var(--status-suspenso-bg, var(--status-pill-bg)); --badge-fg: var(--status-suspenso-fg); --badge-dot: var(--status-suspenso-dot); } [data-status="ext-com-merito"] { --badge-bg: var(--status-ext-com-merito-bg, var(--status-pill-bg)); --badge-fg: var(--status-ext-com-merito-fg); } [data-status="ext-sem-merito"] { --badge-bg: var(--status-ext-sem-merito-bg, var(--status-pill-bg)); --badge-fg: var(--status-ext-sem-merito-fg); --badge-dot: var(--status-ext-sem-merito-dot); } [data-status="acordo"] { --badge-bg: var(--status-acordo-bg, var(--status-pill-bg)); --badge-fg: var(--status-acordo-fg); } [data-status="arquivado"] { --badge-bg: var(--status-arquivado-bg, var(--status-pill-bg)); --badge-fg: var(--status-arquivado-fg); } [data-status="encerrado"] { --badge-bg: var(--status-encerrado-bg, var(--status-pill-bg)); --badge-fg: var(--status-encerrado-fg); } [data-tone="success"] { --badge-bg: var(--success-bg); --badge-fg: var(--success-fg); } [data-tone="warning"] { --badge-bg: var(--warning-bg); --badge-fg: var(--warning-fg); } [data-tone="error"] { --badge-bg: var(--error-bg); --badge-fg: var(--error-fg); } [data-tone="info"] { --badge-bg: var(--info-bg); --badge-fg: var(--info-fg); } /* ===================================================================== FORMULÁRIO : input, select, checkbox, radio, toggle ===================================================================== */ .field { display: flex; flex-direction: column; gap: var(--sp-1-5); min-width: 0; } .label { font-size: var(--text-caption); line-height: var(--lh-caption); letter-spacing: var(--track-caption); font-weight: var(--w-medium); color: var(--fg-secondary); } .label .req { color: var(--error-fg); } .help { font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--fg-tertiary); } .help.is-error { color: var(--error-fg); display: flex; gap: var(--sp-1); align-items: center; } .input { height: var(--control-md); width: 100%; padding: 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elevated); color: var(--fg); font-size: var(--text-body); line-height: 1; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background-color var(--dur-fast); } .input::placeholder { color: var(--fg-tertiary); } .input:hover, .input.is-hover { border-color: var(--border-strong); } .input:focus, .input.is-focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-halo); } .input:disabled, .input.is-disabled { background: var(--bg-muted); color: var(--fg-disabled); border-color: var(--border-subtle); cursor: not-allowed; } .input[aria-invalid="true"], .input.is-error { border-color: var(--error-solid); } .input[aria-invalid="true"]:focus, .input.is-error.is-focus { box-shadow: 0 0 0 3px var(--error-bg); } .input[readonly] { background: var(--bg-canvas); } textarea.input { height: auto; min-height: 88px; padding: var(--sp-2) var(--sp-3); line-height: var(--lh-body); resize: vertical; } .input-sm { height: var(--control-sm); font-size: var(--text-body-sm); padding: 0 var(--sp-2); } .input-wrap { position: relative; display: flex; align-items: center; } .input-wrap > .icon { position: absolute; left: 10px; color: var(--fg-tertiary); pointer-events: none; } .input-wrap > .input { padding-left: 34px; } .input-wrap > .icon.at-end { left: auto; right: 10px; } .input-wrap > .input.has-end { padding-right: 34px; } select.input { appearance: none; padding-right: 34px; cursor: pointer; } select.input:disabled { cursor: not-allowed; } .check, .radio { appearance: none; width: 16px; height: 16px; margin: 0; flex: none; border: 1px solid var(--border-strong); border-radius: var(--r-xs); background: var(--bg-elevated); display: inline-grid; place-content: center; cursor: pointer; vertical-align: -3px; transition: background-color var(--dur-fast), border-color var(--dur-fast); } .radio { border-radius: 50%; } .check:hover, .radio:hover, .check.is-hover, .radio.is-hover { border-color: var(--fg-tertiary); } .check:checked, .radio:checked, .check:indeterminate { background: var(--accent); border-color: var(--accent); } .check:checked::before { content: ""; width: 9px; height: 5px; border: 2px solid var(--on-accent); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); } .check:indeterminate::before { content: ""; width: 8px; height: 2px; background: var(--on-accent); } .radio:checked::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--on-accent); } .check:disabled, .radio:disabled { background: var(--bg-muted); border-color: var(--border-subtle); cursor: not-allowed; } .check:disabled:checked, .radio:disabled:checked { background: var(--border-strong); border-color: var(--border-strong); } .choice { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-body); cursor: pointer; } .choice.is-disabled { color: var(--fg-disabled); cursor: not-allowed; } .toggle { appearance: none; width: 36px; height: 20px; margin: 0; flex: none; position: relative; cursor: pointer; border: 0; border-radius: var(--r-full); background: var(--bg-inset); transition: background-color var(--dur-base) var(--ease-standard); } .toggle::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-elevated); box-shadow: var(--shadow-sm); transition: translate var(--dur-base) var(--ease-standard); } .toggle:hover, .toggle.is-hover { background: var(--border-strong); } .toggle:checked { background: var(--toggle-on); } .toggle:checked:hover { background: var(--toggle-on); } .toggle:checked::before { translate: 16px 0; background: var(--toggle-on-knob); box-shadow: none; } .toggle:disabled { background: var(--bg-muted); cursor: not-allowed; } .toggle:disabled::before { background: var(--bg-canvas); box-shadow: none; } .toggle:disabled:checked { background: var(--border-strong); } /* ===================================================================== MENU (listbox do select customizado e menus de ação) ===================================================================== */ .menu { min-width: 220px; padding: var(--sp-1); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-popover); z-index: var(--z-dropdown); } .menu-item { display: flex; align-items: center; gap: var(--sp-2); height: 32px; padding: 0 var(--sp-2); border-radius: var(--r-sm); font-size: var(--text-body); color: var(--fg); cursor: pointer; } .menu-item:hover, .menu-item.is-hover { background: var(--bg-muted); } .menu-item[aria-selected="true"] { background: var(--accent-subtle); color: var(--accent-fg); font-weight: var(--w-medium); } .menu-item[aria-selected="true"] .icon.check-mark { color: var(--accent); margin-left: auto; } .menu-item[aria-disabled="true"] { color: var(--fg-disabled); cursor: not-allowed; } .menu-item.is-danger { color: var(--error-fg); } .menu-sep { height: 1px; margin: var(--sp-1) 0; background: var(--border-subtle); } .menu-label { padding: var(--sp-1-5) var(--sp-2) var(--sp-1); } /* ===================================================================== CARD, TABS, TOAST, BANNER, EMPTY, TOOLTIP, MODAL, PAGINAÇÃO, SKELETON, BREADCRUMB, FILTROS ===================================================================== */ .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); } .card-body { padding: var(--sp-4); } .card-footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-subtle); background: var(--bg-canvas); border-radius: 0 0 var(--r-lg) var(--r-lg); } .card-interactive { cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .card-interactive:hover, .card-interactive.is-hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .card-interactive[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .card-flat { border: 0; background: var(--bg-canvas); } .stat { display: flex; flex-direction: column; gap: var(--sp-1); } /* .stat-value-lg: número com grifo amarelo. Só site e marketing; em sistema e painel usar .kpi-value (sem grifo). */ .stat-value-lg { font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: var(--w-medium); color: var(--fg); display: inline-block; background: linear-gradient(transparent 70%, var(--accent-highlight) 70%); } .hl { background: var(--accent-highlight); color: var(--fg); padding: 0 0.12em; margin: 0 -0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .stat-value { font-size: var(--text-title); line-height: var(--lh-title); letter-spacing: var(--track-title); font-weight: var(--w-medium); } .tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); } .tab { display: inline-flex; align-items: center; gap: var(--sp-2); height: 36px; padding: 0 var(--sp-3); margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--fg-secondary); font-size: var(--text-body); font-weight: var(--w-medium); cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-base) var(--ease-standard); } .tab:hover, .tab.is-hover { color: var(--fg); } .tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); } .tab:disabled { color: var(--fg-disabled); cursor: not-allowed; } .tab .badge-count { background: var(--bg-inset); color: var(--fg-secondary); } .tab[aria-selected="true"] .badge-count { background: var(--accent-subtle-strong); color: var(--accent-fg); } .tab-panel { padding: var(--sp-4) 0; } .toast { display: flex; gap: var(--sp-3); align-items: flex-start; width: 380px; max-width: 100%; padding: var(--sp-3) var(--sp-4); background: var(--bg-inverse); color: var(--fg-inverse); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); font-size: var(--text-body); line-height: var(--lh-body); } .toast .icon { margin-top: 2px; } .toast[data-tone="success"] .icon { color: var(--success-border); } .toast[data-tone="error"] .icon { color: var(--error-border); } .toast[data-tone="warning"] .icon { color: var(--warning-border); } .toast-title { font-weight: var(--w-medium); } .toast-body { color: var(--fg-inverse-secondary); font-size: var(--text-body-sm); line-height: var(--lh-body-sm); margin-top: 2px; } .toast-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); } .toast-actions a, .toast-actions button { color: var(--fg-inverse); background: none; border: 0; padding: 0; font-size: var(--text-body-sm); font-weight: var(--w-medium); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .toast .close { margin-left: auto; color: var(--fg-inverse-tertiary); background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; } .toast .close:hover { color: var(--fg-inverse); } .toast-stack { position: fixed; right: var(--sp-6); bottom: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); z-index: var(--z-toast); } .toast.is-entering { animation: toast-in var(--dur-enter) var(--ease-out); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .banner { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--banner-border); background: var(--banner-bg); color: var(--banner-fg); border-radius: var(--r-md); font-size: var(--text-body); line-height: var(--lh-body); } .banner .icon { margin-top: 2px; } .banner-title { font-weight: var(--w-medium); } .banner p { color: inherit; } .banner[data-tone="error"] { --banner-bg: var(--error-bg); --banner-border: var(--error-border); --banner-fg: var(--error-fg); } .banner[data-tone="warning"] { --banner-bg: var(--warning-bg); --banner-border: var(--warning-border); --banner-fg: var(--warning-fg); } .banner[data-tone="success"] { --banner-bg: var(--success-bg); --banner-border: var(--success-border); --banner-fg: var(--success-fg); } .banner[data-tone="info"] { --banner-bg: var(--info-bg); --banner-border: var(--info-border); --banner-fg: var(--info-fg); } .banner .banner-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); } .empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-12) var(--sp-6); } .empty .icon { color: var(--fg-tertiary); margin-bottom: var(--sp-2); } .empty p { color: var(--fg-tertiary); max-width: var(--measure-sm); } .empty .actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); } .tooltip { display: inline-block; max-width: 240px; padding: var(--sp-1) var(--sp-2); background: var(--bg-inverse); color: var(--fg-inverse); border-radius: var(--r-sm); box-shadow: var(--shadow-md); font-size: var(--text-caption); line-height: var(--lh-caption); letter-spacing: var(--track-caption); z-index: var(--z-tooltip); } .has-tip { position: relative; } .has-tip .tooltip { position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 0; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-standard); transition-delay: 0ms; } .has-tip:hover .tooltip, .has-tip:focus-within .tooltip { opacity: 1; transition-delay: 300ms; } .tooltip .kbd { display: inline-block; margin-left: var(--sp-1); padding: 0 4px; border: 1px solid var(--border-inverse); border-radius: var(--r-xs); font-size: var(--text-micro); } .modal-overlay { position: fixed; inset: 0; background: var(--bg-overlay); z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); } .modal { width: min(560px, 100%); background: var(--bg-elevated); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); z-index: var(--z-modal); display: flex; flex-direction: column; max-height: calc(100vh - 2 * var(--sp-8)); } .modal-sm { width: min(400px, 100%); } .modal-lg { width: min(800px, 100%); } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-subtle); } .modal-body { padding: var(--sp-6); overflow: auto; } .modal-footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); border-top: 1px solid var(--border-subtle); } .modal-footer .at-start { margin-right: auto; } .modal.is-entering { animation: modal-in var(--dur-enter) var(--ease-out); } @keyframes modal-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } } .pagination { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-body-sm); color: var(--fg-secondary); } .pagination .pages { display: flex; gap: var(--sp-0-5); } .page { min-width: 28px; height: 28px; padding: 0 var(--sp-1-5); border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--fg-secondary); font-size: var(--text-body-sm); font-weight: var(--w-medium); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .page:hover, .page.is-hover { background: var(--bg-muted); color: var(--fg); } .page[aria-current="page"] { background: var(--accent-subtle); color: var(--accent-fg); border-color: var(--accent-border); } .page:disabled { color: var(--fg-disabled); cursor: not-allowed; background: none; } .page.ellipsis { pointer-events: none; } .pagination .spacer { flex: 1; } .pagination select.input { width: auto; } .skeleton { display: block; background: var(--bg-inset); border-radius: var(--r-xs); animation: pulse 1.4s var(--ease-standard) infinite; } .skeleton-text { height: 12px; } .skeleton-title { height: 16px; width: 40%; } .skeleton-pill { height: 20px; width: 72px; border-radius: var(--r-full); } .skeleton-circle { border-radius: 50%; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .crumbs { display: flex; align-items: center; gap: var(--sp-1-5); font-size: var(--text-body-sm); line-height: var(--lh-body-sm); color: var(--fg-tertiary); } .crumbs a { color: var(--fg-tertiary); text-decoration: none; } .crumbs a:hover { color: var(--fg); text-decoration: underline; } .crumbs .icon { color: var(--border-strong); } .crumbs .current { color: var(--fg); font-weight: var(--w-medium); overflow: hidden; text-overflow: ellipsis; max-width: 280px; } .crumbs .truncate { max-width: 160px; display: inline-block; vertical-align: bottom; } .filterbar { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--filterbar-h); flex-wrap: wrap; } .filterbar .input-wrap { width: 280px; } .filterbar .spacer { flex: 1; } .chip { display: inline-flex; align-items: center; gap: var(--sp-1-5); height: var(--control-sm); padding: 0 var(--sp-2) 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-full); background: var(--bg-elevated); color: var(--fg-secondary); font-size: var(--text-body-sm); font-weight: var(--w-medium); cursor: pointer; white-space: nowrap; transition: border-color var(--dur-fast), background-color var(--dur-fast); } .chip:hover, .chip.is-hover { border-color: var(--border-strong); color: var(--fg); } .chip[aria-pressed="true"], .chip.is-applied { background: var(--accent-subtle); border-color: var(--accent-border); color: var(--accent-fg); } .chip .icon { color: inherit; } .chip .val { color: var(--fg); font-weight: var(--w-regular); } .chip[aria-pressed="true"] .val, .chip.is-applied .val { color: var(--accent-fg); } .chip .x { display: inline-flex; border-radius: 50%; padding: 1px; } .chip .x:hover { background: var(--accent-subtle-strong); } .seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elevated); padding: 2px; gap: 2px; } .seg button { height: 22px; padding: 0 var(--sp-2); border: 0; border-radius: var(--r-sm); background: none; color: var(--fg-secondary); font-size: var(--text-caption); font-weight: var(--w-medium); cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-1); } .seg button[aria-pressed="true"] { background: var(--bg-inset); color: var(--fg); } /* ===================================================================== DATA TABLE (flagship) ===================================================================== */ .table-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-elevated); overflow: auto; position: relative; } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-body-sm); line-height: var(--lh-body-sm); letter-spacing: var(--track-body-sm); } .table th { position: sticky; top: 0; z-index: var(--z-sticky); height: var(--row-dense); padding: 0 var(--sp-3); background: var(--bg-subtle); border-bottom: 1px solid var(--border); text-align: left; font-size: var(--text-micro); line-height: var(--lh-micro); letter-spacing: var(--track-micro); font-weight: var(--w-semibold); text-transform: uppercase; color: var(--fg-secondary); white-space: nowrap; } .table th.sortable { cursor: pointer; user-select: none; } .table th.sortable:hover { color: var(--fg); } .table th .th-inner { display: inline-flex; align-items: center; gap: var(--sp-1); } .table th .sort { color: var(--border-strong); } .table th[aria-sort] { color: var(--fg); } .table th[aria-sort] .sort { color: var(--accent); } .table td { height: var(--row-dense); padding: 0 var(--sp-3); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; color: var(--fg); white-space: nowrap; background: var(--bg-elevated); transition: background-color var(--dur-fast); } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover td, .table tbody tr.is-hover td { background: var(--bg-muted); } .table tbody tr[aria-selected="true"] td { background: var(--accent-subtle); } .table tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 var(--selection-mark); } .table tbody tr[aria-selected="true"]:hover td { background: var(--accent-subtle-strong); } .table tbody tr.is-focus td { box-shadow: inset 0 0 0 1px var(--accent); } .table .col-check { width: 40px; padding-right: 0; } .table .col-end { text-align: right; } .table .col-end .th-inner { flex-direction: row-reverse; } .table .col-num { font-variant-numeric: tabular-nums; } .table .col-text { white-space: normal; max-width: 320px; } .table .col-text .truncate { display: block; } .table .col-actions { width: 44px; text-align: right; padding-left: 0; } .table .col-actions .btn { color: var(--fg-tertiary); } .table tbody tr:hover .col-actions .btn { color: var(--fg); } .table .secondary { color: var(--fg-secondary); } .table .muted { color: var(--fg-tertiary); } .table .overdue { color: var(--error-fg); font-weight: var(--w-medium); } .table .due-today { color: var(--warning-fg); font-weight: var(--w-medium); } .table[data-density="comfortable"] { font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: var(--track-body); } .table[data-density="comfortable"] th { height: var(--row-comfortable); padding: 0 var(--sp-4); } .table[data-density="comfortable"] td { height: var(--row-comfortable); padding: 0 var(--sp-4); } .table .row-link { color: var(--fg); text-decoration: none; font-weight: var(--w-medium); } .table .row-link:hover { text-decoration: underline; } .table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border); background: var(--bg-canvas); } .table-toolbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--accent-subtle); border-bottom: 1px solid var(--accent-border); font-size: var(--text-body-sm); color: var(--accent-fg); } .table-toolbar strong { font-weight: var(--w-semibold); } /* ===================================================================== APP SHELL, SIDEBAR, PAGE HEADER ===================================================================== */ .shell[data-sidebar="collapsed"] { grid-template-columns: var(--sidebar-w-collapsed) 1fr; } .sidebar { grid-row: 1 / 3; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; transition: width var(--dur-slow) var(--ease-standard); } .sidebar-brand { height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4); border-bottom: 1px solid var(--border-subtle); } .sidebar-nav .badge-count { background: var(--nav-count-bg); color: var(--nav-count-fg); } .progress { height: 4px; background: var(--bg-inset); border-radius: 2px; overflow: hidden; } .progress > i { display: block; height: 100%; background: var(--progress-fill); border-radius: 2px; transition: width var(--dur-base) var(--ease-standard); } .progress.is-indeterminate > i { width: 30%; animation: progress-slide 1.2s var(--ease-standard) infinite; } @keyframes progress-slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } } .sidebar-nav { padding: var(--sp-2); display: flex; flex-direction: column; gap: 1px; } .sidebar-group { padding: var(--sp-3) var(--sp-2) var(--sp-1); } .nav-item { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 var(--sp-2) 0 10px; border-radius: var(--r-md); color: var(--fg-secondary); font-size: var(--text-body); font-weight: var(--w-medium); text-decoration: none; white-space: nowrap; overflow: hidden; transition: background-color var(--dur-fast), color var(--dur-fast); } .nav-item:hover, .nav-item.is-hover { background: var(--bg-inset); color: var(--fg); } .nav-item[aria-current="page"] { background: var(--accent-subtle); color: var(--accent-fg); } .nav-item[aria-current="page"] .icon { color: var(--accent); } .nav-item .badge-count { margin-left: auto; } .nav-item .icon { color: var(--fg-tertiary); } .nav-item:hover .icon { color: var(--fg); } .shell[data-sidebar="collapsed"] .nav-item { position: relative; justify-content: center; padding: 0; } .shell[data-sidebar="collapsed"] .nav-item span, .shell[data-sidebar="collapsed"] .sidebar-group, .shell[data-sidebar="collapsed"] .nav-item .badge-count { display: none; } .shell[data-sidebar="collapsed"] .sidebar-brand { justify-content: center; padding: 0; } .sidebar-foot { margin-top: auto; padding: var(--sp-2); border-top: 1px solid var(--border-subtle); } .topbar { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); border-bottom: 1px solid var(--border); background: var(--bg-canvas); } .topbar .spacer { flex: 1; } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-inset); color: var(--fg-secondary); display: inline-grid; place-content: center; font-size: var(--text-caption); font-weight: var(--w-semibold); } .content { padding: var(--content-pad); min-width: 0; max-width: var(--content-max); z-index: var(--z-base); overflow: auto; min-height: 0; } .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); min-height: var(--page-header-h); padding-bottom: var(--sp-4); } .page-header .actions { display: flex; gap: var(--sp-2); } .page-header .title-block { display: flex; flex-direction: column; gap: var(--sp-1); } .kbd { display: inline-block; padding: 0 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--r-sm); background: var(--bg-elevated); font-size: var(--text-caption); line-height: 18px; color: var(--fg-secondary); } /* ===================================================================== CHROME DESTA DOCUMENTAÇÃO (não faz parte do produto) ===================================================================== */ .topnav-inner { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-6); height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; } .topnav-inner::-webkit-scrollbar { display: none; } .topnav .brand { margin-right: var(--sp-4); white-space: nowrap; display: flex; align-items: center; gap: var(--sp-2); } .topnav .brand small { font-size: var(--text-caption); color: var(--fg-tertiary); font-weight: var(--w-medium); } .logo-spec { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .logo-stage { display: flex; align-items: center; justify-content: center; min-height: 150px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-elevated); } .logo-stage.dark { background: var(--stone-950); border-color: var(--stone-800); } .axyia-colors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); } .axyia-colors .sw-color { height: 88px; } @media (max-width: 900px) { .axyia-colors { grid-template-columns: repeat(2, 1fr); } } .topnav a:hover { color: var(--fg); } .wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-6); } .ds-section { padding: var(--sp-16) 0; border-top: 1px solid var(--border); scroll-margin-top: var(--topbar-h); } .ds-section-head { margin-bottom: var(--sp-8); max-width: var(--measure); } .ds-section-head .eyebrow { margin-bottom: var(--sp-2); } .ds-section-head p { color: var(--fg-secondary); margin-top: var(--sp-2); } .ds-sub { margin: var(--sp-10) 0 var(--sp-3); display: flex; align-items: baseline; gap: var(--sp-3); } .ds-sub p { color: var(--fg-tertiary); font-size: var(--text-body-sm); } .ds-note { font-size: var(--text-body-sm); color: var(--fg-secondary); max-width: var(--measure); margin: var(--sp-2) 0 var(--sp-4); } .panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); } .panel + .panel { margin-top: var(--sp-4); } .panel-canvas { background: var(--bg-canvas); } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } @media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .states { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; } .state { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; } .state > .eyebrow { color: var(--fg-tertiary); } .spec-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-5); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border-subtle); } .spec-row:last-child { border-bottom: 0; } .spec-name { font-size: var(--text-caption); color: var(--fg-tertiary); font-family: var(--font-code); } .spec-meta { font-size: var(--text-caption); font-family: var(--font-code); color: var(--fg-tertiary); white-space: nowrap; text-align: right; } .spec-meta.spec-bad { color: var(--error-fg); font-weight: var(--w-semibold); } .spec-use { font-size: var(--text-caption); color: var(--fg-tertiary); margin-top: 2px; } pre.snippet { margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4); background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--r-md); font-family: var(--font-code); font-size: var(--text-caption); line-height: 1.6; color: var(--fg-secondary); overflow-x: auto; white-space: pre; tab-size: 2; } code { font-family: var(--font-code); font-size: 0.92em; background: var(--bg-subtle); padding: 1px 5px; border-radius: var(--r-xs); color: var(--fg-secondary); } .doc-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); line-height: var(--lh-body-sm); } .doc-table th { text-align: left; font-size: var(--text-micro); line-height: var(--lh-micro); letter-spacing: var(--track-micro); text-transform: uppercase; font-weight: var(--w-semibold); color: var(--fg-secondary); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); background: var(--bg-subtle); } .doc-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-subtle); vertical-align: top; } .doc-table code { white-space: nowrap; } .doc-table .ok { color: var(--success-fg); font-weight: var(--w-medium); } .doc-table .warn { color: var(--warning-fg); font-weight: var(--w-medium); } .doc-table .bad { color: var(--error-fg); font-weight: var(--w-medium); } .sw { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; background: var(--bg-elevated); } .sw-color { height: 56px; } .sw-info { padding: var(--sp-2) var(--sp-2) var(--sp-2); display: flex; flex-direction: column; gap: 1px; } .sw-name { font-size: var(--text-caption); font-weight: var(--w-medium); color: var(--fg); } .sw-hex { font-size: var(--text-micro); font-family: var(--font-code); color: var(--fg-tertiary); letter-spacing: 0; text-transform: none; } .sw-use { font-size: var(--text-micro); color: var(--fg-tertiary); letter-spacing: 0; text-transform: none; line-height: 1.4; } .sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--sp-3); } .do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .do-dont .panel { border-top: 3px solid var(--success-solid); } .do-dont .panel.dont { border-top-color: var(--error-solid); } .do-dont .tag { display: inline-flex; gap: var(--sp-1); align-items: center; margin-bottom: var(--sp-3); } .stack { display: flex; flex-direction: column; gap: var(--sp-3); } .row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; } .demo-stage { border: 1px dashed var(--border-strong); border-radius: var(--r-md); min-height: 64px; display: flex; align-items: center; justify-content: center; padding: var(--sp-3); background: var(--bg-canvas); overflow: hidden; position: relative; } .motion-card { display: flex; flex-direction: column; gap: var(--sp-3); } .motion-card .eyebrow { display: flex; justify-content: space-between; } .motion-card .spec-meta { text-align: left; } .audit { margin: var(--sp-8) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--text-body-sm); } .audit[data-tone="ok"] { background: var(--success-bg); color: var(--success-fg); border: 1px solid var(--success-border); } .audit[data-tone="bad"] { background: var(--error-bg); color: var(--error-fg); border: 1px solid var(--error-border); } .icon-cell { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2); border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--bg-elevated); text-align: center; } .icon-cell .name { font-size: var(--text-micro); font-family: var(--font-code); text-transform: none; letter-spacing: 0; color: var(--fg-tertiary); word-break: break-all; line-height: 1.3; } .ba { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); } .ba-cell { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--bg-elevated); } .ba-cell .arrow { color: var(--border-strong); } .ba-cell .side { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); } .ba-cell .name { font-size: 10px; font-family: var(--font-code); color: var(--fg-tertiary); text-align: center; word-break: break-all; line-height: 1.2; } .ba-cell .name.bad { color: var(--error-fg); } .ba-cell .name.good { color: var(--success-fg); } .ba-cell .cx { font-size: 10px; color: var(--fg-tertiary); font-family: var(--font-code); } @media (max-width: 1100px) { .ba { grid-template-columns: repeat(2, 1fr); } } .bp-strip { display: flex; flex-direction: column; gap: var(--sp-1-5); } .bp-strip .bar { height: 22px; border-radius: var(--r-sm); background: var(--accent-subtle); border: 1px solid var(--accent-border); display: flex; align-items: center; padding: 0 var(--sp-2); font-size: var(--text-caption); color: var(--accent-fg); white-space: nowrap; } .bp-strip .bp-md { width: calc(var(--bp-md) / 2); } .bp-strip .bp-lg { width: calc(var(--bp-lg) / 2); } .bp-strip .bp-target { width: calc(var(--bp-target) / 2); background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .bp-strip .bp-xl { width: calc(var(--bp-xl) / 2); } .fold { position: relative; width: 100%; max-width: var(--bp-target); aspect-ratio: 1366 / 633; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-canvas); overflow: hidden; font-size: var(--text-caption); color: var(--fg-secondary); } .fold > div { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border-strong); background: var(--bg-elevated); text-align: center; padding: 2px; line-height: 1.3; } .fold .f-side { left: 0; top: 0; bottom: 0; width: 17.57%; background: var(--bg-sidebar); border-style: solid; } .fold .f-top { left: 17.57%; right: 0; top: 0; height: 7.58%; background: var(--bg-canvas); border-style: solid; } .fold .f-head { left: 19.33%; right: 1.76%; top: 11.4%; height: 8.85%; } .fold .f-filter { left: 19.33%; right: 1.76%; top: 22.75%; height: 6.32%; } .fold .f-th { left: 19.33%; right: 1.76%; top: 31%; height: 5.06%; background: var(--bg-subtle); } .fold .f-rows { left: 19.33%; right: 1.76%; top: 36.06%; height: 60.66%; background: repeating-linear-gradient(to bottom, var(--bg-elevated) 0, var(--bg-elevated) calc(100% / 12 - 1px), var(--border-subtle) calc(100% / 12 - 1px), var(--border-subtle) calc(100% / 12)); } .fold .f-pag { left: 19.33%; right: 1.76%; bottom: 0; height: 6.32%; background: var(--bg-canvas); } .cover { min-height: calc(100vh - var(--topbar-h)); min-height: min(calc(100vh - var(--topbar-h)), 760px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-12); align-items: center; padding: var(--sp-16) 0; } .cover-title { font-family: var(--font-display); font-size: var(--text-hero); line-height: var(--lh-hero); letter-spacing: var(--track-hero); font-weight: var(--w-semibold); max-width: 16ch; } .cover-lead { font-size: var(--text-body-lg); line-height: var(--lh-body-lg); color: var(--fg-secondary); max-width: var(--measure-sm); margin-top: var(--sp-5); } .cover-meta div { display: flex; flex-direction: column; gap: 2px; } .cover-meta .eyebrow { color: var(--fg-tertiary); } .cover-specimen { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-md); overflow: hidden; } .cover-specimen .bar { display: flex; align-items: center; gap: var(--sp-2); height: 40px; padding: 0 var(--sp-4); border-bottom: 1px solid var(--border-subtle); background: var(--bg-subtle); } .cover-specimen .bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); display: block; } .cover-swatches { display: flex; gap: var(--sp-1); padding: var(--sp-4) var(--sp-4) 0; } .cover-swatches i { flex: 1; height: 28px; border-radius: var(--r-sm); border: 1px solid var(--border-subtle); display: block; } @media (max-width: 900px) { .cover { grid-template-columns: 1fr; } .do-dont { grid-template-columns: 1fr; } .spec-row { grid-template-columns: 1fr; gap: var(--sp-1); } } .site { background: var(--bg-canvas); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; } .site-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-8); border-bottom: 1px solid var(--border-subtle); } .site-nav .links { display: flex; gap: var(--sp-6); font-size: var(--text-body); color: var(--fg-secondary); } .site-hero { padding: var(--sp-16) var(--sp-8) var(--sp-12); max-width: 760px; } .site-hero h2 { font-family: var(--font-display); font-size: var(--text-hero); line-height: var(--lh-hero); letter-spacing: var(--track-hero); font-weight: var(--w-semibold); } .site .btn { border-radius: var(--r-lg); } [data-surface="site-dark"] { background: var(--bg-canvas); color: var(--fg); } [data-surface="site-dark"] .btn-secondary { background: transparent; color: var(--fg); border-color: var(--border); } [data-surface="site-dark"] .btn-secondary:hover { background: var(--bg-elevated); } [data-surface="site-dark"] .eyebrow { color: var(--fg-secondary); } [data-surface="site-dark"] .hl { background: linear-gradient(transparent 74%, var(--accent-highlight) 74%); color: var(--fg); padding: 0; margin: 0; } [data-surface="site-dark"] .stat-value-lg { color: var(--accent-highlight); background: none; } .eyebrow-line::before { content: ""; display: inline-block; width: 24px; height: 2px; background: var(--accent-highlight); vertical-align: middle; margin-right: var(--sp-2); } .site-hero p { font-size: var(--text-body-lg); line-height: var(--lh-body-lg); color: var(--fg-secondary); max-width: var(--measure-sm); margin-top: var(--sp-5); } .site-hero .actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-8); } .site-feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); padding: var(--sp-12) var(--sp-8); border-top: 1px solid var(--border-subtle); background: var(--bg-elevated); } .site-feature h3 { font-family: var(--font-display); font-size: var(--text-title-lg); line-height: var(--lh-title-lg); letter-spacing: var(--track-title-lg); font-weight: var(--w-semibold); } .site-feature p { color: var(--fg-secondary); margin-top: var(--sp-3); max-width: var(--measure-sm); } .site-feature ul { margin: var(--sp-4) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); } .site-feature li { display: flex; gap: var(--sp-2); align-items: flex-start; } .site-feature li .icon { color: var(--accent); margin-top: 2px; } .site-cta { padding: var(--sp-12) var(--sp-8); text-align: center; background: var(--bg-inverse); color: var(--fg-inverse); } .site-cta h3 { font-family: var(--font-display); font-size: var(--text-title-lg); line-height: var(--lh-title-lg); letter-spacing: var(--track-title-lg); font-weight: var(--w-semibold); } .site-cta p { color: var(--fg-inverse-tertiary); margin: var(--sp-3) auto 0; max-width: var(--measure-sm); } .site-cta .actions { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); } /* ===================================================================== DADOS E GRÁFICOS : SVG e CSS puros lendo --chart-* ===================================================================== */ .chart { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; } .chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); } .chart-title { font-size: var(--text-body); font-weight: var(--w-medium); color: var(--fg); } .chart-meta { font-size: var(--text-caption); color: var(--fg-tertiary); } .chart svg { width: 100%; height: auto; display: block; overflow: visible; } .chart .grid line { stroke: var(--chart-grid); stroke-width: 1; } .chart .axis text { fill: var(--chart-axis); font-size: 11px; font-family: var(--font-sans); } .chart .bar { fill: var(--chart-1); } .chart .bar.is-highlight { fill: var(--chart-highlight); } .chart .bar.is-muted { fill: var(--chart-3); } .chart .line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .chart .line-2 { stroke: var(--chart-2); } .chart .area { fill: var(--chart-area); } .chart .dot { fill: var(--bg-elevated); stroke: var(--chart-1); stroke-width: 2; } .chart .dot.is-highlight { fill: var(--chart-highlight); } .chart .value { fill: var(--fg); font-size: 11px; font-weight: var(--w-medium); font-family: var(--font-sans); font-variant-numeric: tabular-nums; } .chart .value.on-highlight { font-weight: var(--w-semibold); } .chart .ref { stroke: var(--chart-ref); stroke-width: 1; stroke-dasharray: 3 3; } .chart .ref-label { fill: var(--chart-axis); font-size: 11px; font-family: var(--font-sans); } .hbars { display: grid; grid-template-columns: var(--hbars-label) minmax(0, 1fr) max-content; gap: var(--sp-2) var(--sp-3); align-items: center; font-size: var(--text-body-sm); } .hbars .lbl { color: var(--fg-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbars .trk { height: 12px; background: var(--bg-inset); border-radius: 2px; overflow: hidden; } .hbars .trk > i { display: block; height: 100%; background: var(--chart-1); } .hbars .trk.is-highlight > i { background: var(--chart-highlight); } .hbars .trk.is-muted > i { background: var(--chart-3); } .hbars .val { font-variant-numeric: tabular-nums; color: var(--fg); text-align: right; } /* composição (partes de um todo): cada parte vira uma linha de .hbars; várias carteiras viram tabela com .cell-bar. Empilhada não existe nesta base. */ .cell-bar { display: flex; align-items: center; gap: var(--sp-2); } .cell-bar .trk { flex: 1; min-width: 48px; height: 8px; background: var(--bg-inset); border-radius: 2px; overflow: hidden; } .cell-bar .trk > i { display: block; height: 100%; background: var(--chart-1); } .cell-bar .trk.is-highlight > i { background: var(--chart-highlight); } .cell-bar .pc { width: 36px; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-caption); } .legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--text-caption); color: var(--fg-secondary); } .legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: var(--sp-1); background: var(--chart-1); } .legend span[data-s="2"]::before { background: var(--chart-2); } .legend span[data-s="3"]::before { background: var(--chart-3); } .legend span[data-s="4"]::before { background: var(--chart-4); } .legend span[data-s="hl"]::before { background: var(--chart-highlight); } .kpi { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; } .kpi-value { font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; color: var(--fg); } .kpi-delta { font-size: var(--text-caption); color: var(--fg-secondary); display: flex; gap: var(--sp-1); align-items: center; } .kpi-delta.is-good { color: var(--chart-positive); } .kpi-delta.is-bad { color: var(--chart-negative); } .kpi-delta .icon { width: 12px; height: 12px; } .spark { width: 100%; height: 28px; display: block; margin-top: var(--sp-2); } .spark polyline { fill: none; stroke: var(--chart-2); stroke-width: 1.5; stroke-linejoin: round; } .spark circle { fill: var(--chart-highlight); stroke: var(--chart-1); stroke-width: 1.5; } .dash { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } .dash .span-2 { grid-column: span 2; } .dash .span-4 { grid-column: span 4; } .data-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); } .data-swatches .ds-sw { height: 40px; border-radius: var(--r-md); border: 1px solid var(--border-subtle); } .data-swatches .ds-name { font-size: var(--text-caption); color: var(--fg-secondary); margin-top: var(--sp-1); display: block; } .chart-skeleton { display: flex; align-items: flex-end; gap: var(--sp-2); height: 120px; } .chart-skeleton i { flex: 1; background: var(--bg-inset); border-radius: 2px; animation: skeleton-pulse 1.2s var(--ease-standard) infinite; } .chart-empty { height: 120px; display: grid; place-content: center; text-align: center; color: var(--fg-tertiary); font-size: var(--text-body-sm); border: 1px dashed var(--border); border-radius: var(--r-md); } /* ===================================================================== DOCUMENTOS E PROPOSTAS : páginas A4 e slides 16:9 em miniatura ===================================================================== */ .doc-pages { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; } .doc-page { aspect-ratio: 210 / 297; background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 40px 44px; display: flex; flex-direction: column; gap: var(--sp-3); font-size: 11px; line-height: 1.5; color: var(--fg); min-width: 0; } .doc-page.dark { background: var(--stone-950); color: var(--axyia-papel); border-color: var(--stone-800); --logo-selo-bg: var(--axyia-papel); --logo-selo-fg: var(--axyia-logo); } .doc-page.dark .logo { color: var(--axyia-papel); } .doc-page .doc-title { font-size: 26px; line-height: 1.1; letter-spacing: var(--track-display); font-weight: var(--w-semibold); margin: 0; max-width: 20ch; } .doc-page .doc-h2 { font-size: 15px; line-height: 1.25; font-weight: var(--w-semibold); margin: var(--sp-2) 0 0; } .doc-page .doc-h3 { font-size: 11px; font-weight: var(--w-semibold); margin: var(--sp-2) 0 0; } .doc-page p { margin: 0; } .doc-page .doc-muted { color: var(--fg-secondary); } .doc-page.dark .doc-muted { color: var(--stone-400); } .doc-page .doc-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--sp-2); font-size: 9px; color: var(--fg-tertiary); } .doc-page .doc-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: var(--fg-tertiary); border-top: 1px solid var(--border-subtle); padding-top: var(--sp-2); } .doc-page.dark .doc-foot { border-color: var(--stone-800); color: var(--stone-400); } .doc-page .filete { width: 32px; height: 3px; background: var(--accent-highlight); } .doc-page .dp-table { width: 100%; border-collapse: collapse; font-size: 10px; } .doc-page .dp-table th { text-align: left; font-size: 8px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-tertiary); padding: 4px 0; border-bottom: 1px solid var(--border); font-weight: var(--w-semibold); } .doc-page .dp-table td { padding: 5px 0; border-bottom: 1px solid var(--border-subtle); vertical-align: top; } .doc-page .dp-table td.num, .doc-page .dp-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .doc-page .dp-table tr.total td { font-weight: var(--w-semibold); border-bottom: 0; border-top: 1px solid var(--border-strong); } .mark-y { background: var(--accent-highlight); padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .doc-page .doc-kpis { display: flex; gap: var(--sp-5); margin-top: var(--sp-2); } .doc-page .doc-kpis b { display: block; font-size: 18px; font-weight: var(--w-medium); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .doc-page .doc-kpis span { font-size: 9px; color: var(--fg-secondary); } .doc-page.dark .doc-kpis b { color: var(--accent-highlight); } .slides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .slide { aspect-ratio: 16 / 9; background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 28px 32px; display: flex; flex-direction: column; gap: var(--sp-2); font-size: 11px; color: var(--fg); min-width: 0; } .slide.dark { background: var(--stone-950); color: var(--axyia-papel); border-color: var(--stone-800); } .slide.dark .logo { color: var(--axyia-papel); } .slide .slide-title { font-size: 22px; line-height: 1.1; letter-spacing: var(--track-display); font-weight: var(--w-semibold); margin: 0; max-width: 22ch; } .slide .slide-foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 9px; color: var(--fg-tertiary); } .slide.dark .slide-foot { color: var(--stone-400); } .slide ul { margin: 0; padding-left: 14px; display: flex; flex-direction: column; gap: 2px; } .slide .big { font-size: 34px; font-weight: var(--w-medium); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .slide.dark .big { color: var(--accent-highlight); } .spec-table td:first-child { white-space: nowrap; font-weight: var(--w-medium); } .sig { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.4; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elevated); max-width: 360px; } .sig .sig-name { font-weight: var(--w-semibold); } .sig .sig-role { color: var(--fg-secondary); } .sig .logo { margin-top: var(--sp-2); } .sig .sig-links { color: var(--fg-tertiary); font-size: var(--text-caption); } /* ===================================================================== MIGRAÇÃO : antes/depois e passos ===================================================================== */ .before-after { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: stretch; } .before-after .ba { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; } .before-after .snippet { margin: 0; flex: 1; } .before-after .ba-demo { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px dashed var(--border); border-radius: var(--r-md); min-height: 52px; } .steps { counter-reset: step; display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; } .steps > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-3); } .steps > li::before { counter-increment: step; content: counter(step); width: 28px; height: 28px; border-radius: var(--r-full); background: var(--bg-inverse); color: var(--fg-inverse); display: grid; place-content: center; font-size: var(--text-body-sm); font-weight: var(--w-semibold); } .steps .step-title { font-weight: var(--w-medium); color: var(--fg); display: block; margin-bottom: var(--sp-1); } .steps .snippet { margin-top: var(--sp-2); } /* ===================================================================== v2.1 COMPORTAMENTO : menu de ações, painel lateral, menu lateral completo, busca global, notificações, tabela (detalhe, edição, coluna congelada) ===================================================================== */ .menu[role="menu"], .menu.is-popover { position: absolute; min-width: var(--menu-w); z-index: var(--z-dropdown); transform-origin: top left; animation: menu-in var(--dur-base) var(--ease-out); } .menu.is-static { position: static; display: inline-block; animation: none; min-width: var(--menu-w); } .menu .menu-item { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; } .menu .menu-item:hover, .menu .menu-item.is-hover { background: var(--bg-muted); } .menu .menu-item .icon { color: var(--fg-tertiary); } .menu .menu-item:hover .icon, .menu .menu-item.is-danger .icon { color: inherit; } .menu .menu-item .kbd { margin-left: auto; } .menu .menu-item[aria-checked="true"] { font-weight: var(--w-medium); } .menu .menu-item[aria-checked="true"] .check-mark { margin-left: auto; color: var(--accent); } .menu-head { padding: var(--sp-1-5) var(--sp-2) var(--sp-1); font-size: var(--text-micro); line-height: var(--lh-micro); letter-spacing: var(--track-micro); font-weight: var(--w-semibold); text-transform: uppercase; color: var(--fg-tertiary); } .menu-user { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); } .menu-user b { display: block; font-weight: var(--w-medium); line-height: 1.2; } .menu-user small { display: block; color: var(--fg-tertiary); font-size: var(--text-caption); } .has-menu { position: relative; display: inline-block; } .has-menu > .menu { top: calc(100% + 4px); left: 0; } .has-menu.at-end > .menu { left: auto; right: 0; transform-origin: top right; } @keyframes menu-in { from { opacity: 0; transform: scale(0.98) translateY(-2px); } to { opacity: 1; transform: none; } } .drawer { display: flex; flex-direction: column; width: var(--drawer-w); background: var(--bg-elevated); border-left: 1px solid var(--border); min-width: 0; } .drawer.drawer-lg { width: var(--drawer-w-lg); } .drawer-header { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--page-header-h); padding: 0 var(--sp-4); border-bottom: 1px solid var(--border-subtle); } .drawer-header .t-heading { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer-body { flex: 1; overflow: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); } .drawer-footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-subtle); } .shell[data-drawer="side"] { grid-template-columns: var(--sidebar-w) 1fr var(--drawer-w); } .shell[data-drawer="side"] .drawer { grid-column: 3; grid-row: 1 / 3; } .drawer-overlay { position: fixed; inset: 0; background: var(--bg-overlay); z-index: var(--z-overlay); display: flex; justify-content: flex-end; } .drawer-overlay .drawer { height: 100%; box-shadow: var(--shadow-lg); animation: drawer-in var(--dur-slow) var(--ease-out); } @keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } .dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-1-5) var(--sp-3); font-size: var(--text-body-sm); margin: 0; } .dl dt { color: var(--fg-tertiary); } .dl dd { margin: 0; color: var(--fg); } .timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--text-body-sm); } .timeline li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--sp-3); } .timeline .when { color: var(--fg-tertiary); font-variant-numeric: tabular-nums; } .demo-split { display: flex; height: 380px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--bg-canvas); } .demo-split > .demo-content { flex: 1; min-width: 0; padding: var(--sp-4); } .nav-group { display: flex; flex-direction: column; gap: 1px; } .nav-group > .nav-item .chev { margin-left: auto; color: var(--fg-tertiary); transition: transform var(--dur-base) var(--ease-standard); } .nav-group[aria-expanded="true"] > .nav-item .chev { transform: rotate(180deg); } .nav-sub { display: none; flex-direction: column; gap: 1px; padding-left: 30px; } .nav-group[aria-expanded="true"] > .nav-sub { display: flex; } .nav-sub .nav-item { height: 28px; padding-left: var(--sp-2); font-size: var(--text-body-sm); } .nav-item.is-parent-active { color: var(--fg); font-weight: var(--w-medium); } .nav-item.is-parent-active .icon { color: var(--fg); } .shell[data-sidebar="collapsed"] .nav-sub { display: none; } .tenant { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-1-5) var(--sp-2); margin: var(--sp-2) 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elevated); font: inherit; color: inherit; cursor: pointer; text-align: left; } .tenant:hover { border-color: var(--border-strong); } .tenant .tenant-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--w-medium); font-size: var(--text-body-sm); line-height: 1.2; } .tenant .tenant-name small { display: block; color: var(--fg-tertiary); font-size: var(--text-caption); font-weight: var(--w-regular); } .tenant > .icon { color: var(--fg-tertiary); } .shell[data-sidebar="collapsed"] .tenant { justify-content: center; padding: var(--sp-1-5) 0; } .shell[data-sidebar="collapsed"] .tenant .tenant-name, .shell[data-sidebar="collapsed"] .tenant > .icon { display: none; } .shell[data-sidebar="drawer"] { grid-template-columns: 1fr; } .shell[data-sidebar="drawer"] .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: var(--z-overlay); box-shadow: var(--shadow-lg); animation: sidebar-in var(--dur-slow) var(--ease-out); } .sidebar-scrim { position: fixed; inset: 0; background: var(--bg-overlay); z-index: calc(var(--z-overlay) - 1); } @keyframes sidebar-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } } .nav-item.has-tip .tooltip { left: calc(100% + 8px); bottom: auto; top: 50%; translate: 0 -50%; } .tooltip.is-shown { opacity: 1; } .palette { width: 100%; max-width: 560px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .palette > .input-wrap > .input { border: 0; border-radius: 0; height: 48px; font-size: var(--text-body-lg); box-shadow: none; } .palette > .input-wrap > .input:focus { box-shadow: none; } .palette-group { padding: var(--sp-1) 0; border-top: 1px solid var(--border-subtle); } .palette .menu-item { border-radius: 0; padding: 0 var(--sp-4); height: 36px; width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } .palette .menu-item:hover, .palette .menu-item.is-hover { background: var(--bg-muted); } .palette .menu-item .meta { margin-left: auto; color: var(--fg-tertiary); font-size: var(--text-caption); } .palette-foot { display: flex; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border-subtle); font-size: var(--text-caption); color: var(--fg-tertiary); } .notif { width: 100%; max-width: 360px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-popover); overflow: hidden; } .notif-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); } .notif-item { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); font-size: var(--text-body-sm); color: var(--fg-secondary); } .notif-item .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; } .notif-item[data-unread="true"] { color: var(--fg); } .notif-item[data-unread="true"] .dot { background: var(--accent); } .notif-item b { font-weight: var(--w-medium); } .notif-item .when { display: block; color: var(--fg-tertiary); font-size: var(--text-caption); margin-top: 2px; } .notif-foot { padding: var(--sp-2) var(--sp-4); text-align: center; } .table tr.is-expanded > td { border-bottom: 0; background: var(--bg-subtle); } .table tr.row-detail > td { background: var(--bg-subtle); padding: var(--sp-3) var(--sp-4) var(--sp-4) 44px; } .table tr.row-detail .dl { grid-template-columns: 140px minmax(0, 1fr) 140px minmax(0, 1fr); } .cell-edit { width: 100%; height: 26px; padding: 0 var(--sp-2); border: 1px solid var(--accent); border-radius: var(--r-sm); font: inherit; font-size: inherit; background: var(--bg-elevated); outline: 0; box-shadow: 0 0 0 3px var(--accent-subtle-strong); } .table-wrap.has-frozen th:first-child, .table-wrap.has-frozen td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-elevated); box-shadow: 1px 0 0 var(--border-subtle); } .table-wrap.has-frozen thead th:first-child { background: var(--bg-subtle); } /* ===================================================================== v2.1 PADRÕES DE TELA : estados de página, processo longo, formulário, autenticação, impressão ===================================================================== */ .page-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-12) var(--sp-6); } .page-state .icon { color: var(--fg-tertiary); margin-bottom: var(--sp-2); } .page-state p { color: var(--fg-tertiary); max-width: var(--measure-sm); } .page-state .actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); } .page-state .code { font-size: var(--text-micro); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--fg-tertiary); font-weight: var(--w-semibold); } .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--fg); border-radius: 50%; animation: spin 0.8s linear infinite; } .spinner-lg { width: 32px; height: 32px; } .offline-bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--bg-inverse); color: var(--fg-inverse); font-size: var(--text-body-sm); } .offline-bar .icon { color: inherit; } .offline-bar .btn { margin-left: auto; } .job { display: flex; flex-direction: column; gap: var(--sp-3); } .job-head { display: flex; align-items: center; gap: var(--sp-2); } .job-head .t-heading { flex: 1; min-width: 0; } .job-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font-size: var(--text-caption); color: var(--fg-tertiary); } .job-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1-5); font-size: var(--text-body-sm); } .job-steps li { display: flex; align-items: center; gap: var(--sp-2); color: var(--fg-tertiary); } .job-steps li .icon { color: inherit; } .job-steps li[data-state="done"] { color: var(--fg-secondary); } .job-steps li[data-state="done"] .icon { color: var(--success-solid); } .job-steps li[data-state="current"] { color: var(--fg); font-weight: var(--w-medium); } .job-steps li[data-state="failed"] { color: var(--error-fg); } .job-steps li .spinner { width: 14px; height: 14px; border-width: 1.5px; } .job-actions { display: flex; gap: var(--sp-2); } .form { display: flex; flex-direction: column; gap: var(--sp-6); max-width: var(--form-w); } .form-section { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--border-subtle); } .form-section:last-of-type { border-bottom: 0; padding-bottom: 0; } .form-intro h3 { margin: 0 0 var(--sp-1); } .form-intro p { color: var(--fg-tertiary); font-size: var(--text-body-sm); } .form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .form-fields .span-2 { grid-column: span 2; } .form-footer { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) 0; background: var(--bg-canvas); border-top: 1px solid var(--border); } .form-footer .status { margin-right: auto; font-size: var(--text-caption); color: var(--fg-tertiary); } .upload { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-6); border: 1px dashed var(--border-strong); border-radius: var(--r-md); text-align: center; color: var(--fg-secondary); font-size: var(--text-body-sm); background: var(--bg-elevated); cursor: pointer; } .upload:hover, .upload.is-over { border-color: var(--fg); background: var(--bg-subtle); } .upload .icon { color: var(--fg-tertiary); } .upload b { color: var(--fg); font-weight: var(--w-medium); } .file-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--text-body-sm); } .file-row .icon { color: var(--fg-tertiary); } .file-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-row .progress { width: 120px; } .file-row small { color: var(--fg-tertiary); font-variant-numeric: tabular-nums; } .chips-input { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; min-height: var(--control-md); padding: 3px var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elevated); } .chips-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle-strong); } .chips-input input { border: 0; outline: 0; font: inherit; min-width: 80px; flex: 1; background: none; height: 22px; } .auth-demo { background: var(--bg-canvas); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-8); display: grid; place-items: center; } .auth-card { width: 100%; max-width: 400px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); } .auth-card .logo { align-self: flex-start; margin-bottom: var(--sp-2); } .auth-card .btn { width: 100%; justify-content: center; } .auth-card .auth-foot { font-size: var(--text-caption); color: var(--fg-tertiary); text-align: center; } .code-input { display: flex; gap: var(--sp-2); } .code-input .input { width: 44px; height: 48px; padding: 0; text-align: center; font-size: var(--text-title); font-variant-numeric: tabular-nums; } .print-header { display: none; align-items: center; justify-content: space-between; padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border); font-size: var(--text-caption); color: var(--fg-tertiary); } @media print { .sidebar, .topbar, .filterbar, .page-header .actions, .pagination, .toast-stack, .modal-overlay, .drawer-overlay, .btn, .tabs, .banner[data-tone="info"] { display: none !important; } .content { padding: 0; } .print-header { display: flex; } thead { display: table-header-group; } tr, .card { break-inside: avoid; } .card { box-shadow: none; } .table-wrap { overflow: visible; } a { text-decoration: none; color: inherit; } } .shell[data-sidebar="collapsed"] .sidebar-user > span:not(.avatar) { display: none; } .shell[data-sidebar="collapsed"] .sidebar-user { justify-content: center; padding-left: 0; padding-right: 0; } .shell[data-sidebar="collapsed"] .nav-item .tooltip { display: block; } .shell[data-sidebar="collapsed"] .nav-item .tooltip.is-shown { opacity: 1; } .shell.demo-overflow, .shell.demo-overflow .sidebar, .shell.demo-overflow .sidebar-nav { overflow: visible; } .shell.demo-overflow .sidebar { position: relative; z-index: var(--z-sticky); } .nav-item .tooltip { z-index: var(--z-tooltip); } .nav-item.has-tip { overflow: visible; } .sidebar-user { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-body-sm); color: var(--fg-secondary); min-width: 0; } .sidebar-user > span:not(.avatar) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar > .sidebar-user { margin-top: auto; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-subtle); } /* ===================================================================== v2.2 TELA ESTREITA : abaixo de 1280 o painel vai a duas colunas; abaixo de 1024 o formulário vira uma coluna e a tabela .responsive vira lista; abaixo de 768 tudo empilha ===================================================================== */ @media (max-width: 1279px) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash .span-4 { grid-column: span 2; } } @media (max-width: 1023px) { .form-section, .form-fields, .doc-pages, .slides, .before-after, .grid-2, .grid-3, .waffle-row, .selo-row { grid-template-columns: 1fr; } .form-fields .span-2 { grid-column: auto; } .table-wrap.responsive thead { display: none; } .table-wrap.responsive tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); height: auto; } .table-wrap.responsive td { display: block; border: 0; padding: 0; height: auto; text-align: left; } .table-wrap.responsive td.col-end { text-align: left; } .table-wrap.responsive td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-micro); line-height: var(--lh-micro); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--fg-tertiary); font-weight: var(--w-semibold); } .table-wrap.responsive td.narrow-hide { display: none; } .table-wrap.responsive td.col-actions { grid-column: 2; grid-row: 1; } } @media (max-width: 767px) { .dash { grid-template-columns: 1fr; } .dash .span-2, .dash .span-4 { grid-column: auto; } .page-header { flex-direction: column; align-items: stretch; } .page-header .actions { justify-content: flex-start; } .content { padding: var(--sp-4); } .filterbar { flex-wrap: wrap; } } .crumbs { min-width: 0; flex-wrap: nowrap; } .crumbs > * { white-space: nowrap; } /* ===================================================================== v2.3 LOGIN : duas variantes (produto com copy, portal enterprise) e CARREGAMENTO : anel, sincronizar, átomo, tela inteira ===================================================================== */ .auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } .auth-brand { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--sp-6); padding: var(--sp-16); background: var(--bg-canvas); color: var(--fg); } .auth-brand .logo { color: var(--logo-fg); } .auth-brand .auth-copy { max-width: 48ch; } .auth-brand .auth-copy .eyebrow { color: var(--fg-secondary); } .auth-brand .auth-copy h1 { font-size: var(--text-title-lg); line-height: var(--lh-title-lg); letter-spacing: var(--track-title-lg); font-weight: var(--w-semibold); margin: var(--sp-2) 0 var(--sp-3); } .auth-brand .auth-copy p { color: var(--fg-secondary); font-size: var(--text-body-lg); line-height: var(--lh-body-lg); margin: 0; } .auth-brand .auth-foot-logo { opacity: 0.6; } .auth-form { display: grid; place-items: center; padding: var(--sp-10); background: var(--bg-canvas); } .auth-form > .auth-card { border: 0; background: none; padding: 0; } .auth-card .auth-title { font-size: var(--text-title); line-height: var(--lh-title); letter-spacing: var(--track-title); font-weight: var(--w-medium); } .auth-card .auth-sub { color: var(--fg-secondary); margin: calc(-1 * var(--sp-2)) 0 var(--sp-1); } .auth-card .field .help { text-align: right; } .captcha-slot { min-height: 65px; display: flex; align-items: center; } /* reserva o espaço do widget de verificação: a tela não pula quando ele carrega */ .captcha-demo { width: 300px; height: 65px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-elevated); display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); font-size: var(--text-body-sm); color: var(--fg-secondary); } .captcha-demo .spinner { width: 16px; height: 16px; } .auth-version { text-align: center; font-size: var(--text-micro); line-height: var(--lh-micro); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--fg-tertiary); margin-top: var(--sp-6); } .auth-page { min-height: 100vh; display: grid; place-content: center; justify-items: center; padding: var(--sp-6); background: var(--bg-canvas); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--bg-elevated) inset; -webkit-text-fill-color: var(--fg); caret-color: var(--fg); transition: background-color 9999s; } /* o navegador não pinta o campo preenchido de azul */ .auth-demo-frame { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .auth-demo-frame .auth-split { min-height: 520px; } .auth-demo-frame .auth-page { min-height: 520px; } @media (max-width: 1023px) { .auth-split { grid-template-columns: 1fr; } .auth-brand { padding: var(--sp-8); min-height: 0; } .auth-brand .auth-foot-logo { display: none; } } .loader-sync { width: 28px; height: 28px; color: var(--fg-tertiary); animation: spin 1.2s var(--ease-standard) infinite; } .loader-sync.loader-sm { width: 18px; height: 18px; } .loader-atom { width: 40px; height: 40px; color: var(--fg); } .loader-atom .orbit { transform-origin: 20px 20px; animation: spin 2.4s linear infinite; } .loader-atom .orbit:nth-child(2) { animation-duration: 3.2s; animation-direction: reverse; } .loader-atom .orbit:nth-child(3) { animation-duration: 4s; } .loader-atom ellipse { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.8; } .loader-atom circle { fill: var(--chart-highlight); } .page-loading { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--sp-3); background: var(--bg-canvas); z-index: var(--z-modal); color: var(--fg-secondary); font-size: var(--text-body-sm); } .page-loading.is-demo { position: static; min-height: 220px; border: 1px solid var(--border); border-radius: var(--r-lg); } .loader-row { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; } .loader-row > div { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 140px; text-align: center; } .loader-row .t-caption { color: var(--fg-tertiary); } @media (prefers-reduced-motion: reduce) { .loader-sync, .loader-atom .orbit, .spinner { animation-duration: 0.01ms; } } .auth-brand > .logo { align-self: flex-start; } /* ===================================================================== REDES SOCIAIS (seção "Redes sociais" do design system) Cada peça é desenhada em pixels de publicação (.social-art + a classe de tamanho) e reduzida para caber na página por transform: scale() aplicado pelo .social-frame. A arte funciona sozinha fora do frame: é o mesmo bloco que vai para o template da skill e vira PNG por captura. Nenhum hex: cor de peça lê swatch de tokens.css, porque arte de rede social tem cor fixa e não acompanha o tema da documentação. ===================================================================== */ /* ---------- linha de peças e legenda da miniatura ---------- */ .social-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-start; } .social-row.social-strip { gap: var(--sp-3); } .social-item { flex: none; display: flex; flex-direction: column; gap: var(--sp-2); } /* width:0 + min-width:100% deixa a legenda com a largura do frame sem alargar a coluna */ .social-cap { width: 0; min-width: 100%; margin: 0; font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--fg-tertiary); overflow-wrap: anywhere; } .social-cap b { font-weight: var(--w-medium); color: var(--fg-secondary); } /* Âncora dos elementos posicionados da peça (contador, moldura de margem, faixas de área segura, etiqueta). Precisa vir ANTES do bloco do frame: dentro do frame a regra .social-frame > * vem depois, com a mesma especificidade, e devolve o position: absolute que reduz a arte. Fora do frame, que é como o template de exportação roda, esta regra é o que impede o contador de escapar para o canto da janela. */ .social-art, .social-safe { position: relative; } /* ---------- frame: recorta e reduz ---------- */ .social-frame { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--stone-100); box-shadow: var(--shadow-md); } .social-frame > * { position: absolute; top: 0; left: 0; transform-origin: top left; } .social-fr-feed { width: 307px; height: 307px; } /* 1080 × 1080 a 28,5% */ .social-fr-retrato { width: 307px; height: 384px; } /* 1080 × 1350 a 28,5% */ .social-fr-slide { width: 205px; height: 256px; } /* 1080 × 1350 a 19% */ .social-fr-story { width: 232px; height: 412px; } /* 1080 × 1920 a 21,5% */ .social-fr-li-quad { width: 300px; height: 300px; } /* 1200 × 1200 a 25% */ .social-fr-li-pais { width: 300px; height: 156px; } /* 1200 × 627 a 25% */ .social-fr-li-capa { width: 480px; height: 270px; } /* 1920 × 1080 a 25% */ .social-fr-feed > *, .social-fr-retrato > * { transform: scale(0.285); } .social-fr-slide > * { transform: scale(0.19); } .social-fr-story > * { transform: scale(0.215); } .social-fr-li-quad > *, .social-fr-li-pais > *, .social-fr-li-capa > * { transform: scale(0.25); } /* ---------- a arte, em pixels de publicação ---------- */ .social-art { box-sizing: border-box; display: flex; flex-direction: column; font-family: var(--font-sans); font-weight: var(--w-regular); background: var(--axyia-papel); color: var(--stone-900); /* o logo e o selo não seguem o tema da documentação */ --logo-fg: var(--axyia-logo); --logo-selo-bg: var(--axyia-logo); --logo-selo-fg: var(--axyia-papel); } .social-art.social-on-dark { background: var(--stone-950); color: var(--axyia-papel); --logo-fg: var(--axyia-papel); --logo-selo-bg: var(--axyia-papel); --logo-selo-fg: var(--axyia-logo); } /* Capa sobre amarelo. Exceção pedida para a capa do LinkedIn, onde a peça é a assinatura da marca e não uma página de conteúdo: aqui o amarelo é a superfície inteira, o texto vira preto e o ponto da marca acompanha, do mesmo jeito que no favicon (fundo amarelo, quadrado preto). Não vale para página de site, documento nem tela de sistema. */ .social-art.social-on-yellow { background: var(--axyia-amarelo); color: var(--stone-950); --logo-fg: var(--axyia-logo); } /* só o ponto da frase vira preto; o quadrado dentro do selo continua amarelo, senão o selo sai sem a marca */ .social-on-yellow .social-ponto { background: var(--axyia-logo); } .social-on-yellow .social-kicker, .social-on-yellow .social-src { color: var(--stone-800); } .social-on-yellow .social-body { color: var(--stone-800); } .social-art.social-center { align-items: center; text-align: center; justify-content: center; } .social-art.social-center .social-title { text-wrap: balance; } /* fechamento centrado sem palavra sozinha na última linha */ /* tamanhos de publicação e margem da grade */ .social-1080x1080 { width: 1080px; height: 1080px; padding: 80px; } .social-1080x1350 { width: 1080px; height: 1350px; padding: 80px; } .social-1080x1920 { width: 1080px; height: 1920px; padding: 250px 96px 340px; } /* topo e base livres */ .social-1200x1200 { width: 1200px; height: 1200px; padding: 88px; } .social-1200x627 { width: 1200px; height: 627px; padding: 64px; } .social-1920x1080 { width: 1920px; height: 1080px; padding: 120px; } /* ---------- elementos da peça ---------- */ .social-filete { width: 120px; height: 6px; background: var(--axyia-amarelo); flex: none; margin-bottom: 24px; } .social-kicker { margin: 0; font-size: 32px; line-height: 1.2; font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: 0.10em; color: var(--stone-600); } .social-title { margin: 24px 0 0; font-size: 84px; line-height: 1.06; letter-spacing: -0.03em; font-weight: var(--w-semibold); } .social-body { margin: 24px 0 0; font-size: 38px; line-height: 1.45; color: var(--stone-700); } .social-num { margin: 0; font-size: 220px; line-height: 0.9; letter-spacing: -0.03em; font-weight: var(--w-medium); font-variant-numeric: tabular-nums; } .social-numlabel { margin: 16px 0 0; font-size: 32px; line-height: 1.3; font-weight: var(--w-medium); color: var(--stone-600); } .social-block { display: flex; flex-direction: column; } .social-bottom { margin-top: auto; } /* ancora o bloco de texto na base, acima do rodapé */ .social-hl { background: var(--axyia-amarelo); color: var(--stone-900); padding: 0 0.06em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* O ponto da marca virando pontuação: o mesmo quadrado amarelo do logo, no fim da frase. É marca, e por isso não gasta o destaque amarelo da peça, do mesmo jeito que o quadrado do logo não gasta. Quadrado, nunca redondo, e do tamanho da haste da letra: ponto redondo amarelo seria amarelo pintando texto. */ .social-ponto { display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.05em; background: var(--brand-mark); vertical-align: baseline; } .social-count { position: absolute; top: 80px; right: 80px; font-size: 28px; font-weight: var(--w-medium); font-variant-numeric: tabular-nums; color: var(--stone-600); } .social-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; } /* bloco de texto ancorado na base: o rodapé guarda uma folga fixa em vez de dividir a sobra com ele, que é o que deixaria a peça com cara de centrada */ .social-bottom ~ .social-foot { margin-top: 64px; } /* Peça só de número, sem título e sem corpo: o bloco vai para o meio do espaço livre. Ancorado na base, ele deixava metade da arte vazia entre o kicker e o número, que passa em todas as regras de marca e mesmo assim sai desequilibrado. */ .social-art:not(:has(.social-title)):not(:has(.social-body)) > .social-bottom { margin-block: auto; } .social-foot .logo { height: 44px; } .social-src { font-size: 28px; line-height: 1.3; color: var(--stone-600); text-align: right; } .social-foot > .social-src:first-child { text-align: left; } .social-cta { margin: 24px 0 0; font-size: 34px; line-height: 1.35; font-weight: var(--w-medium); } .social-selo { display: block; width: 40px; height: 40px; flex: none; } /* peça sobre preto: cinzas sobem, número vira amarelo */ .social-on-dark .social-kicker, .social-on-dark .social-numlabel, .social-on-dark .social-src, .social-on-dark .social-count { color: var(--stone-400); } .social-on-dark .social-body { color: var(--stone-300); } .social-on-dark .social-num { color: var(--axyia-amarelo); } /* ---------- ajustes por formato (medidas da tabela de grade) ---------- */ .social-1080x1080 .social-title { font-size: 76px; } .social-1080x1080 .social-body { font-size: 36px; } .social-1080x1080 .social-num { font-size: 190px; } .social-1080x1920 .social-kicker { font-size: 34px; } .social-1080x1920 .social-title { font-size: 96px; } .social-1080x1920 .social-body { font-size: 40px; } .social-1080x1920 .social-num { font-size: 260px; } .social-1080x1920 .social-block { margin: auto 0; } .social-1080x1920 .social-foot { margin-top: 0; } .social-1080x1920 .social-foot .logo { height: 48px; } .social-1200x1200 .social-kicker { font-size: 34px; } .social-1200x1200 .social-body { font-size: 40px; } .social-1200x1200 .social-numlabel { font-size: 34px; } .social-1200x1200 .social-foot .logo { height: 48px; } .social-1200x1200 .social-src { font-size: 34px; } .social-1200x627 .social-kicker { font-size: 34px; } .social-1200x627 .social-title { font-size: 60px; line-height: 1.1; } .social-1200x627 .social-body { font-size: 34px; line-height: 1.4; margin-top: 16px; } .social-1200x627 .social-src { font-size: 34px; } .social-1200x627 .social-foot .logo { height: 36px; } /* ---------- fundo de chamada (Teams, Meet) ---------- 1920 × 1080 com a pessoa enquadrada do tronco para cima e a barra de controles flutuando embaixo: a marca vive nos cantos DE CIMA. Embaixo ela fica atrás do ombro de quem fala, ou atrás da barra. */ .social-1920x1080.social-fundo-chamada .social-foot { margin-top: 0; align-items: flex-start; } .social-fundo-chamada .social-foot .logo { height: 76px; } .social-fundo-chamada .social-selo { width: 168px; height: 168px; } .social-fundo-chamada .social-body { font-size: 46px; line-height: 1.25; max-width: 1180px; margin: 0; text-wrap: balance; } .social-1920x1080 .social-kicker { font-size: 34px; } .social-1920x1080 .social-title { font-size: 96px; } .social-1920x1080 .social-foot .logo { height: 56px; } /* carrossel: capa, slide interno e fechamento */ .social-art.social-slide-capa .social-title { font-size: 96px; line-height: 1.04; } .social-art.social-slide-capa .social-foot .logo { height: 48px; } .social-art.social-slide-in .social-title { font-size: 56px; margin-top: 0; } .social-art.social-slide-in .social-body { font-size: 38px; line-height: 1.5; } .social-art.social-slide-in .social-num { font-size: 180px; } .social-art.social-slide-fim .social-title { font-size: 64px; margin-top: 40px; } .social-art.social-slide-fim .social-foot { margin-top: 0; } .social-art.social-slide-fim .logo { height: 52px; } /* ---------- anotação de área segura (só na documentação) ---------- */ .social-safe { pointer-events: none; box-sizing: border-box; font-size: 26px; line-height: 1.3; font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: 0.08em; } .social-band { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 96px; color: var(--stone-300); background: color-mix(in oklab, var(--stone-950) 66%, transparent); } .social-band-top { top: 0; height: 250px; border-bottom: 3px dashed var(--stone-400); } .social-band-bottom { bottom: 0; height: 340px; border-top: 3px dashed var(--stone-400); } .social-margin { position: absolute; inset: 80px; border: 3px dashed var(--stone-500); } .social-tag { position: absolute; top: 62px; right: 104px; padding: 0 12px; color: var(--stone-600); background: var(--axyia-papel); } /* ---------- legenda de exemplo com o corte do "ver mais" ---------- */ .social-legenda { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elevated); padding: var(--sp-4); font-size: var(--text-body-sm); line-height: var(--lh-body); color: var(--fg); } .social-legenda p { margin: 0; } .social-legenda .social-resto { color: var(--fg-tertiary); margin-top: var(--sp-1); } .social-legenda .social-tags { color: var(--fg-secondary); margin-top: var(--sp-2); font-weight: var(--w-medium); } .social-corte { color: var(--fg-tertiary); font-weight: var(--w-medium); border-left: 2px solid var(--axyia-amarelo); padding-left: var(--sp-1); margin-left: var(--sp-1); } /* ---------- capa da Página do LinkedIn ---------- O logo da Página cobre o canto inferior esquerdo e o feed corta a direita: o texto vive entre os 380px da esquerda e os 15% da direita (227px). */ .social-1512x256 { width: 1512px; height: 256px; padding: 56px 227px 56px 380px; justify-content: center; } .social-1512x256 .social-filete { width: 88px; height: 5px; margin-bottom: 18px; } .social-1512x256 .social-title { font-size: 44px; line-height: 1.15; margin: 0; letter-spacing: -0.02em; text-wrap: balance; } /* ---------- capa de perfil do LinkedIn (a pessoa, não a Página) ---------- A foto de perfil cobre o canto inferior esquerdo, e o app corta 15% do topo e da base em tela de celular: o texto vive no meio da altura, depois dos 300px da esquerda. A peça é do funcionário, então diz onde ele trabalha, sem virar anúncio: uma linha e a marca. */ .social-1584x396 { width: 1584px; height: 396px; padding: 76px 96px 76px 300px; } .social-1584x396 .social-filete { width: 96px; height: 6px; margin-bottom: 22px; } .social-1584x396 .social-kicker { font-size: 30px; } .social-1584x396 .social-title { font-size: 62px; line-height: 1.1; margin-block: auto; letter-spacing: -0.025em; text-wrap: balance; } /* frase no meio da altura, logo ancorado na base */ .social-1584x396 .social-body { font-size: 32px; margin-top: 18px; } .social-1584x396 .social-foot { margin-top: 26px; } .social-1584x396 .social-foot .logo { height: 42px; } /* ---------- composição: uma linha de barra por parte ---------- É a .hbars do axyia.css na escala da peça. O amarelo pinta só a barra que o título aponta; empilhada e pizza não existem nesta marca. */ .social-comp { display: grid; grid-template-columns: 300px minmax(0, 1fr) max-content; align-items: center; gap: 28px 32px; margin: 48px 0 0; } .social-comp.social-bottom { margin-top: auto; } /* a margem própria do bloco não pode engolir a âncora de base */ .social-comp-lbl { font-size: 36px; line-height: 1.25; color: var(--stone-700); } .social-comp-trk { height: 28px; background: var(--stone-200); border-radius: 2px; overflow: hidden; } .social-comp-trk > i { display: block; height: 100%; background: var(--stone-900); } .social-comp-trk.is-destaque > i { background: var(--axyia-amarelo); } .social-comp-val { font-size: 36px; font-weight: var(--w-medium); font-variant-numeric: tabular-nums; text-align: right; } .social-on-dark .social-comp-lbl { color: var(--stone-300); } .social-on-dark .social-comp-trk { background: var(--stone-800); } .social-on-dark .social-comp-trk > i { background: var(--axyia-papel); } .social-1200x1200 .social-comp-lbl, .social-1200x1200 .social-comp-val { font-size: 40px; } /* ---------- arte fora do frame da documentação ---------- No template de exportação a peça abre no tamanho de publicação, sem o .social-frame que reduz. O .social-stage devolve o empilhamento que o frame fazia, para a marcação de área segura cobrir a arte em vez de cair embaixo. */ .social-stage { position: relative; width: max-content; } .social-stage > .social-safe { position: absolute; top: 0; left: 0; } @media (max-width: 600px) { .social-fr-li-capa { width: 288px; height: 162px; } .social-fr-story { width: 162px; height: 288px; } .social-fr-li-capa > *, .social-fr-story > * { transform: scale(0.15); } } /* ===================================================================== CORREÇÕES DE COMPONENTE (v2.4) Responde às notas 2, 3, 6 e 7 da auditoria do time de front. Carrega depois de tokens.css. Sem hex e sem prioridade forçada: todo valor lê um token. ===================================================================== */ /* ===================================================================== 1. LINK (nota 2) ===================================================================== */ /* --------------------------------------------------------------------- LINK Sublinhado global riscava a tela inteira do sistema: menu lateral, linha de tabela, breadcrumb, aba, célula. As quatro regras abaixo sublinham só onde há texto para ler. --------------------------------------------------------------------- */ /* Link de sistema: cor do texto, sem sublinhado em repouso. */ a { color: var(--fg); text-decoration: none; } /* O hover marca o alvo. Só em link que carrega classe própria (.nav-item, .row-link, .btn), que manda no próprio sublinhado. A cor não muda no hover porque em [data-surface="site-dark"] o --accent-fg é o amarelo da marca, e amarelo nunca é texto. ALCANCE REAL: .crumbs a e .topnav a escrevem a classe no PAI, a âncora em si não tem atributo class, então :not([class]) casa com as duas. Especificidade: a:not([class]):hover = (0,2,1), empatada com .crumbs a:hover e .topnav a:hover, e este arquivo carrega depois, então ganharia por ordem. Na migalha o resultado é o mesmo (ela já sublinha no hover). Na barra da documentação o sublinhado seria novo, e a barra marca o item pela cor e pelo traço de baixo: por isso ela declara .topnav .topnav-links a:hover, que vale (0,3,1) e vence esta regra por especificidade, em qualquer ordem de carga. */ a:not([class]):hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } /* Contexto de leitura: parágrafo longo, ajuda de campo, aviso, documento e slide. Aqui o sublinhado é o que identifica o link no meio da frase. */ .prose a, .t-prose a, .help a, .banner a, .doc-page a, .slide a, .empty p a, .card-body p a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } /* Dentro do aviso o link segue a cor do tom, como o .banner p já faz. */ .banner a { color: inherit; } /* Fim do bloco de link. */ /* Bloco de leitura longa. Dá nome ao contexto que o roteiro cita: mesmo corpo e mesma medida do .t-prose, com ritmo vertical entre os filhos. */ .prose { font-size: var(--text-prose); line-height: var(--lh-prose); letter-spacing: var(--track-prose); color: var(--fg); max-width: var(--measure); } .prose > * + * { margin-top: var(--sp-3); } .prose > h2, .prose > h3 { margin-top: var(--sp-6); } /* Esconde da tela e mantém no leitor de tela. Usado pelo menu recolhido e por cabeçalho de coluna sem rótulo visível (coluna de ação, caixa de seleção). */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ===================================================================== 2. SELO DE FEEDBACK (nota 3) Marcação: ===================================================================== */ /* Mesmo desenho do .badge (pílula de 20px, corpo caption, borda de 1px). Lê os [data-tone] que já existem no kit e acrescenta a borda do tom, que o .badge-status não usa. Sem data-tone cai no neutro, com os mesmos valores de reserva do .badge-status (axyia.css:144). */ .badge-feedback { background: var(--badge-bg, var(--bg-muted)); color: var(--badge-fg, var(--fg-secondary)); border-color: var(--badge-border, var(--border)); } .badge-feedback[data-tone="success"] { --badge-border: var(--success-border); } .badge-feedback[data-tone="warning"] { --badge-border: var(--warning-border); } .badge-feedback[data-tone="error"] { --badge-border: var(--error-border); } .badge-feedback[data-tone="info"] { --badge-border: var(--info-border); } /* O ponto opcional () fica na cor do texto do tom e não encolhe quando o rótulo é longo. */ .badge-feedback .dot { flex: none; } /* ===================================================================== 3. CAMPO POR TAMANHO (nota 3) ===================================================================== */ /* A altura vem de --control-*, o corpo do texto acompanha. O line-height: 1 do .input é o que mantém o texto centrado na altura, então nenhuma das duas precisa mexer nisso. O .input-md é o padrão, escrito por extenso para o dev poder declarar o tamanho sem depender do default. O .input-sm fica de fora: já está declarado acima com estas mesmas declarações, e repetir a regra faria o kit sair com duas cópias dela. O que faltava na escala era o campo mais alto, o .input-lg. */ .input-md { height: var(--control-md); font-size: var(--text-body); padding: 0 var(--sp-3); } .input-lg { height: var(--control-lg); font-size: var(--text-body-lg); padding: 0 var(--sp-4); } /* textarea continua crescendo: textarea.input (height: auto, padding e line-height próprios) vence as três por especificidade, e o tamanho muda só o corpo do texto. select mantém o espaço da seta pelo mesmo motivo. Nada a declarar aqui, a nota é para quem for ler o arquivo. */ /* ===================================================================== 4. CASCA: PRODUTO x DOCUMENTAÇÃO (nota 6) ===================================================================== */ /* A .shell é a tela do produto: ocupa a janela e não desenha moldura. Borda, raio e corte eram da vitrine da documentação e foram para a .shell-demo. Sem overflow hidden o tooltip do menu recolhido sai da casca sem gambiarra. A regra vem completa (grade, colunas, linhas e fundo): é ela que define a grade da casca, e uma versão só de altura e borda apagaria o display: grid e desmontaria a tela inteira. */ .shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; background: var(--bg-canvas); height: 100vh; height: 100dvh; border: 0; border-radius: 0; overflow: visible; } /* Impressão declarada de novo aqui de propósito. A .shell completa acima traz display: grid e tem a mesma especificidade do bloco de impressão que vem antes; sem esta repetição, ela passaria na frente dele e a casca sairia com altura de tela no papel. */ @media print { .shell { display: block; } } /* Quem rola é o conteúdo, e o min-height: 0 deixa a linha do grid encolher. As duas declarações estão na .content lá em cima. */ /* Moldura da documentação. Usar junto com .shell e com a altura do demo:
*/ .shell.shell-demo { height: auto; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } /* O demo do tooltip precisa do balão saindo da moldura; a regra vem depois da .shell-demo para vencer por ordem. */ .shell.shell-demo.demo-overflow { overflow: visible; } /* A .shell-demo é da documentação. Em código de produto (template, snippet e mock de tela) a casca vai com .shell pura. */ /* ===================================================================== 5. ITEM DE MENU (nota 7) ===================================================================== */ /* Rótulo longo ("Certificação de base") corta com reticências em vez de empurrar o contador para fora da sidebar. O :not() preserva o tooltip (span.tooltip) e o contador (span.badge), que não são o rótulo. */ .nav-item > span:not(.tooltip):not(.badge) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Ícone, contador e chevron têm tamanho fixo: quem encolhe é o rótulo. O contador já ganha margin-left: auto acima, para ser empurrado até a borda; aqui ganha flex: none, para não ser espremido. */ .nav-item > .icon, .nav-item .badge-count, .nav-item .chev { flex: none; } /* Menu recolhido: o rótulo e o contador saem da tela e continuam no leitor de tela, em vez de sumirem com display: none. O position: relative prende o rótulo escondido dentro do próprio item. */ .shell[data-sidebar="collapsed"] .nav-item > span:not(.tooltip) { display: inline; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ===================================================================== 6. LADO DA MARCA NO LOGIN (nota 7) ===================================================================== */ /* Com dois filhos (logo e texto), o space-between jogava o texto para o pé da tela. Assim o logo fica no topo e o texto ocupa o meio do espaço livre, com dois ou três filhos. */ .auth-brand > .auth-copy { margin-block: auto; } /* Quando o lado da marca tem só logo e assinatura de rodapé, a assinatura vai para o pé sozinha. */ .auth-brand:not(:has(.auth-copy)) > .auth-foot-logo { margin-top: auto; } /* ===================================================================== BARRA DE NAVEGAÇÃO DA DOCUMENTAÇÃO (v2.4) Os links correm num trilho rolável e o seletor de tema fica fixo à direita, para a barra caber em 1366 sem cortar o último item. Cor, espaço e tempo saem de tokens.css. Nenhum hex. ===================================================================== */ /* --------------------------------------------------------------------- 1. A BARRA: três colunas marca (fixa) | trilho que rola | seletor de tema (fixo) O minmax(0, 1fr) do meio é o que resolve o corte: só a coluna do trilho pode encolher abaixo do próprio conteúdo, então o seletor de tema nunca é empurrado para fora da tela. --------------------------------------------------------------------- */ .topnav { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--bg-sidebar); border-bottom: 1px solid var(--border); } .topnav-inner { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-6); height: var(--topbar-h); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-4); overflow: visible; } .topnav .brand { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; margin-right: 0; white-space: nowrap; } .topnav .brand small { font-size: var(--text-caption); color: var(--fg-tertiary); font-weight: var(--w-medium); } /* --------------------------------------------------------------------- 2. O TRILHO .topnav-track fica parado e segura as máscaras das pontas; .topnav-links é quem rola. A barra de rolagem fica escondida: quem avisa que há mais seções é o desvanecer nas pontas. Sem gap entre links: o respiro sai do padding de cada um, então as áreas de clique encostam e não sobra faixa morta entre dois itens. --------------------------------------------------------------------- */ .topnav-track { position: relative; min-width: 0; height: var(--topbar-h); timeline-scope: --topnav-x; } .topnav-links { display: flex; align-items: stretch; gap: 0; height: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-padding-inline: var(--sp-8); scrollbar-width: none; scroll-timeline: --topnav-x inline; } .topnav-links::-webkit-scrollbar { display: none; } .topnav a { flex: none; display: inline-flex; align-items: center; height: 100%; padding: 0 var(--sp-1-5); border-bottom: 2px solid transparent; color: var(--fg-secondary); font-size: var(--text-body-sm); font-weight: var(--w-medium); text-decoration: none; white-space: nowrap; } .topnav a:hover { color: var(--fg); } .topnav a.is-current { color: var(--fg); border-bottom-color: var(--accent); } /* O hover da barra, escrito com a classe do trilho junto de propósito. O bloco de link acima tem a:not([class]):hover, que devolve o sublinhado a link sem classe própria. A âncora daqui não tem atributo class (a classe está no pai), então aquela regra casa com ela e as duas empatariam em (0,2,1), decidindo no acaso da ordem de carga. Com .topnav-links no meio, esta vale (0,3,1) e ganha por especificidade. Na barra quem marca o alvo é a cor do texto; o item aberto é o único com traço embaixo, e sublinhar o hover confundiria os dois sinais. */ .topnav .topnav-links a:hover { color: var(--fg); text-decoration: none; } /* --------------------------------------------------------------------- 3. AS PONTAS Duas faixas de 32px na cor da barra, cada uma acesa só quando há seção escondida daquele lado: a da esquerda entra nos primeiros 32px de rolagem, a da direita apaga nos últimos 32px. Sem barra de rolagem à vista e sem link cortado pela metade. --------------------------------------------------------------------- */ .topnav-track::before, .topnav-track::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--sp-8); opacity: 0; pointer-events: none; } .topnav-track::before { left: 0; background: linear-gradient(to right, var(--bg-sidebar), transparent); } .topnav-track::after { right: 0; background: linear-gradient(to left, var(--bg-sidebar), transparent); } @keyframes topnav-fade-in { from { opacity: 0 } to { opacity: 1 } } @keyframes topnav-fade-out { from { opacity: 1 } to { opacity: 0 } } /* O teste soma as duas propriedades de que o desvanecer depende, com os valores que a barra usa mesmo: o nome da linha do tempo em animation-timeline e o timeline-scope que leva esse nome do .topnav-links (quem rola) até o .topnav-track (quem desenha as pontas). O teste antigo perguntava por scroll(self inline), que a barra não usa: navegador com uma propriedade e sem a outra passava no teste, ficava sem barra de rolagem por causa do scrollbar-width: none e sem máscara acesa, e ninguém via que havia mais seções. */ @supports (animation-timeline: --topnav-x) and (timeline-scope: --topnav-x) { .topnav-track::before { animation: topnav-fade-in linear both; animation-timeline: --topnav-x; animation-range: 0 var(--sp-8); } .topnav-track::after { animation: topnav-fade-out linear both; animation-timeline: --topnav-x; animation-range: calc(100% - var(--sp-8)) 100%; } /* A regra global de prefers-reduced-motion zera a duração de toda animação. Numa linha do tempo de rolagem isso congelaria as pontas no fim do percurso; auto devolve o controle à posição de rolagem, que é o que a preferência pede (nada se move sozinho). */ @media (prefers-reduced-motion: reduce) { .topnav-track::before, .topnav-track::after { animation-duration: auto !important; } } } /* Navegador que falha em qualquer uma das duas: a barra de rolagem fina volta a ser a pista de que há mais seções. A condição é a negação exata da de cima, com os parênteses de fora que o "not" de duas condições exige, para não sobrar nenhum navegador entre os dois blocos. */ @supports not ((animation-timeline: --topnav-x) and (timeline-scope: --topnav-x)) { .topnav-links { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } } /* --------------------------------------------------------------------- 4. O SELETOR DE TEMA Terceira coluna da grade, fora do trilho: está sempre visível. --------------------------------------------------------------------- */ .topnav-theme { justify-self: end; } /* --------------------------------------------------------------------- 5. TELAS ESTREITAS Medido: os doze links pedem 872px e o trilho oferece 932 de 1328px de viewport para cima (o .topnav-inner trava em 1280 e a régua para de mudar), 891 em 1280. Cabem sem rolagem em toda essa faixa. De 1024 para baixo o trilho rola e as pontas avisam; o que muda aqui é só o gutter, para nada encostar na borda. --------------------------------------------------------------------- */ @media (max-width: 1024px) { .topnav-inner { padding: 0 var(--sp-4); } .topnav-track::before, .topnav-track::after { width: var(--sp-6); } } @media (max-width: 640px) { .topnav .brand small { display: none; } .topnav-theme button { padding: 0 var(--sp-1-5); } } /* ===================================================================== FORA DA BARRA Dois vazamentos laterais achados na mesma passada. O primeiro é a causa do "falta espaço pro lado" fora do topo: em 1366 o documento media 1453px de largura de rolagem contra 1325 de tela, então a página inteira andava 128px para o lado e a barra grudada no topo escorregava junto. ===================================================================== */ /* .steps (seção 10, Migração): a coluna 1fr do passo nasce com min-width auto, então o bloco de código de dentro passou a mandar na largura e a seção saía 151px além do .wrap. A coluna do passo é minmax(0, 1fr) na regra do bloco de passos, para o bloco de código de dentro não mandar na largura. */ .steps > li > div { min-width: 0; } /* .chart (seção 4, Dados): a tabela "Situação por carteira" tem seis colunas e pedia 620px dentro de um cartão de 566, então a coluna Encerrado saía cortada na borda do cartão. Dentro de um cartão de gráfico o respiro lateral da célula cai para 8px e o piso da barra, para 32px: a tabela passa a pedir 508px e cabe com folga. O percentual ao lado continua sendo quem dá o número exato. */ .chart .doc-table th, .chart .doc-table td { padding-left: var(--sp-2); padding-right: var(--sp-2); } .chart .doc-table .cell-bar .trk { min-width: var(--sp-8); } /* .cover-meta: cinco blocos de larguras muito diferentes em flex-wrap quebravam 2 + 3 e deixavam um buraco no fim da primeira linha. Em grade as colunas ficam do mesmo tamanho e a capa para de parecer desalinhada. O flex-wrap sai: não tem efeito em grade e só atrapalharia quem lê. O margin-top continua sendo o mesmo, para o afastamento da capa não sumir junto. */ .cover-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); margin-top: var(--sp-8); } @media (max-width: 900px) { .cover-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ===================================================================== FOCO v2.4 : o anel acompanha o raio do elemento. O que mudou e por que. O anel antigo era `outline` com deslocamento de 2px. O navegador desenha o outline deslocado com raio maior que o do elemento, então num campo de raio 6px o canto "abre" e o anel parece fora de esquadro. Sobre o botão primário, que já é preto, o anel preto encostado virava uma mancha sem contorno legível. Agora o anel é desenhado por sombra: acompanha o raio exato, ganha um respiro na cor do fundo (o que o separa de superfície escura) e o `outline` transparente fica só para o modo de alto contraste do sistema, onde sombra não é pintada. ===================================================================== */ :focus-visible { outline: var(--focus-ring-width) solid transparent; /* alto contraste do Windows pinta esta linha */ outline-offset: var(--focus-ring-offset); box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--focus-ring); } /* Campo de texto: a borda vira acento e o halo abre em volta. Sem anel preto por fora: o campo já é um retângulo claro, e a troca de borda mais o halo dizem o mesmo com menos peso. Vale para o campo do kit e para o campo nativo de um produto que ainda não migrou. */ .input:focus, .input.is-focus, .input:focus-visible, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible, textarea:focus-visible, select:focus-visible { outline: var(--focus-ring-width) solid transparent; outline-offset: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-halo); } /* Campo com erro mantém a borda vermelha e troca só o halo. */ .input[aria-invalid="true"]:focus, .input.is-error.is-focus, .input[aria-invalid="true"]:focus-visible { border-color: var(--error-solid); box-shadow: 0 0 0 3px var(--error-bg); } /* Botão, chip, aba e item de menu herdam o anel de sombra do :focus-visible. A classe .is-focus existe só para congelar o estado nesta documentação. */ .btn.is-focus, .btn:focus-visible, .chip:focus-visible, .tab:focus-visible, .nav-item:focus-visible, .menu-item:focus-visible, .page:focus-visible, .chip.is-focus, .tab.is-focus, .nav-item.is-focus, .menu-item.is-focus, .page.is-focus { outline: var(--focus-ring-width) solid transparent; outline-offset: 0; box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--focus-ring); } /* Dentro do menu lateral e de superfície escura, o respiro usa a cor da própria superfície, senão aparece uma linha clara em volta do anel. */ .sidebar :focus-visible, [data-surface="site-dark"] :focus-visible, .on-dark :focus-visible { box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 0 4px var(--focus-ring); } [data-surface="site-dark"] :focus-visible, .on-dark :focus-visible { box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--accent-fg); } /* Linha de tabela e card selecionável são grandes: o anel fica por dentro, para não empurrar o vizinho nem sair do recorte da tabela. */ .table tbody tr:focus-visible, .card-interactive:focus-visible { outline: var(--focus-ring-width) solid transparent; box-shadow: inset 0 0 0 2px var(--focus-ring); }