/* * base.css — folha de estilo base do design system ORDO (Tec Capital), em CSS puro. * * Regra única e inegociável deste arquivo: NENHUMA cor sai daqui sem ser var(--...). Toda cor, * raio, sombra, fonte, espaçamento e duração vem de `tokens.css` (a cópia de `dist/tec.css` ou * `dist/ordo360.css` que cada site carrega antes deste arquivo). As únicas exceções são as sombras * de receita copiadas fielmente do design system (`rgb(0 0 0 / x%)`), porque são parte da receita * em si, não uma cor escolhida aqui. * * `` do site sempre carrega `data-tenant` e `data-theme` — é o que faz `var(--color-*)` * resolver para a organização e o tema certos. Este arquivo não sabe qual organização está ativa, * e não precisa saber: ele só consome os nomes semânticos. */ /* ========================================================================== 1. Reset moderno mínimo ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; color-scheme: light dark; } body { margin: 0; min-height: 100dvh; background: var(--color-surface-default); color: var(--color-text-default); font-family: var(--font-family-sans); font-size: var(--font-style-body-m-size); line-height: var(--font-style-body-m-line-height); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Imagem responsiva por padrão — nunca estoura o contêiner nem carrega altura própria. */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* Formulário herda tipografia do documento em vez da fonte do sistema operacional. */ input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; } /* Lista usada como componente (nav, cartões) começa sem marcador nem respiro do navegador; lista de conteúdo em prosa mantém o padrão do HTML, que é o que se espera dela. */ ul[class], ol[class] { margin: 0; padding: 0; list-style: none; } /* Movimento é cortesia, não identidade — quem pediu menos não recebe nenhum (mesma régua das receitas de toque, aplicada ao documento inteiro). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 2. Tipografia — os 18 estilos nomeados do Figma ========================================================================== */ h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-family-display); font-weight: var(--font-style-heading-m-weight); color: var(--color-text-default); } /* Mapeamento de heading semântico -> estilo do Figma. Decisão tomada por falta de uma tabela explícita: display-xl fica reservado à classe `.t-display-xl` (hero de marketing, não título de documento), e h1 usa `display-l` — o maior heading "de página" da escala. */ h1 { font-size: var(--font-style-display-l-size); line-height: var(--font-style-display-l-line-height); font-weight: var(--font-style-display-l-weight); letter-spacing: var(--font-style-display-l-letter-spacing); } h2 { font-size: var(--font-style-heading-xl-size); line-height: var(--font-style-heading-xl-line-height); font-weight: var(--font-style-heading-xl-weight); letter-spacing: var(--font-style-heading-xl-letter-spacing); } h3 { font-size: var(--font-style-heading-l-size); line-height: var(--font-style-heading-l-line-height); font-weight: var(--font-style-heading-l-weight); letter-spacing: var(--font-style-heading-l-letter-spacing); } h4 { font-size: var(--font-style-heading-m-size); line-height: var(--font-style-heading-m-line-height); font-weight: var(--font-style-heading-m-weight); letter-spacing: var(--font-style-heading-m-letter-spacing); } h5 { font-size: var(--font-style-heading-s-size); line-height: var(--font-style-heading-s-line-height); font-weight: var(--font-style-heading-s-weight); letter-spacing: var(--font-style-heading-s-letter-spacing); } /* h6 não tem estilo próprio no Figma (só até Heading/S) — usa Label/M, o próximo degrau abaixo, como texto forte de menor hierarquia. Decisão por falta de especificação. */ h6 { font-size: var(--font-style-label-m-size); line-height: var(--font-style-label-m-line-height); font-weight: var(--font-style-label-m-weight); letter-spacing: var(--font-style-label-m-letter-spacing); } p { margin: 0 0 var(--space-4); } /* Classes utilitárias — uma por estilo nomeado do Figma. Nenhuma combina tamanho de um degrau com entrelinha de outro: é exatamente o que os 18 estilos existem para impedir. */ .t-display-xl, .t-display-l, .t-heading-xl, .t-heading-l, .t-heading-m, .t-heading-s, .t-body-l, .t-body-m, .t-body-s, .t-body-xs, .t-label-m, .t-label-s, .t-label-xs, .t-label-xs-caps, .t-editorial-l, .t-editorial-m, .t-code-m, .t-code-s { margin: 0; } .t-display-xl { font-family: var(--font-family-display); font-size: var(--font-style-display-xl-size); line-height: var(--font-style-display-xl-line-height); font-weight: var(--font-style-display-xl-weight); letter-spacing: var(--font-style-display-xl-letter-spacing); } .t-display-l { font-family: var(--font-family-display); font-size: var(--font-style-display-l-size); line-height: var(--font-style-display-l-line-height); font-weight: var(--font-style-display-l-weight); letter-spacing: var(--font-style-display-l-letter-spacing); } .t-heading-xl { font-family: var(--font-family-display); font-size: var(--font-style-heading-xl-size); line-height: var(--font-style-heading-xl-line-height); font-weight: var(--font-style-heading-xl-weight); letter-spacing: var(--font-style-heading-xl-letter-spacing); } .t-heading-l { font-family: var(--font-family-display); font-size: var(--font-style-heading-l-size); line-height: var(--font-style-heading-l-line-height); font-weight: var(--font-style-heading-l-weight); letter-spacing: var(--font-style-heading-l-letter-spacing); } .t-heading-m { font-family: var(--font-family-display); font-size: var(--font-style-heading-m-size); line-height: var(--font-style-heading-m-line-height); font-weight: var(--font-style-heading-m-weight); letter-spacing: var(--font-style-heading-m-letter-spacing); } .t-heading-s { font-family: var(--font-family-display); font-size: var(--font-style-heading-s-size); line-height: var(--font-style-heading-s-line-height); font-weight: var(--font-style-heading-s-weight); letter-spacing: var(--font-style-heading-s-letter-spacing); } .t-body-l { font-family: var(--font-family-sans); font-size: var(--font-style-body-l-size); line-height: var(--font-style-body-l-line-height); font-weight: var(--font-style-body-l-weight); letter-spacing: var(--font-style-body-l-letter-spacing); } .t-body-m { font-family: var(--font-family-sans); font-size: var(--font-style-body-m-size); line-height: var(--font-style-body-m-line-height); font-weight: var(--font-style-body-m-weight); letter-spacing: var(--font-style-body-m-letter-spacing); } .t-body-s { font-family: var(--font-family-sans); font-size: var(--font-style-body-s-size); line-height: var(--font-style-body-s-line-height); font-weight: var(--font-style-body-s-weight); letter-spacing: var(--font-style-body-s-letter-spacing); } .t-body-xs { font-family: var(--font-family-sans); font-size: var(--font-style-body-xs-size); line-height: var(--font-style-body-xs-line-height); font-weight: var(--font-style-body-xs-weight); letter-spacing: var(--font-style-body-xs-letter-spacing); } .t-label-m { font-family: var(--font-family-sans); font-size: var(--font-style-label-m-size); line-height: var(--font-style-label-m-line-height); font-weight: var(--font-style-label-m-weight); letter-spacing: var(--font-style-label-m-letter-spacing); } .t-label-s { font-family: var(--font-family-sans); font-size: var(--font-style-label-s-size); line-height: var(--font-style-label-s-line-height); font-weight: var(--font-style-label-s-weight); letter-spacing: var(--font-style-label-s-letter-spacing); } .t-label-xs { font-family: var(--font-family-sans); font-size: var(--font-style-label-xs-size); line-height: var(--font-style-label-xs-line-height); font-weight: var(--font-style-label-xs-weight); letter-spacing: var(--font-style-label-xs-letter-spacing); } /* "-caps": o próprio nome do estilo no Figma já é versalete — por isso a única classe da família que acrescenta `text-transform` por conta própria. */ .t-label-xs-caps { font-family: var(--font-family-sans); font-size: var(--font-style-label-xs-caps-size); line-height: var(--font-style-label-xs-caps-line-height); font-weight: var(--font-style-label-xs-caps-weight); letter-spacing: var(--font-style-label-xs-caps-letter-spacing); text-transform: uppercase; } .t-editorial-l { font-family: var(--font-family-editorial); font-size: var(--font-style-editorial-l-size); line-height: var(--font-style-editorial-l-line-height); font-weight: var(--font-style-editorial-l-weight); letter-spacing: var(--font-style-editorial-l-letter-spacing); } .t-editorial-m { font-family: var(--font-family-editorial); font-size: var(--font-style-editorial-m-size); line-height: var(--font-style-editorial-m-line-height); font-weight: var(--font-style-editorial-m-weight); letter-spacing: var(--font-style-editorial-m-letter-spacing); } .t-code-m { font-family: var(--font-family-mono); font-size: var(--font-style-code-m-size); line-height: var(--font-style-code-m-line-height); font-weight: var(--font-style-code-m-weight); letter-spacing: var(--font-style-code-m-letter-spacing); } .t-code-s { font-family: var(--font-family-mono); font-size: var(--font-style-code-s-size); line-height: var(--font-style-code-s-line-height); font-weight: var(--font-style-code-s-weight); letter-spacing: var(--font-style-code-s-letter-spacing); } /* ========================================================================== 3. Layout — container, seção, grade ========================================================================== */ .container { width: 100%; max-width: var(--container-section); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); } .container--prose { max-width: var(--container-prose); } .container--wide { max-width: var(--container-wide); } .secao { padding-block: clamp(2rem, 5vw, 4.5rem); } /* Grade genérica: `--cols` e `--gap` são propriedades customizadas por instância, não uma escada de modificadores — quem monta a tela escolhe o número de colunas no `style` do bloco. */ .grid { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: var(--gap, var(--space-6)); } .stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-4)); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-3)); } /* ========================================================================== 4. Botão — 7 variantes × 3 tamanhos × presentation `gradient` ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 7.5rem; /* 120px — largura mínima do Figma, valor arbitrário lá também */ height: var(--size-control-md); padding-inline: var(--space-4); border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; font-family: var(--font-family-sans); font-size: var(--font-style-label-s-size); line-height: var(--font-style-label-s-line-height); font-weight: var(--font-style-label-s-weight); letter-spacing: var(--font-style-label-s-letter-spacing); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-base), border-color var(--duration-base), color var(--duration-base), box-shadow var(--duration-base), filter var(--duration-base); } .btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; box-shadow: none; } /* Foco por dentro, sem recuo — a assinatura de `lib/foco.ts` (`ANEL_DE_FOCO`). */ .btn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; } /* -- Tamanhos: 32 / 36 / 40 px, Label/S nos dois primeiros, Label/M no grande -- */ .btn--sm { height: var(--size-control-sm); padding-inline: var(--space-3); } .btn--md { height: var(--size-control-md); padding-inline: var(--space-4); } .btn--lg { height: var(--size-control-lg); padding-inline: var(--space-6); font-size: var(--font-style-label-m-size); line-height: var(--font-style-label-m-line-height); font-weight: var(--font-style-label-m-weight); letter-spacing: var(--font-style-label-m-letter-spacing); } /* -- Variantes -- */ .btn--primary { background: var(--color-action-primary); color: var(--color-text-on-primary); } .btn--primary:hover { background: var(--color-action-primary-hover); box-shadow: var(--shadow-md); } .btn--primary:active { background: var(--color-action-primary-active); } .btn--primary:disabled { background: var(--color-action-disabled); color: var(--color-text-disabled); } .btn--secondary { border-color: var(--color-border-default); background: var(--color-surface-sunken); color: var(--color-text-default); } .btn--secondary:hover { border-color: var(--color-border-strong); background: var(--color-surface-muted); box-shadow: var(--shadow-md); } .btn--secondary:active { border-color: var(--color-border-strong); background: var(--color-surface-muted); } .btn--secondary:disabled { border-color: var(--color-border-disabled); background: var(--color-action-disabled); color: var(--color-text-disabled); } .btn--tertiary { border-color: var(--color-border-brand); background: transparent; color: var(--color-text-brand); } .btn--tertiary:hover { background: var(--color-surface-brand-subtle); box-shadow: var(--shadow-md); } .btn--tertiary:active { background: var(--color-surface-brand-subtle); } .btn--tertiary:disabled { border-color: var(--color-border-disabled); background: transparent; color: var(--color-text-disabled); } .btn--ghost { background: transparent; color: var(--color-text-default); } .btn--ghost:hover { background: var(--color-surface-sunken); box-shadow: var(--shadow-md); } .btn--ghost:active { background: var(--color-surface-muted); } .btn--ghost:disabled { background: transparent; color: var(--color-text-disabled); } .btn--danger { background: var(--color-action-danger); color: var(--color-text-on-danger); } .btn--danger:hover, .btn--danger:active { background: var(--color-action-danger-hover); } .btn--danger:disabled { background: var(--color-action-disabled); color: var(--color-text-disabled); } .btn--success { background: var(--color-action-success); color: var(--color-text-on-primary); } .btn--success:hover, .btn--success:active { background: var(--color-action-success-hover); } .btn--success:disabled { background: var(--color-action-disabled); color: var(--color-text-disabled); } /* Link: sem preenchimento, sem `pressed` (idêntico ao Figma — nó sem estado pressionado próprio), o retorno ao ponteiro é o sublinhado no hover. */ .btn--link { min-width: 0; height: auto; padding-inline: 0; background: transparent; color: var(--color-text-brand); } .btn--link:hover { text-decoration: underline; } .btn--link:disabled { color: var(--color-text-disabled); text-decoration: none; } /* -- Apresentação `gradient` — só `primary` e `danger` respondem -- */ .btn--gradient.btn--primary { background: linear-gradient(to bottom, var(--gradient-brand-start), var(--gradient-brand-end)); border-color: var(--gradient-brand-start); color: var(--color-text-on-media); box-shadow: 0 2px 8px rgb(0 0 0 / 8%); } .btn--gradient.btn--primary:hover { filter: brightness(1.05); box-shadow: var(--shadow-md); } .btn--gradient.btn--primary:active { filter: brightness(0.95); } .btn--gradient.btn--primary:disabled { background: var(--color-action-disabled); border-color: var(--color-border-disabled); color: var(--color-text-disabled); box-shadow: none; filter: none; } .btn--gradient.btn--danger { background: linear-gradient(to bottom, var(--gradient-danger-start), var(--gradient-danger-end)); border-color: var(--gradient-danger-start); color: var(--color-text-on-media); box-shadow: 0 2px 8px rgb(0 0 0 / 8%); } .btn--gradient.btn--danger:hover { filter: brightness(1.05); box-shadow: var(--shadow-md); } .btn--gradient.btn--danger:active { filter: brightness(0.95); } .btn--gradient.btn--danger:disabled { background: var(--color-action-disabled); border-color: var(--color-border-disabled); color: var(--color-text-disabled); box-shadow: none; filter: none; } /* ========================================================================== 5. Badge — pílula de classificação ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.125rem var(--space-2-5); border-radius: var(--radius-pill); font-family: var(--font-family-sans); font-size: var(--font-style-label-xs-size); line-height: var(--font-style-label-xs-line-height); font-weight: var(--font-style-label-xs-weight); letter-spacing: var(--font-style-label-xs-letter-spacing); white-space: nowrap; } /* Sutil (padrão do componente React) */ .badge--subtle.badge--brand { background: var(--color-surface-brand-subtle); color: var(--color-text-brand); } .badge--subtle.badge--neutral { background: var(--color-surface-sunken); color: var(--color-text-muted); } .badge--subtle.badge--success { background: var(--color-surface-success-subtle); color: var(--color-text-success); } .badge--subtle.badge--warning { background: var(--color-surface-warning-subtle); color: var(--color-text-warning); } .badge--subtle.badge--danger { background: var(--color-surface-danger-subtle); color: var(--color-text-danger); } .badge--subtle.badge--info { background: var(--color-surface-info-subtle); color: var(--color-feedback-info); } /* Sólido — texto escuro em success/warning é medição de contraste do próprio design system (branco sobre esses preenchimentos reprova WCAG 1.4.3), não preferência estética. */ .badge--solid.badge--brand { background: var(--color-action-primary); color: var(--color-text-on-primary); } .badge--solid.badge--neutral { background: var(--color-surface-muted); color: var(--color-text-default); } .badge--solid.badge--success { background: var(--color-feedback-success); color: var(--color-text-default); } .badge--solid.badge--warning { background: var(--color-feedback-warning); color: var(--color-text-default); } .badge--solid.badge--danger { background: var(--color-feedback-danger); color: var(--color-text-on-primary); } .badge--solid.badge--info { background: var(--color-feedback-info); color: var(--color-text-on-primary); } /* ========================================================================== 6. Card ========================================================================== */ .card { background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .card__cabecalho, .card__rodape { padding: var(--space-3) var(--space-4); } .card__cabecalho { border-bottom: 1px solid var(--color-border-default); } .card__rodape { border-top: 1px solid var(--color-border-default); } .card__corpo { padding: var(--space-3) var(--space-4); } /* Card clicável: mesmo tratamento do componente React — sombra sobe no hover, anel por FORA no foco (a borda do card é estrutural e pode carregar `tone`, então o anel não pode ficar por dentro sem competir com ela). */ .card--interativo { cursor: pointer; transition: box-shadow var(--duration-base); } .card--interativo:hover { box-shadow: var(--shadow-md); } .card--interativo:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; } /* ========================================================================== 7. Stat ========================================================================== */ .stat { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); background: var(--color-surface-raised); overflow-wrap: break-word; } .stat--stacked { align-items: flex-start; text-align: left; } .stat--centered { align-items: center; text-align: center; } .stat__icone { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--size-avatar-xl); height: var(--size-avatar-xl); border-radius: var(--radius-pill); background: var(--color-surface-brand-subtle); color: var(--color-text-brand); } .stat__icone svg { width: var(--size-icon-xl); height: var(--size-icon-xl); } .stat__par { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; min-width: 0; margin: 0; } /* Ordem de leitura no DOM é sempre rótulo -> valor; `centered` só inverte o que se vê. */ .stat--centered .stat__par { flex-direction: column-reverse; } .stat__rotulo { margin: 0; font-size: var(--font-style-body-s-size); color: var(--color-text-muted); } /* Sempre neutro: o valor carrega magnitude, não julgamento — quem carrega direção é a variação. */ .stat__valor { margin: 0; font-family: var(--font-family-display); font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); color: var(--color-text-default); } .stat__variacao { display: inline-flex; align-items: center; gap: var(--space-1); width: 100%; min-width: 0; margin: 0; font-size: var(--font-style-body-s-size); font-weight: var(--font-weight-medium); } .stat__variacao svg { width: 1rem; height: 1rem; flex-shrink: 0; } .stat__variacao--up { color: var(--color-text-success); } .stat__variacao--down { color: var(--color-text-danger); } .stat__variacao--neutral { color: var(--color-text-muted); } .stat__comparacao { color: var(--color-text-muted); font-weight: var(--font-style-body-s-weight); } /* ========================================================================== 8. Alert ========================================================================== */ .alerta { display: flex; align-items: flex-start; gap: var(--space-3); border-radius: var(--radius-card); border-left: 4px solid transparent; } .alerta--default { padding: var(--space-3) var(--space-4); } .alerta--compact { padding: var(--space-2) var(--space-3); } .alerta--success { background: var(--color-surface-success-subtle); border-left-color: var(--color-feedback-success); } .alerta--warning { background: var(--color-surface-warning-subtle); border-left-color: var(--color-feedback-warning); } .alerta--danger { background: var(--color-surface-danger-subtle); border-left-color: var(--color-feedback-danger); } .alerta--info { background: var(--color-surface-info-subtle); border-left-color: var(--color-feedback-info); } .alerta__corpo { min-width: 0; flex: 1; } .alerta__titulo { margin: 0; font-size: var(--font-style-body-s-size); font-weight: var(--font-weight-medium); color: var(--color-text-default); } .alerta__descricao { margin: var(--space-1) 0 0; font-size: var(--font-style-body-s-size); color: var(--color-text-muted); } .alerta__fechar { flex-shrink: 0; border-radius: var(--radius-control); padding: var(--space-1); color: var(--color-text-muted); line-height: 1; transition: color var(--duration-base); } .alerta__fechar:hover { color: var(--color-text-default); } .alerta__fechar:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; } /* ========================================================================== 9. Campo — input/textarea ========================================================================== */ .campo { display: flex; flex-direction: column; gap: var(--space-1-5); width: 100%; min-width: 0; } .campo__rotulo { font-size: var(--font-style-label-s-size); line-height: var(--font-style-label-s-line-height); font-weight: var(--font-style-label-s-weight); color: var(--color-text-default); } /* O invólucro carrega borda/altura/recuo; input e textarea ficam transparentes por dentro — é o que permite prefixo/sufixo dentro da mesma borda e o foco no contêiner inteiro (`focus-within`), não só na área de digitação. */ .campo__caixa { display: flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-border-input); border-radius: var(--radius-control); background: var(--color-surface-default); transition: border-color var(--duration-base), background-color var(--duration-base); } .campo__caixa:hover { border-color: var(--color-border-input-hover); } .campo__caixa:focus-within { outline: 2px solid var(--color-border-focus); outline-offset: 2px; } .campo__caixa input, .campo__caixa textarea { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font: inherit; color: var(--color-text-default); } .campo__caixa textarea { resize: vertical; min-height: var(--size-textarea-md); padding-block: var(--space-2); } .campo__caixa input::placeholder, .campo__caixa textarea::placeholder { color: var(--color-text-placeholder); } .campo__prefixo, .campo__sufixo { flex-shrink: 0; color: var(--color-text-muted); user-select: none; } /* -- Tamanhos: Small 32 · Medium 36 · Large 40 · Touch 44 px -- */ .campo--sm .campo__caixa { height: var(--size-control-sm); padding-inline: var(--space-2-5); font-size: var(--font-style-body-s-size); } .campo--md .campo__caixa { height: var(--size-control-md); padding-inline: var(--space-3); font-size: var(--font-style-body-s-size); } .campo--lg .campo__caixa { height: var(--size-control-lg); padding-inline: var(--space-3); font-size: var(--font-style-body-m-size); } .campo--touch .campo__caixa { height: var(--size-control-touch-min); padding-inline: var(--space-3-5); font-size: var(--font-style-body-m-size); } /* Textarea ignora a altura fixa do tamanho — ela vem de `min-height` acima. */ .campo__caixa:has(textarea) { height: auto; align-items: flex-start; } /* -- Estados: desabilitado vence a validação -- */ .campo--erro .campo__caixa { border-color: var(--color-border-danger); } .campo--sucesso .campo__caixa { border-color: var(--color-border-success); } /* Read-only usa a borda sutil de cartão, não a de formulário — o campo continua legível e para de se anunciar como área de digitação. */ .campo--soleitura .campo__caixa { border-color: var(--color-border-subtle); background: var(--color-surface-sunken); } .campo--desabilitado .campo__caixa, .campo__caixa:has(:disabled) { border-color: var(--color-border-disabled); background: var(--color-surface-muted); color: var(--color-text-disabled); cursor: not-allowed; } .campo--desabilitado .campo__prefixo, .campo--desabilitado .campo__sufixo, .campo__caixa:has(:disabled) .campo__prefixo, .campo__caixa:has(:disabled) .campo__sufixo { color: inherit; } .campo__dica { font-size: var(--font-style-body-xs-size); color: var(--color-text-muted); } .campo__mensagem--erro { font-size: var(--font-style-body-xs-size); color: var(--color-text-danger); } .campo__mensagem--sucesso { font-size: var(--font-style-body-xs-size); color: var(--color-text-success); } /* ========================================================================== 10. Divisor ========================================================================== */ .divisor { height: 0; margin: var(--space-6) 0; border: none; border-top: 1px solid var(--color-border-subtle); } .divisor--forte { border-top-color: var(--color-border-strong); } /* ========================================================================== 11. Receitas do design system — cópia fiel de `packages/ui/src/styles/index.css` ========================================================================== */ /* A superfície de vidro. TRÊS camadas, e a terceira é a que quase toda implementação esquece: 1. fundo translúcido -> `surface.glass` 2. desfoque do que está atrás -> `backdrop-filter` 3. UMA LINHA DE LUZ DE 1px NO TOPO, POR DENTRO -> simula a quina do vidro pegando luz A borda é 2px, não 1px: dá presença sem peso. ARMADILHA: o vidro só existe se houver o que desfocar. Sobre cor chapada, desfocar uma cor chapada devolve a mesma cor chapada. Quem usar esta classe precisa de fundo com variação atrás — imagem, degradê ou traçado (ver `.fd-linhas`). */ .superficie-vidro { background: var(--color-surface-glass); border: 2px solid var(--color-border-glass); border-radius: var(--radius-card); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); box-shadow: 0 2px 12px rgb(0 0 0 / 8%), inset 0 1px 0 rgb(255 255 255 / 35%); } /* O inverso do vidro: painel AFUNDADO, com sombra e anel INTERNOS. Usado para agrupar conteúdo secundário DENTRO de uma superfície que já é elevada. */ .superficie-cavada { border-radius: var(--radius-control); background: rgb(0 0 0 / 3%); border: 1px solid rgb(0 0 0 / 5%); box-shadow: inset 0 2px 8px rgb(0 0 0 / 6%), inset 0 0 0 1px rgb(0 0 0 / 5%); } /* A escala de toque, em três níveis. O que faz parecer cara não é o `scale` — é a CURVA (saída rápida, acomodação longa) mais o `:active` voltando em 0.15s contra os 0.4s da ida. `sutil` para cartão de conteúdo, `eleva` para cartão clicável, `forte` só para ação flutuante — 1.08 num cartão de grade empurra os vizinhos e parece defeito. */ .realce-sutil, .realce-eleva, .realce-forte { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .realce-sutil:hover { transform: scale(1.015); box-shadow: 0 2px 12px rgb(0 0 0 / 8%); } .realce-eleva:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 4px 16px rgb(0 0 0 / 10%); } .realce-forte:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgb(0 0 0 / 15%); } .realce-sutil:active, .realce-eleva:active, .realce-forte:active { transform: scale(0.985); transition-duration: 0.15s; } @media (prefers-reduced-motion: reduce) { .realce-sutil, .realce-eleva, .realce-forte { transition: none; } .realce-sutil:hover, .realce-eleva:hover, .realce-forte:hover, .realce-sutil:active, .realce-eleva:active, .realce-forte:active { transform: none; } } /* ========================================================================== 12. Composição de site (`s-*`) — o melhor de `tema-aplicado.css` e `portal.css` ========================================================================== */ /* ---------- Etiqueta / título / linha de texto ---------- */ .s-etiqueta { display: block; margin-bottom: var(--space-3); font-size: var(--font-style-label-xs-caps-size); font-weight: 700; letter-spacing: var(--font-style-label-xs-caps-letter-spacing); text-transform: uppercase; color: var(--color-text-accent); } .s-titulo { margin: 0 0 var(--space-3); font-family: var(--font-family-display); font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-brand); } .s-linha { margin: 0; max-width: 58ch; font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.6; color: var(--color-text-muted); } /* Título com ação ao lado ("Serviços · ver mais"): alinhado pela base do título, não pelo centro — centralizado, a ação flutua alto ao lado de um título em display. */ .s-titulo-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-3); } .s-titulo-linha .s-titulo { margin-bottom: 0; } /* ---------- Hero: vidro/etiqueta sobre o gradiente de marca ---------- */ .s-hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--gradient-brand-start), var(--gradient-brand-end)); color: var(--color-text-on-media); } /* As duas manchas de luz existem para dar ao vidro o que desfocar. */ .s-hero::before, .s-hero::after { content: ""; position: absolute; z-index: -1; border-radius: var(--radius-pill); filter: blur(90px); opacity: 0.35; } .s-hero::before { top: -10rem; right: -6rem; width: 24rem; height: 24rem; background: var(--color-action-primary); } .s-hero::after { bottom: -14rem; left: -6rem; width: 26rem; height: 26rem; background: var(--gradient-brand-start); } .s-hero .s-titulo, .s-hero .s-linha { color: var(--color-text-on-media); } .s-hero .s-linha { opacity: 0.85; } /* `text.onMedia`, não o acento: o hero é superfície de mídia (fundo de marca, escuro nos dois temas), e o único token com legibilidade garantida ali é `onMedia` (D-117). */ .s-hero .s-etiqueta { color: var(--color-text-on-media); opacity: 0.9; } /* Grade: texto | atmosfera (só quando há atmosfera — tec.capital). */ .s-hero__grade { position: relative; z-index: 1; display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 60rem) { .s-hero__grade:has(.s-hero__atmosfera) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } } .s-hero__conteudo { position: relative; z-index: 2; max-width: 36rem; } .s-hero__atmosfera { position: relative; z-index: 1; min-height: 12rem; pointer-events: none; } @media (min-width: 60rem) { .s-hero__atmosfera { min-height: 22rem; } } .s-hero__orb { position: absolute; border-radius: var(--radius-pill); filter: blur(48px); opacity: 0.45; } .s-hero__orb--a { top: 10%; right: 8%; width: 14rem; height: 14rem; background: var(--color-action-primary); } .s-hero__orb--b { bottom: 5%; left: 15%; width: 18rem; height: 18rem; background: var(--gradient-brand-start); opacity: 0.35; } .s-hero__mesh { position: absolute; inset: 0; border: none; border-radius: 0; opacity: 0.7; background: radial-gradient( ellipse 55% 40% at 70% 35%, color-mix(in srgb, var(--color-action-primary) 28%, transparent), transparent 70% ), radial-gradient( ellipse 45% 50% at 40% 70%, color-mix(in srgb, var(--color-text-on-media) 12%, transparent), transparent 65% ), repeating-linear-gradient( -18deg, transparent, transparent 28px, color-mix(in srgb, var(--color-text-on-media) 7%, transparent) 28px, color-mix(in srgb, var(--color-text-on-media) 7%, transparent) 29px ); box-shadow: none; mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%); animation: s-hero-mesh 18s ease-in-out infinite alternate; } @keyframes s-hero-mesh { from { transform: translate(0, 0) scale(1); } to { transform: translate(-2%, 1.5%) scale(1.03); } } @media (prefers-reduced-motion: reduce) { .s-hero__mesh { animation: none; } } .s-hero__acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); } /* CTA secundário legível sobre o gradiente de marca (superfície de mídia). */ .s-hero .s-hero__cta-sec.btn--secondary { background: color-mix(in srgb, var(--color-text-on-media) 12%, transparent); border-color: color-mix(in srgb, var(--color-text-on-media) 45%, transparent); color: var(--color-text-on-media); } .s-hero .s-hero__cta-sec.btn--secondary:hover { background: color-mix(in srgb, var(--color-text-on-media) 20%, transparent); border-color: var(--color-text-on-media); color: var(--color-text-on-media); } /* ---------- Vidro avulso (superfície seletiva — alinhar à receita superficie-vidro) ---------- */ .s-vidro { position: relative; z-index: 1; background: var(--color-surface-glass); border: 2px solid var(--color-border-glass); border-radius: var(--radius-card); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 2px 12px rgb(0 0 0 / 8%), inset 0 1px 0 rgb(255 255 255 / 35%); } .s-vidro__lista { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; } .s-vidro__item { display: flex; gap: 0.875rem; align-items: baseline; color: var(--color-text-on-media); } /* A numeração em acento — o marcador do dado mais importante da lista. */ .s-num { min-width: 1.5rem; font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--font-style-body-s-size); color: var(--color-action-primary); } /* ---------- Faixa de números ---------- */ .s-numeros { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); background: var(--color-border-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); overflow: hidden; } .s-numero { background: var(--color-surface-default); border-left: 3px solid var(--color-border-brand); padding: var(--space-5) var(--space-5) var(--space-5) var(--space-4); } /* O primeiro número é o "dado crítico": o acento é reservado a ele, um por bloco. */ .s-numero:first-child { border-left-color: var(--color-border-accent); } .s-numero:first-child .s-numero__valor { color: var(--color-text-accent); } .s-numero__valor { margin: 0; font-family: var(--font-family-display); font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-text-brand); } .s-numero__rotulo { margin: var(--space-2) 0 0; font-size: var(--font-style-body-s-size); line-height: 1.45; color: var(--color-text-muted); } /* ---------- Grade de cartões e de passos ---------- */ .s-cartoes { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: var(--space-8); } .s-passos { display: grid; gap: var(--space-7) var(--space-10); grid-template-columns: 1fr; margin-top: var(--space-8); } /* Quatro passos: 2x2 no meio, 4x1 no largo. `auto-fit` deixaria o quarto sozinho numa linha. */ @media (min-width: 40rem) { .s-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 68rem) { .s-passos { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .s-passo__num { font-family: var(--font-family-display); font-size: var(--font-style-heading-l-size); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-text-accent); } .s-passo h3 { margin: var(--space-2) 0 var(--space-1-5); font-size: 1.0625rem; color: var(--color-text-default); } .s-passo p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-muted); } /* ---------- Bloco de chamada: o único fundo de acento da página ---------- */ .s-chamada { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); background: var(--color-surface-accent-subtle); border: 1px solid var(--color-border-accent); border-radius: var(--radius-card); padding: clamp(1.5rem, 3vw, 2.25rem); } .s-chamada h2 { margin: 0 0 var(--space-1-5); font-family: var(--font-family-display); font-size: var(--font-style-heading-l-size); color: var(--color-text-default); } .s-chamada p { margin: 0; max-width: 46ch; color: var(--color-text-muted); } /* ---------- Rodapé e marca ---------- */ .s-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-8); border-top: 1px solid var(--color-border-subtle); color: var(--color-text-subtlest); font-size: var(--font-style-body-s-size); } .s-marca { display: flex; align-items: center; gap: var(--space-2-5); font-family: var(--font-family-display); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-brand); } /* A segunda palavra da marca em acento. */ .s-marca span { color: var(--color-text-accent); } .s-marca img { height: 1.75rem; width: auto; } .s-hero .s-marca { color: var(--color-text-on-media); } .s-hero .s-marca span { color: var(--color-action-primary); } /* ---------- Medidor de proporção 60/30/10 ---------- */ .s-dose { display: flex; height: 0.5rem; margin-top: var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-pill); overflow: hidden; } .s-dose i { display: block; font-style: normal; } .s-dose__base { flex: 60; background: var(--color-surface-sunken); } .s-dose__marca { flex: 30; background: var(--color-text-brand); } .s-dose__acento { flex: 10; background: var(--color-action-primary); } /* ---------- Fundo de linhas: o que o vidro tem para desfocar ---------- */ .fd-linhas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* As duas variantes saem de token — o desenho não carrega cor nenhuma, herda `currentColor`. */ .s-hero .fd-linhas { color: var(--color-text-on-media); opacity: 0.28; } .s-servicos .fd-linhas { color: var(--color-text-brand); opacity: 0.5; } /* ---------- Faixa de serviços: vidro sobre fundo CLARO ---------- */ .s-servicos { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(2rem, 5vw, 4.5rem); /* Três paradas, não duas: o vidro precisa de variação de luminância atrás dele. */ background: linear-gradient( 160deg, var(--color-surface-default) 0%, var(--color-surface-brand-subtle) 55%, var(--color-surface-accent-subtle) 100% ); } .s-servicos > .container { position: relative; z-index: 1; } .s-servicos__grade { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-top: clamp(1.5rem, 3vw, 1.75rem); } .s-servico { display: flex; flex-direction: column; align-items: center; gap: var(--space-2-5); text-align: center; padding: var(--space-5) var(--space-3-5); background: var(--color-surface-glass); border: 1px solid var(--color-border-glass); border-radius: var(--radius-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--color-text-default); font-size: var(--font-style-body-s-size); line-height: 1.35; } /* Um único serviço recebe o acento — a mesma regra do "um dado crítico por bloco". */ .s-servico:first-child { border-color: var(--color-border-accent); } .s-servico__marca { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-control); background: var(--color-action-primary); color: var(--color-text-on-primary); font-family: var(--font-family-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--font-style-body-s-size); } /* ---------- Navegação: a pílula de vidro (do `portal.css`) ---------- */ .s-nav { position: sticky; top: var(--space-4); z-index: var(--z-index-sticky); display: flex; align-items: center; gap: var(--space-2); min-height: 52px; margin-block: var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-glass); border: 2px solid var(--color-border-glass); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); box-shadow: 0 2px 12px rgb(0 0 0 / 8%); } .s-nav__marca { display: flex; align-items: center; gap: var(--space-2); padding-inline: var(--space-2); font-family: var(--font-family-display); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8125rem; color: var(--color-text-brand); white-space: nowrap; } .s-nav__marca span { color: var(--color-text-accent); } .s-nav__marca img { height: 1.5rem; width: auto; } .s-nav__itens { display: flex; flex: 1; gap: 0.125rem; list-style: none; margin: 0; padding: 0; min-width: 0; } .s-nav__itens a { display: block; padding: 0.4rem 0.7rem; border-radius: var(--radius-pill); font-size: var(--font-style-body-s-size); font-weight: 500; color: var(--color-text-muted); text-decoration: none; white-space: nowrap; transition: background-color var(--duration-base), color var(--duration-base); } .s-nav__itens a:hover { background: var(--color-surface-brand-subtle); color: var(--color-text-brand); } .s-nav__itens a[aria-current="page"] { background: var(--color-surface-brand-subtle); color: var(--color-text-brand); font-weight: 600; } .s-nav__acao { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-2); } /* O botão hambúrguer só aparece no mobile (regra abaixo). */ .s-nav__toggle { display: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-default); } .s-nav__toggle:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; } @media (max-width: 59.99rem) { .s-nav { position: sticky; top: max(var(--space-3), env(safe-area-inset-top, 0px)); z-index: var(--z-index-sticky); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marca toggle" "acao acao"; align-items: center; column-gap: var(--space-2); row-gap: var(--space-2); border-radius: var(--radius-xl); /* Sem blur: no iOS/Android o backdrop-filter cria containing block e corta dropdowns (idioma) e o painel do menu que saem da pílula. */ overflow: visible; background: var(--color-surface-raised); border: 1px solid var(--color-border-default); backdrop-filter: none; -webkit-backdrop-filter: none; } [data-theme="dark"] .s-nav { background: var(--color-surface-raised); border-color: var(--color-border-default); } .s-nav__marca { grid-area: marca; min-width: 0; } .s-nav__toggle { grid-area: toggle; display: inline-flex; width: 2.75rem; height: 2.75rem; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .s-nav__acao { grid-area: acao; position: relative; z-index: var(--z-index-dropdown); width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); } /* Painel opaco (não vidro): no iOS o glass + blur deixa os links ilegíveis sobre o hero. */ .s-nav__itens { display: none; position: absolute; left: 0; right: 0; top: calc(100% + var(--space-2)); z-index: var(--z-index-popover); flex-direction: column; gap: var(--space-1); margin: 0; padding: var(--space-2); list-style: none; background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); max-height: min(70vh, 24rem); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .s-nav__itens[data-aberto] { display: flex; } .s-nav__itens a { display: flex; align-items: center; min-height: 2.75rem; padding: var(--space-3); color: var(--color-text-default); font-weight: 600; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .s-nav__itens a:hover, .s-nav__itens a:active { background: var(--color-surface-brand-subtle); color: var(--color-text-brand); } .s-nav__toggle { display: inline-flex; } } /* Fundo escurecido atrás do menu mobile — cobre a página sem cobrir a pílula. */ .s-nav__fundo { position: fixed; inset: 0; z-index: calc(var(--z-index-sticky) - 1); margin: 0; padding: 0; border: 0; background: color-mix(in srgb, #000 45%, transparent); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .s-nav__fundo[hidden] { display: none !important; } @media (min-width: 60rem) { .s-nav__fundo { display: none !important; } } @media (max-width: 59.99rem) { section[id] { scroll-margin-top: 8.5rem; } } /* ---------- Alternador de tema ---------- */ .s-tema { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border: 1px solid var(--color-border-glass); border-radius: var(--radius-pill); background: transparent; color: inherit; transition: background-color var(--duration-base); } .s-tema:hover { background: var(--color-surface-brand-subtle); } .s-tema:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; } .s-tema svg { width: var(--size-icon-md); height: var(--size-icon-md); } /* ---------- Voltar ao topo ---------- */ .s-voltar-topo { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-index-sticky); display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill); background: var(--color-action-primary); color: var(--color-text-on-primary); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(0.5rem); pointer-events: none; transition: opacity var(--duration-base), transform var(--duration-base), background-color var(--duration-base); } /* `site.js` liga este atributo ao rolar a página além de uma altura mínima. */ .s-voltar-topo[data-visivel] { opacity: 1; transform: translateY(0); pointer-events: auto; } .s-voltar-topo:hover { background: var(--color-action-primary-hover); } .s-voltar-topo:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; } .s-voltar-topo svg { width: var(--size-icon-md); height: var(--size-icon-md); } /* ========================================================================== Ajustes de tema escuro ========================================================================== Queixa do cliente: "modo escuro com visibilidade ruim". Medido no navegador, o problema não era gosto, era contraste: | par | razão | | -------------------------------------- | ------ | | surface/raised (#1F1F1F) x página (#161616) | 1,10:1 | | border/subtle (#3A3A3A) x raised | 1,53:1 | | border/default (#565656) x raised | 2,25:1 | | border/strong (#6E6E6E) x raised | 3,23:1 | | surface/sunken (#0D0D0D) x página | 1,08:1 | A WCAG 1.4.11 pede 3:1 para o limite que identifica um componente, e só `border/strong` entrega isso no escuro. Daí o princípio deste bloco: **No escuro a elevação vem da BORDA, não da sombra.** Sombra é preta com alfa — sobre #161616 ela não existe. E `surface/sunken` é MAIS escuro que a página: no claro afunda, no escuro desaparece. Onde "afundado" era o canal de leitura, aqui ele sobe para `surface/muted`. Nada abaixo inventa cor: tudo é token do tenant ativo, então vale igual para `tec` e para `ordo360`. E tudo está escopado em [data-theme="dark"] — o tema claro não muda uma linha. */ [data-theme="dark"] .card, [data-theme="dark"] .stat { border-color: var(--color-border-strong); /* A sombra não some por capricho: ela é preta sobre preto, some sozinha e só suja a borda que agora carrega a elevação. */ box-shadow: none; } [data-theme="dark"] .card--interativo:hover { background: var(--color-surface-muted); border-color: var(--color-border-strong); } /* Botão secundário: `surface/sunken` no escuro é #0D0D0D — mais escuro que a página. O botão virava um buraco com borda. Sobe para `surface/muted`. */ [data-theme="dark"] .btn--secondary { background: var(--color-surface-muted); border-color: var(--color-border-strong); } /* Mesmo motivo no badge neutro: fundo afundado não se lê sobre a página. */ [data-theme="dark"] .badge--subtle.badge--neutral { background: var(--color-surface-muted); color: var(--color-text-default); } /* Divisor e separadores internos de cartão em `border/subtle` (1,53:1) somem. Um divisor não é limite de componente, mas precisa ser visto. */ [data-theme="dark"] .divisor, [data-theme="dark"] .card__cabecalho, [data-theme="dark"] .card__rodape, [data-theme="dark"] .s-rodape { border-color: var(--color-border-default); } /* Campo de formulário: no escuro o fundo era o mesmo da página e o campo só existia pela borda. A superfície elevada devolve a caixa. */ [data-theme="dark"] .campo__caixa { background: var(--color-surface-raised); } /* A pílula de vidro da navegação: branco a 45% sobre fundo escuro vira um retângulo leitoso. No escuro o vidro é escuro — alfa branco baixo e a linha de luz que o design system já define como `border/glass`. */ [data-theme="dark"] .s-nav { background: var(--color-alpha-white07); border: 1px solid var(--color-border-glass); } /* Mobile: superfície sólida (sem vidro) para não cortar dropdowns e manter contraste. */ @media (max-width: 59.99rem) { [data-theme="dark"] .s-nav { background: var(--color-surface-raised); border: 1px solid var(--color-border-default); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Painel cavado: as três camadas eram pretas com alfa (invisíveis no escuro). Invertidas para branco com alfa, mantendo a mesma receita de profundidade. */ [data-theme="dark"] .superficie-cavada { background: var(--color-alpha-white07); border-color: var(--color-alpha-white10); box-shadow: inset 0 2px 8px var(--color-alpha-black50), inset 0 0 0 1px var(--color-alpha-white07); } /* Vidro: a linha de luz superior a 35% de branco estoura no escuro. */ [data-theme="dark"] .superficie-vidro, [data-theme="dark"] .s-vidro { box-shadow: 0 2px 12px var(--color-alpha-black50), inset 0 1px 0 var(--color-alpha-white15); } /* A faixa de serviços tem três paradas para dar ao vidro o que desfocar. No escuro, `accent/subtle` é um marrom (#2E2200) e a mistura com o azul escuro suja a faixa inteira. Aqui a variação vem de superfície e marca, sem o ocre. */ [data-theme="dark"] .s-servicos { background: linear-gradient( 160deg, var(--color-surface-default) 0%, var(--color-surface-raised) 55%, var(--color-surface-brand-subtle) 100% ); } /* Faixa de números da base: as células usavam a cor da própria página, então no escuro a grade não se lia. */ [data-theme="dark"] .s-numeros { background: var(--color-border-strong); border-color: var(--color-border-strong); } [data-theme="dark"] .s-numero { background: var(--color-surface-raised); } /* ========================================================================== Ritmo vertical das páginas ========================================================================== Queixa do cliente: "falta espaçamento e alinhamento entre os blocos". Medido no navegador, eram três coisas, e nenhuma delas era alinhamento horizontal (todos os `.container` já batem no mesmo eixo, mesma largura): 1. `.secao` respirava 38,9 px em cima e embaixo — pouco para a densidade destas páginas. Duas seções vizinhas somavam ~78 px e colavam. 2. O hero do ordo360 ficou com ZERO respiro vertical: o painel de vidro saiu e levou junto o `padding` que morava no `.s-hero__grade`. O conteúdo encostava na navegação. 3. O vão entre o cabeçalho da seção (etiqueta → título → linha) e o conteúdo variava de 12 a 32 px conforme a seção, porque cada uma trazia a própria margem. Sem régua, a página inteira parece desalinhada mesmo quando cada bloco está certo. A régua abaixo é única e vale para os dois sites. Margens de irmãos colapsam em fluxo normal, então ela convive com as margens que os componentes já têm: vence a maior, nunca soma. */ /* 1. Respiro da seção — quase o dobro, e a mesma escala para a faixa de vidro. */ .secao, .s-servicos { padding-block: clamp(3.5rem, 7vw, 6.5rem); } /* 2. O respiro do hero passa a morar no contêiner, não no grid interno: assim vale para o hero de duas colunas (tec) e para o de coluna única (ordo). Padding generoso no desktop (~presença de primeiro viewport) sem forçar vazio. */ .s-hero > .container { padding-block: clamp(3.5rem, 10vw, 7.5rem); } .s-hero__grade { padding-block: 0; } /* 3. A régua do miolo. `space-8` entre blocos de conteúdo; o cabeçalho é um grupo mais apertado; e o primeiro bloco depois do cabeçalho ganha `space-10`, que é o degrau que separa "o que a seção diz" de "o que a seção mostra". */ :is(.secao, .s-servicos) > .container > * + * { margin-top: var(--space-8); } :is(.secao, .s-servicos) > .container > .s-etiqueta + .s-titulo { margin-top: var(--space-2); } :is(.secao, .s-servicos) > .container > .s-titulo + .s-linha { margin-top: var(--space-3); } :is(.secao, .s-servicos) > .container > :is(.s-titulo, .s-linha) + :not(.s-linha, .s-titulo) { margin-top: var(--space-10); } /* Âncora do menu não pode parar embaixo da navegação grudenta. */ section[id] { scroll-margin-top: 5rem; }