/* ========================================================================== DESIGN SYSTEM — ES7 -------------------------------------------------------------------------- Nenhuma regra aqui tem valor fixo de cor, medida ou fonte: tudo lê uma custom property emitida pelo Resolver (Design::cssVars). A composição de cada componente muda por atributo no : body[data-c-hero-layout="centered"] .ds-hero { ... } É assim que uma variante troca o layout sem markup novo e sem duplicar o tema. ========================================================================== */ /* -------------------------------------------------------------------------- 1. BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--ds-font-body); font-size: var(--ds-text-md); line-height: var(--ds-leading-normal); color: var(--ds-color-text); background: var(--ds-color-paper); display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--ds-font-heading); font-weight: var(--ds-heading-weight); letter-spacing: var(--ds-heading-track); line-height: var(--ds-leading-snug); color: inherit; margin: 0 0 var(--ds-space-3); text-wrap: balance; } p { margin: 0 0 var(--ds-space-4); } p:last-child { margin-bottom: 0; } a { color: inherit; } img, svg { max-width: 100%; } ul, ol { margin: 0; padding: 0; } ::selection { background: var(--ds-color-brand); color: #fff; } :focus-visible { outline: var(--ds-focus-w) solid var(--ds-color-brand); outline-offset: var(--ds-focus-o); border-radius: var(--ds-radius-sm); } .ds-field--ink :focus-visible { outline-color: var(--ds-color-on-ink); } /* -------------------------------------------------------------------------- 2. PRIMITIVAS DE LAYOUT -------------------------------------------------------------------------- */ .ds-shell { width: 100%; max-width: var(--ds-container); margin-inline: auto; padding-inline: var(--ds-gutter); position: relative; } .ds-shell--narrow { max-width: var(--ds-container-narrow); } .ds-section { padding-block: var(--ds-section-y); position: relative; } .ds-field--paper { background: var(--ds-color-paper); } .ds-field--surface { background: var(--ds-color-surface); } .ds-field--ink { background: var(--ds-color-ink); color: var(--ds-color-on-ink); } .ds-field--ink h1, .ds-field--ink h2, .ds-field--ink h3, .ds-field--ink h4, .ds-field--ink h5, .ds-field--ink h6 { color: var(--ds-color-on-ink); } /* Entre dois campos do mesmo tom, um fio marca o limite. Onde o tom muda, a própria troca de cor já é o limite. */ .ds-section + .ds-section::before { content: ''; position: absolute; inset: 0 auto auto 0; width: 100%; height: var(--ds-border-w); background: var(--ds-color-rule); } .ds-field--ink + .ds-section::before, .ds-section + .ds-field--ink::before { content: none; } .ds-muted { color: var(--ds-color-text-muted); } .ds-field--ink .ds-muted { color: color-mix(in srgb, var(--ds-color-on-ink) 68%, transparent); } .ds-measure { max-width: var(--ds-measure-normal); } /* -------------------------------------------------------------------------- 3. BOTÕES E LINKS -------------------------------------------------------------------------- */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: var(--ds-tap); padding: var(--ds-btn-pad-y) var(--ds-btn-pad-x); font: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-btn-weight); line-height: 1; border: var(--ds-border-w) solid transparent; border-radius: var(--ds-btn-radius); text-decoration: none; cursor: pointer; transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); } .ds-btn--primary { background: var(--ds-color-brand); color: var(--ds-color-on-brand); } .ds-btn--primary:hover { background: color-mix(in srgb, var(--ds-color-brand) 84%, #000); } .ds-btn--onink { background: var(--ds-color-on-ink); color: var(--ds-color-ink); } .ds-btn--onink:hover { background: #fff; } .ds-btn--outline { border-color: var(--ds-rule-strong); color: currentColor; background: transparent; } .ds-btn--outline:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent); } .ds-btn--block { width: 100%; } body[data-ds-hover="elevado"] .ds-btn:hover { transform: translateY(-2px); } .ds-link { font-weight: 600; color: var(--ds-color-brand-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); display: inline-flex; align-items: center; gap: var(--ds-space-2); } .ds-link:hover { text-decoration-color: currentColor; } .ds-field--ink .ds-link { color: var(--ds-color-on-ink); } /* -------------------------------------------------------------------------- 4. CABEÇALHO / NAVEGAÇÃO -------------------------------------------------------------------------- */ .ds-header { position: fixed; inset: 0 0 auto 0; z-index: 1030; transition: background var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease); border-bottom: var(--ds-border-w) solid transparent; } .ds-header .ds-shell { display: flex; align-items: center; gap: var(--ds-space-5); height: var(--ds-header-h); } body[data-ds-header="solid"] .ds-header { background: var(--ds-color-surface); border-bottom-color: var(--ds-color-rule); } /* Cabeçalho transparente: por padrão o texto é claro, porque ele repousa sobre um hero escuro. Tema de hero claro declara header.on_dark = nunca e o texto escurece — sem isso seria branco sobre branco. */ body[data-ds-header="transparent"][data-ds-header-ondark="auto"] .ds-header, body[data-ds-header="transparent"][data-ds-header-ondark="sempre"] .ds-header { background: transparent; color: var(--ds-color-on-ink); } body[data-ds-header="transparent"][data-ds-header-ondark="nunca"] .ds-header { background: transparent; color: var(--ds-color-text); } body[data-ds-header="floating"] .ds-header { padding-top: var(--ds-space-3); } body[data-ds-header="floating"] .ds-header .ds-shell { background: var(--ds-color-surface); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-raised); padding-inline: var(--ds-space-5); } /* Cabeçalho grudado no topo: fundo claro, então o texto tem de escurecer. O seletor precisa do body[data-ds-header] porque a regra do modo transparente tem especificidade maior — sem isso o menu continuava branco sobre fundo branco. */ body[data-ds-header][data-ds-header-ondark] .ds-header.is-stuck { background: color-mix(in srgb, var(--ds-color-surface) 94%, transparent); backdrop-filter: blur(14px); border-bottom-color: var(--ds-color-rule); color: var(--ds-color-text); } body[data-ds-header][data-ds-header-ondark] .ds-header.is-stuck .ds-nav__link { opacity: .78; } body[data-ds-header][data-ds-header-ondark] .ds-header.is-stuck .ds-nav__link:hover, body[data-ds-header][data-ds-header-ondark] .ds-header.is-stuck .ds-nav__link.is-active { opacity: 1; } /* O contorno do botão some quando herda a cor do texto claro. */ body[data-ds-header][data-ds-header-ondark] .ds-header.is-stuck .ds-btn--outline { border-color: var(--ds-color-text); color: var(--ds-color-text); } body[data-ds-header][data-ds-header-ondark] .ds-header.is-stuck .ds-btn--outline:hover { background: var(--ds-color-text); color: var(--ds-color-surface); } body[data-ds-header][data-ds-header-ondark] .ds-header.is-stuck .ds-burger { border-color: var(--ds-color-text); } .ds-brand { font-family: var(--ds-font-heading); font-weight: 800; font-size: 1.4rem; letter-spacing: var(--ds-heading-track); text-decoration: none; flex: none; color: inherit; } body[data-ds-header][data-ds-header-ondark] .ds-header.is-stuck .ds-brand { color: var(--ds-color-brand-text); } .ds-nav { display: flex; align-items: center; gap: var(--ds-space-1); margin-left: auto; } .ds-nav__link { padding: var(--ds-space-2) var(--ds-space-3); font-size: var(--ds-text-sm); font-weight: 500; text-decoration: none; color: inherit; opacity: .82; border-radius: var(--ds-radius-sm); white-space: nowrap; } .ds-nav__link:hover, .ds-nav__link.is-active { opacity: 1; } .ds-nav__cta { margin-left: var(--ds-space-3); } .ds-burger { display: none; margin-left: auto; width: var(--ds-tap); height: var(--ds-tap); align-items: center; justify-content: center; background: none; color: inherit; cursor: pointer; border: var(--ds-border-w) solid currentColor; border-radius: var(--ds-radius-sm); font-size: 1.2rem; } @media (max-width: 991.98px) { .ds-burger { display: inline-flex; } .ds-nav { position: fixed; inset: var(--ds-header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--ds-color-surface); color: var(--ds-color-text); padding: var(--ds-space-3) var(--ds-gutter) var(--ds-space-5); box-shadow: var(--ds-shadow-lifted); display: none; } .ds-nav.is-open { display: flex; } /* Folha de altura inteira: o menu ocupa a tela, rola sozinho se precisar, e o polegar alcança tudo. Não é o desktop empilhado. */ .ds-nav { inset: var(--ds-header-h) 0 0 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(var(--ds-space-6), env(safe-area-inset-bottom)); } .ds-nav__link { padding-block: var(--ds-space-4); border-bottom: var(--ds-border-w) solid var(--ds-color-rule); opacity: 1; font-size: var(--ds-text-lg); } .ds-nav__cta { margin: var(--ds-space-5) 0 0; } .ds-nav__cta .ds-btn { width: 100%; justify-content: center; } } /* Fundo travado enquanto a folha do menu está aberta. */ html.ds-travado, html.ds-travado body { overflow: hidden; } @media (prefers-reduced-motion: no-preference) { .ds-nav.is-open { animation: ds-folha .22s cubic-bezier(.2, .7, .3, 1); } } @keyframes ds-folha { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .ds-header-spacer { height: var(--ds-header-h); } body[data-ds-header="transparent"] .ds-header-spacer { display: none; } /* -------------------------------------------------------------------------- 5. HERO — layouts: split | centered -------------------------------------------------------------------------- */ .ds-hero { background: var(--ds-color-ink); color: var(--ds-color-on-ink); padding-top: calc(var(--ds-header-h) + var(--ds-space-8)); padding-bottom: var(--ds-space-8); position: relative; overflow: hidden; } .ds-hero__grid { display: grid; gap: var(--ds-space-7); align-items: center; } .ds-hero__title { font-size: var(--ds-text-display); line-height: var(--ds-leading-tight); letter-spacing: var(--ds-track-tight); margin: 0; max-width: 18ch; } .ds-hero__lead { font-size: var(--ds-text-lg); line-height: var(--ds-leading-loose); max-width: var(--ds-measure-normal); margin: var(--ds-space-5) 0 var(--ds-space-6); color: color-mix(in srgb, var(--ds-color-on-ink) 72%, transparent); } .ds-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-4); align-items: center; } .ds-status { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-xs); font-family: var(--ds-font-mono); margin-bottom: var(--ds-space-5); color: color-mix(in srgb, var(--ds-color-on-ink) 72%, transparent); } .ds-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-color-signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-signal) 25%, transparent); flex: none; } /* split: texto à esquerda, painel de módulos à direita */ body[data-c-hero-layout="split"] .ds-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } body[data-c-hero-layout="split"] .ds-hero { text-align: left; } /* centered: coluna única centrada, sem painel */ body[data-c-hero-layout="centered"] .ds-hero { text-align: center; } body[data-c-hero-layout="centered"] .ds-hero__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; } body[data-c-hero-layout="centered"] .ds-hero__title { max-width: 20ch; } body[data-c-hero-layout="centered"] .ds-hero__lead { margin-inline: auto; } body[data-c-hero-layout="centered"] .ds-hero__actions { justify-content: center; } body[data-c-hero-aside="nenhum"] .ds-hero__aside { display: none; } @media (max-width: 991.98px) { body[data-c-hero-layout="split"] .ds-hero__grid { grid-template-columns: minmax(0, 1fr); } } /* Painel de módulos — a densidade visual que a página não tem em foto */ .ds-panel { background: color-mix(in srgb, var(--ds-color-on-ink) 6%, transparent); border: var(--ds-border-w) solid color-mix(in srgb, var(--ds-color-on-ink) 16%, transparent); border-radius: var(--ds-radius-lg); padding: var(--ds-space-5); } .ds-panel__head { display: flex; align-items: center; justify-content: space-between; font-size: var(--ds-text-xs); font-family: var(--ds-font-mono); color: color-mix(in srgb, var(--ds-color-on-ink) 66%, transparent); padding-bottom: var(--ds-space-3); margin-bottom: var(--ds-space-4); border-bottom: var(--ds-border-w) solid color-mix(in srgb, var(--ds-color-on-ink) 14%, transparent); } .ds-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-2); list-style: none; } .ds-tile { display: flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-3); border-radius: var(--ds-radius-md); background: color-mix(in srgb, var(--ds-color-on-ink) 5%, transparent); font-size: var(--ds-text-xs); line-height: 1.35; } .ds-tile i { color: var(--ds-color-signal); font-size: 1rem; flex: none; } /* Faixa dos documentos fiscais */ .ds-docs { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); list-style: none; margin-top: var(--ds-space-6); } .ds-docs li { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-sm); border: var(--ds-border-w) solid color-mix(in srgb, var(--ds-color-on-ink) 20%, transparent); color: color-mix(in srgb, var(--ds-color-on-ink) 80%, transparent); } body[data-c-hero-layout="centered"] .ds-docs { justify-content: center; } /* -------------------------------------------------------------------------- 6. CABEÇALHO DE SEÇÃO — layouts: rail | stacked -------------------------------------------------------------------------- */ .ds-head { margin-bottom: var(--ds-space-7); display: grid; gap: var(--ds-space-4); align-items: start; } .ds-head__eyebrow { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-color-brand-text); margin: 0; } .ds-field--ink .ds-head__eyebrow { color: var(--ds-color-signal); } .ds-head__title { font-size: var(--ds-text-h2); margin: 0; } .ds-head__lead { font-size: var(--ds-text-lg); color: var(--ds-color-text-muted); max-width: var(--ds-measure-normal); margin: var(--ds-space-3) 0 0; } .ds-field--ink .ds-head__lead { color: color-mix(in srgb, var(--ds-color-on-ink) 70%, transparent); } body[data-c-sectionhead-layout="rail"] .ds-head { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--ds-space-6); } body[data-c-sectionhead-layout="rail"] .ds-head__eyebrow { padding-top: var(--ds-space-2); border-top: 2px solid currentColor; } body[data-c-sectionhead-layout="stacked"] .ds-head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } body[data-c-sectionhead-layout="stacked"] .ds-head__lead { margin-inline: auto; } @media (max-width: 767.98px) { body[data-c-sectionhead-layout="rail"] .ds-head { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-3); } } /* -------------------------------------------------------------------------- 7. GRADE DE CARTÕES — estilos: card | row -------------------------------------------------------------------------- */ .ds-grid { display: grid; gap: var(--ds-block-gap); } body[data-c-cardgrid-columns="2"] .ds-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } body[data-c-cardgrid-columns="3"] .ds-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } body[data-c-cardgrid-columns="4"] .ds-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .ds-card { display: flex; flex-direction: column; padding: var(--ds-card-pad); border-radius: var(--ds-card-radius); transition: box-shadow var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); } /* Cartão que é, ele mesmo, um link: sem isto o navegador sublinha título e texto e pinta tudo de cor de link — o cartão passa a parecer um bloco de texto riscado. O sublinhado volta no título ao passar o mouse, que é onde ele informa alguma coisa. */ a.ds-card { text-decoration: none; color: inherit; display: flex; } a.ds-card:hover .ds-card__title, a.ds-card:focus-visible .ds-card__title { text-decoration: underline; } a.ds-card:hover, a.ds-card:focus-visible { color: inherit; } .ds-card__title { font-size: var(--ds-text-h3); margin: 0 0 var(--ds-space-2); } .ds-card__text { color: var(--ds-color-text-muted); font-size: var(--ds-text-sm); line-height: var(--ds-leading-normal); margin: 0 0 var(--ds-space-4); max-width: var(--ds-measure-narrow); } .ds-card__foot { margin-top: auto; font-size: var(--ds-text-sm); } /* estilo do cartão, vindo do token cards.style */ body[data-ds-cards="raised"] .ds-card { background: var(--ds-color-surface); box-shadow: var(--ds-shadow-raised); } body[data-ds-cards="outline"] .ds-card { background: transparent; border: var(--ds-border-w) solid var(--ds-color-rule); } body[data-ds-cards="panel"] .ds-card { background: color-mix(in srgb, var(--ds-color-brand) 5%, var(--ds-color-surface)); } body[data-ds-cards="flat"] .ds-card { background: transparent; padding-inline: 0; } body[data-ds-hover="sutil"] .ds-card:hover { box-shadow: var(--ds-shadow-lifted); } body[data-ds-hover="elevado"] .ds-card:hover { box-shadow: var(--ds-shadow-lifted); transform: translateY(-4px); } /* composição row: ícone à esquerda, texto à direita, divididos por fio */ body[data-c-cardgrid-style="row"] .ds-grid { gap: 0; } body[data-c-cardgrid-style="row"] .ds-card { flex-direction: row; gap: var(--ds-space-4); align-items: flex-start; border-radius: 0; border: 0; border-bottom: var(--ds-border-w) solid var(--ds-color-rule); background: transparent; box-shadow: none; padding-inline: 0; } body[data-c-cardgrid-style="row"] .ds-card:hover { box-shadow: none; transform: none; } body[data-c-cardgrid-style="row"] .ds-card__body { flex: 1; } /* a marca visual do cartão: ladrilho com o ícone */ .ds-tilemark { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--ds-radius-md); background: color-mix(in srgb, var(--ds-color-brand) 12%, transparent); color: var(--ds-color-brand-text); font-size: 1.25rem; margin-bottom: var(--ds-space-4); } body[data-c-cardgrid-media="icon-inline"] .ds-tilemark { margin-bottom: 0; width: 38px; height: 38px; font-size: 1.05rem; } /* -------------------------------------------------------------------------- 8. NÚMEROS — estilos: band | inline -------------------------------------------------------------------------- */ .ds-metrics { display: grid; gap: var(--ds-space-5); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .ds-metric__value { font-family: var(--ds-font-heading); font-size: var(--ds-text-numeral); font-weight: var(--ds-heading-weight); letter-spacing: var(--ds-track-tight); line-height: 1; font-variant-numeric: tabular-nums; display: block; } .ds-metric__label { display: block; margin-top: var(--ds-space-3); font-size: var(--ds-text-sm); max-width: 22ch; } body[data-c-metrics-style="band"] .ds-metric { padding-bottom: var(--ds-space-4); border-bottom: 2px solid var(--ds-color-signal); } body[data-c-metrics-style="band"] .ds-metric__label { color: color-mix(in srgb, var(--ds-color-on-ink) 68%, transparent); } body[data-c-metrics-style="inline"] .ds-metrics { gap: var(--ds-space-4); } body[data-c-metrics-style="inline"] .ds-metric { display: flex; align-items: baseline; gap: var(--ds-space-3); } body[data-c-metrics-style="inline"] .ds-metric__value { font-size: var(--ds-text-h2); color: var(--ds-color-brand-text); } body[data-c-metrics-style="inline"] .ds-metric__label { margin-top: 0; color: var(--ds-color-text-muted); } /* -------------------------------------------------------------------------- 9. DEPOIMENTOS — estilos: card | plain -------------------------------------------------------------------------- */ .ds-quotes { display: grid; gap: var(--ds-block-gap); } body[data-c-quotes-columns="2"] .ds-quotes { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } body[data-c-quotes-columns="3"] .ds-quotes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .ds-quote { display: flex; flex-direction: column; } .ds-quote__text { font-size: var(--ds-text-lg); line-height: var(--ds-leading-normal); margin: 0 0 var(--ds-space-4); max-width: 44ch; } .ds-quote__by { margin-top: auto; font-size: var(--ds-text-sm); } .ds-quote__name { font-weight: 600; display: block; } .ds-quote__role { color: var(--ds-color-text-muted); display: block; } body[data-c-quotes-style="card"] .ds-quote { background: var(--ds-color-surface); border-radius: var(--ds-card-radius); padding: var(--ds-card-pad); box-shadow: var(--ds-shadow-raised); } body[data-c-quotes-style="plain"] .ds-quote { border-left: 2px solid var(--ds-color-brand); padding-left: var(--ds-space-4); } /* -------------------------------------------------------------------------- 10. EDITORIAL — layouts: aside | stacked -------------------------------------------------------------------------- */ .ds-editorial { display: grid; gap: var(--ds-space-7); align-items: start; } body[data-c-editorial-layout="aside"] .ds-editorial { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } body[data-c-editorial-layout="stacked"] .ds-editorial { grid-template-columns: minmax(0, 1fr); } @media (max-width: 991.98px) { .ds-editorial { grid-template-columns: minmax(0, 1fr) !important; } } .ds-prose { max-width: var(--ds-measure-wide); } .ds-prose p { color: var(--ds-color-text-muted); } .ds-prose strong { color: var(--ds-color-text); font-weight: 600; } .ds-prose h2, .ds-prose h3 { margin-top: var(--ds-space-6); } .ds-prose ul, .ds-prose ol { padding-left: var(--ds-space-5); margin-bottom: var(--ds-space-4); color: var(--ds-color-text-muted); } .ds-prose li { margin-bottom: var(--ds-space-2); } .ds-defs { list-style: none; display: grid; gap: var(--ds-space-3); } .ds-def { display: grid; grid-template-columns: auto 1fr; gap: var(--ds-space-3); align-items: start; padding-bottom: var(--ds-space-3); border-bottom: var(--ds-border-w) solid var(--ds-color-rule); } .ds-def i { color: var(--ds-color-signal); font-size: 1.1rem; line-height: 1.4; } .ds-def__term { font-weight: 600; display: block; } .ds-def__desc { color: var(--ds-color-text-muted); font-size: var(--ds-text-sm); display: block; } .ds-field--ink .ds-def__desc { color: color-mix(in srgb, var(--ds-color-on-ink) 68%, transparent); } .ds-field--ink .ds-def { border-bottom-color: color-mix(in srgb, var(--ds-color-on-ink) 18%, transparent); } /* -------------------------------------------------------------------------- 11. FORMULÁRIO -------------------------------------------------------------------------- */ .ds-form { display: grid; gap: var(--ds-space-4); } .ds-form__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-4); } @media (max-width: 575.98px) { .ds-form__row2 { grid-template-columns: 1fr; } } .ds-label { display: block; font-size: var(--ds-text-sm); font-weight: 500; margin-bottom: var(--ds-space-2); } .ds-input { width: 100%; min-height: var(--ds-tap); font: inherit; font-size: var(--ds-text-md); color: inherit; background: color-mix(in srgb, currentColor 6%, transparent); border: var(--ds-border-w) solid color-mix(in srgb, currentColor 24%, transparent); border-radius: var(--ds-radius-md); padding: var(--ds-space-3) var(--ds-space-4); transition: border-color var(--ds-dur) var(--ds-ease); } .ds-input::placeholder { color: color-mix(in srgb, currentColor 45%, transparent); } .ds-input:focus { outline: none; border-color: currentColor; } textarea.ds-input { resize: vertical; min-height: 7rem; } body[data-c-form-layout="split"] .ds-formwrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--ds-space-7); align-items: start; } body[data-c-form-layout="stacked"] .ds-formwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-6); max-width: var(--ds-container-narrow); margin-inline: auto; } @media (max-width: 991.98px) { .ds-formwrap { grid-template-columns: minmax(0, 1fr) !important; } } /* Canais diretos, ao lado do formulário: quem não quer preencher nada liga. */ .ds-canais { margin-top: var(--ds-space-6); } .ds-canais__item { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: var(--ds-space-3); padding-block: var(--ds-space-3); border-top: var(--ds-border-w) solid color-mix(in srgb, currentColor 16%, transparent); } .ds-canais__item:last-child { border-bottom: var(--ds-border-w) solid color-mix(in srgb, currentColor 16%, transparent); } .ds-canais__rotulo { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); opacity: .65; margin: 0; } .ds-canais__valor { margin: 0; font-size: var(--ds-text-sm); } .ds-canais__valor a { color: inherit; text-decoration: none; border-bottom: var(--ds-border-w) solid color-mix(in srgb, currentColor 40%, transparent); } .ds-canais__valor a:hover { border-bottom-color: currentColor; } @media (max-width: 575.98px) { .ds-canais__item { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-1); } } /* -------------------------------------------------------------------------- 12. RODAPÉ -------------------------------------------------------------------------- */ .ds-footer { margin-top: auto; padding-block: var(--ds-space-8) var(--ds-space-5); font-size: var(--ds-text-sm); } body[data-c-footer-layout] .ds-footer__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ds-space-6); padding-bottom: var(--ds-space-6); } @media (max-width: 767.98px) { .ds-footer__grid { grid-template-columns: 1fr 1fr; } } .ds-footer__title { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); margin: 0 0 var(--ds-space-3); opacity: .7; } .ds-footer ul { list-style: none; } .ds-footer li { margin-bottom: var(--ds-space-2); } .ds-footer a { text-decoration: none; opacity: .75; } .ds-footer a:hover { opacity: 1; } .ds-footer__base { padding-top: var(--ds-space-4); border-top: var(--ds-border-w) solid color-mix(in srgb, currentColor 18%, transparent); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-space-2); font-size: var(--ds-text-xs); opacity: .7; } /* -------------------------------------------------------------------------- 12b. PÁGINAS INTERNAS -------------------------------------------------------------------------- */ .ds-pagehead { background: var(--ds-color-ink); color: var(--ds-color-on-ink); padding-top: calc(var(--ds-header-h) + var(--ds-space-7)); padding-bottom: var(--ds-space-7); position: relative; } .ds-pagehead h1 { font-size: var(--ds-text-h1); margin: 0; max-width: 20ch; } .ds-pagehead__lead { font-size: var(--ds-text-lg); max-width: var(--ds-measure-normal); margin: var(--ds-space-4) 0 0; color: color-mix(in srgb, var(--ds-color-on-ink) 72%, transparent); } .ds-crumbs { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); margin: 0 0 var(--ds-space-5); color: color-mix(in srgb, var(--ds-color-on-ink) 66%, transparent); } .ds-crumbs a { color: inherit; text-decoration: none; } .ds-crumbs a:hover { color: var(--ds-color-on-ink); } .ds-tags { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); list-style: none; margin: 0; padding: 0; } .ds-tag { font-family: var(--ds-font-mono); font-size: .75rem; line-height: 1; padding: var(--ds-space-2) var(--ds-space-3); border: var(--ds-border-w) solid var(--ds-color-rule); border-radius: var(--ds-radius-sm); color: var(--ds-color-text-muted); } /* Lista editorial — usada pelo blog */ .ds-list { border-top: var(--ds-border-w) solid var(--ds-color-rule); } .ds-list__item { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--ds-space-5); padding: var(--ds-space-5) 0; border-bottom: var(--ds-border-w) solid var(--ds-color-rule); text-decoration: none; color: inherit; transition: background var(--ds-dur) var(--ds-ease); } .ds-list__item:hover { background: var(--ds-color-surface); } .ds-list__meta { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-color-text-muted); } .ds-list__title { font-size: var(--ds-text-h3); margin: 0 0 var(--ds-space-2); } @media (max-width: 767.98px) { .ds-list__item { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-2); } } /* Página de módulos — um bloco por área */ .ds-modulos { border-top: var(--ds-border-w) solid var(--ds-color-rule); } .ds-modulo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--ds-space-5); padding: var(--ds-space-6) 0; border-bottom: var(--ds-border-w) solid var(--ds-color-rule); scroll-margin-top: calc(var(--ds-header-h) + var(--ds-space-4)); } @media (max-width: 767.98px) { .ds-modulo { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-3); } } .ds-modulo__title { font-size: var(--ds-text-h3); margin: 0 0 var(--ds-space-2); } .ds-modulo__lead { font-size: var(--ds-text-lg); color: var(--ds-color-text-muted); margin: 0 0 var(--ds-space-4); max-width: var(--ds-measure-normal); } /* Conteúdo do CMS com barras laterais opcionais */ .ds-page { display: grid; gap: var(--ds-space-6); align-items: start; } .ds-page--1 { grid-template-columns: minmax(0, 1fr); } .ds-page--2l { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); } .ds-page--2r { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); } .ds-page--3 { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); } @media (max-width: 991.98px) { .ds-page { grid-template-columns: minmax(0, 1fr); } } .ds-side__block { margin-bottom: var(--ds-space-6); } .ds-side__title { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-color-text-muted); margin: 0 0 var(--ds-space-3); padding-bottom: var(--ds-space-2); border-bottom: var(--ds-border-w) solid var(--ds-rule-strong); } .ds-side__list { list-style: none; margin: 0; padding: 0; font-size: var(--ds-text-sm); } .ds-side__list li { border-bottom: var(--ds-border-w) solid var(--ds-color-rule); } .ds-side__list a { display: block; padding: var(--ds-space-2) 0; text-decoration: none; color: var(--ds-color-text); } .ds-side__list a:hover { color: var(--ds-color-brand-text); } .ds-side__list--sub { padding-left: var(--ds-space-4); border-top: var(--ds-border-w) solid var(--ds-color-rule); } .ds-side__body { font-size: var(--ds-text-sm); color: var(--ds-color-text-muted); } .ds-side__body ul { list-style: none; margin: 0; padding: 0; } .ds-side__body a { color: var(--ds-color-text); text-decoration: none; } .ds-side__body a:hover { color: var(--ds-color-brand-text); } .cms-rendered-content table { width: 100%; border-collapse: collapse; margin-bottom: var(--ds-space-5); font-size: var(--ds-text-sm); } .cms-rendered-content th, .cms-rendered-content td { padding: var(--ds-space-3); border: var(--ds-border-w) solid var(--ds-color-rule); text-align: left; } .cms-rendered-content th { font-weight: 600; background: var(--ds-color-paper); } .cms-rendered-content img { height: auto; border-radius: var(--ds-radius-md); margin: var(--ds-space-5) 0; } /* -------------------------------------------------------------------------- 13. MOVIMENTO -------------------------------------------------------------------------- */ body[data-ds-entrance="hero"] .ds-hero [data-enter] { opacity: 0; transform: translateY(12px); } html.js-ready body[data-ds-entrance="hero"] .ds-hero [data-enter] { animation: dsEnter .7s var(--ds-ease) forwards; animation-delay: calc(var(--d, 0) * 1ms); } @keyframes dsEnter { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-enter] { opacity: 1 !important; transform: none !important; animation: none !important; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* -------------------------------------------------------------------------- 13. PAINEL DO SE CLOUD O produto desenhado em marcação: sem imagem, sem peso, responsivo, e legível por leitor de tela. Vive sobre campo escuro ou claro. -------------------------------------------------------------------------- */ .ds-painel { --painel-fundo: #101216; --painel-linha: rgba(255, 255, 255, .10); --painel-texto: #E9E8E4; --painel-fraco: #8C9098; border-radius: var(--ds-radius-lg); background: var(--painel-fundo); color: var(--painel-texto); border: 1px solid var(--painel-linha); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8); overflow: hidden; font-size: clamp(11px, .62vw + 7px, 13px); line-height: 1.35; } .ds-painel__chrome { display: flex; align-items: center; gap: var(--ds-space-3); padding: .55rem .8rem; border-bottom: 1px solid var(--painel-linha); background: rgba(255, 255, 255, .03); } .ds-painel__pontos { display: flex; gap: 5px; } .ds-painel__pontos i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.16); } .ds-painel__url { font-family: var(--ds-font-mono); color: var(--painel-fraco); flex: 1; text-align: center; letter-spacing: .01em; } .ds-painel__estado { display: inline-flex; align-items: center; gap: .4rem; color: var(--painel-fraco); } .ds-led { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-color-signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-signal) 22%, transparent); } .ds-painel__corpo { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); } .ds-painel__lado { display: flex; flex-direction: column; gap: .15rem; padding: .85rem .6rem; border-right: 1px solid var(--painel-linha); } .ds-painel__marca { font-family: var(--ds-font-heading); font-weight: 700; letter-spacing: var(--ds-heading-track); margin-bottom: .6rem; padding-inline: .45rem; } .ds-painel__item { padding: .34rem .45rem; border-radius: var(--ds-radius-sm); color: var(--painel-fraco); } .ds-painel__item--ativo { background: rgba(255,255,255,.07); color: var(--painel-texto); } .ds-painel__tela { padding: .9rem 1rem 1.1rem; display: grid; gap: .8rem; } .ds-painel__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-3); } .ds-painel__topo strong { font-family: var(--ds-font-heading); font-size: 1.15em; } .ds-painel__periodo { color: var(--painel-fraco); } .ds-painel__rot { display: block; font-family: var(--ds-font-mono); font-size: .85em; color: var(--painel-fraco); margin-bottom: .5rem; } .ds-painel__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; } .ds-kpi { padding: .6rem .7rem; border: 1px solid var(--painel-linha); border-radius: var(--ds-radius-md); display: grid; gap: .15rem; } .ds-kpi__rot { color: var(--painel-fraco); font-size: .92em; } .ds-kpi__val { font-family: var(--ds-font-heading); font-weight: 700; font-size: 1.45em; font-variant-numeric: tabular-nums; letter-spacing: var(--ds-heading-track); } .ds-kpi__delta { font-family: var(--ds-font-mono); font-size: .8em; } .ds-kpi__delta--sobe { color: var(--ds-color-signal); } .ds-kpi__delta--desce { color: #E2725B; } .ds-kpi__delta--neutro { color: var(--painel-fraco); } .ds-painel__grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: .7rem; } .ds-grafico, .ds-painel__lista { border: 1px solid var(--painel-linha); border-radius: var(--ds-radius-md); padding: .7rem .8rem; margin: 0; } .ds-grafico__barras { display: flex; align-items: flex-end; gap: 4px; height: 92px; } .ds-grafico__barra { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--ds-color-brand) 62%, transparent); transform-origin: bottom; } .ds-grafico__barra:last-child { background: var(--ds-color-brand); } .ds-painel__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .6rem; padding: .4rem 0; border-top: 1px solid var(--painel-linha); } .ds-painel__linha:first-of-type { border-top: 0; } .ds-painel__num { font-variant-numeric: tabular-nums; text-align: right; } .ds-painel__meta { grid-column: 1 / -1; color: var(--painel-fraco); font-size: .88em; } @media (max-width: 767.98px) { .ds-painel__lado { display: none; } .ds-painel__corpo { grid-template-columns: minmax(0, 1fr); } .ds-painel__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-painel__grade { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: no-preference) { .ds-painel--anima .ds-grafico__barra { animation: ds-sobe .5s cubic-bezier(.2,.7,.3,1) backwards; } .ds-painel--anima .ds-grafico__barra:nth-child(n) { animation-delay: calc(var(--i, 0) * 28ms); } } @keyframes ds-sobe { from { transform: scaleY(.04); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } /* -------------------------------------------------------------------------- 14. HERO DE PRODUTO O painel é o protagonista: sangra para fora do container à direita e carrega dois avisos flutuantes — estado real de operação, não enfeite. -------------------------------------------------------------------------- */ body[data-c-hero-layout="produto"] .ds-hero__grid { display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); gap: var(--ds-space-7); align-items: center; } body[data-c-hero-layout="produto"] .ds-hero__title { max-width: 13ch; } body[data-c-hero-layout="produto"] .ds-hero__lead { max-width: 46ch; } .ds-hero__produto { position: relative; } @media (min-width: 1200px) { .ds-hero__produto { margin-right: calc((100vw - var(--ds-container)) / -2 + var(--ds-space-4)); } } .ds-painel__legenda { margin: var(--ds-space-3) 0 0; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); opacity: .55; } .ds-flutuantes { list-style: none; margin: 0; padding: 0; } .ds-flutuante { position: absolute; display: grid; gap: .1rem; padding: .6rem .75rem; background: var(--ds-color-surface); color: var(--ds-color-text); border-radius: var(--ds-radius-md); border-left: 3px solid var(--ds-color-signal); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .55); white-space: nowrap; } .ds-flutuante--aviso { border-left-color: var(--ds-color-brand); } .ds-flutuante__rot { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); opacity: .6; } .ds-flutuante__val { font-weight: 600; font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; } .ds-flutuante:nth-child(1) { top: 14%; left: -3.5rem; } .ds-flutuante:nth-child(2) { bottom: 8%; left: -5rem; } @media (max-width: 1199.98px) { .ds-flutuantes { display: none; } } @media (max-width: 991.98px) { body[data-c-hero-layout="produto"] .ds-hero__grid { grid-template-columns: minmax(0, 1fr); } body[data-c-hero-layout="produto"] .ds-hero__title { max-width: 18ch; } } /* -------------------------------------------------------------------------- 15. ECOSSISTEMA O centro tem peso, os fios têm direção e um pulso percorre cada fio de fora para dentro — o sentido em que o dado viaja. Em tema claro tudo isso ficava lavado: agora a cor vem da marca, não de um cinza qualquer. -------------------------------------------------------------------------- */ .ds-eco { position: relative; aspect-ratio: 1 / .72; max-width: 64rem; margin-inline: auto; /* Halo discreto atrás da composição: separa do papel sem virar caixa. */ background: radial-gradient(closest-side at 50% 50%, color-mix(in srgb, var(--ds-color-brand) 9%, transparent) 0%, transparent 72%); } .ds-eco__fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ds-eco__parada--perto { stop-color: var(--ds-color-brand); stop-opacity: .85; } .ds-eco__parada--longe { stop-color: var(--ds-color-brand); stop-opacity: .12; } .ds-eco__fio { stroke-width: 1.4; vector-effect: non-scaling-stroke; } .ds-eco__orbita { fill: none; stroke: color-mix(in srgb, var(--ds-color-brand) 22%, transparent); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; } /* O pulso: um traço curto que corre pelo fio em direção ao centro. */ .ds-eco__pulso { stroke: var(--ds-color-brand); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 4 96; stroke-dashoffset: 100; opacity: 0; } @media (prefers-reduced-motion: no-preference) { /* O pulso só corre depois que a seção aparece — nada de pintar fora da tela, e a entrada ganha um momento próprio. */ .ds-eco.ds-revelado .ds-eco__pulso { animation: ds-eco-pulso 3.6s var(--atraso, 0ms) cubic-bezier(.45, 0, .2, 1) infinite; } .ds-eco[data-revela] .ds-eco__no { opacity: 0; transform: translate(-50%, -50%) scale(.94); } .ds-eco[data-revela].ds-revelado .ds-eco__no { opacity: 1; transform: translate(-50%, -50%); transition: opacity .45s ease var(--d), transform .45s cubic-bezier(.2,.7,.3,1) var(--d); } .ds-eco[data-revela] .ds-eco__fio { opacity: 0; } .ds-eco[data-revela].ds-revelado .ds-eco__fio { opacity: 1; transition: opacity .6s ease .1s; } } @keyframes ds-eco-pulso { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: .9; } 55%, 100% { stroke-dashoffset: 0; opacity: 0; } } .ds-eco__centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: .3rem; justify-items: center; text-align: center; background: var(--ds-color-surface); color: var(--ds-color-text); padding: var(--ds-space-5) var(--ds-space-6); border-radius: var(--ds-radius-lg); border: var(--ds-border-w) solid color-mix(in srgb, var(--ds-color-brand) 28%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ds-color-brand) 7%, transparent), var(--ds-shadow-lifted); z-index: 2; } .ds-eco__marca { font-family: var(--ds-font-heading); font-weight: 700; font-size: var(--ds-text-h3); letter-spacing: var(--ds-heading-track); } .ds-eco__sub { font-size: var(--ds-text-xs); color: var(--ds-color-text-muted); } .ds-eco__nos { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; } .ds-eco__no { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; gap: .1rem; justify-items: center; text-align: center; padding: .6rem .95rem; white-space: nowrap; background: var(--ds-color-surface); border: var(--ds-border-w) solid var(--ds-color-rule); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-raised); transition: transform var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); z-index: 1; } .ds-eco__no:hover { transform: translate(-50%, -50%) scale(1.04); border-color: color-mix(in srgb, var(--ds-color-brand) 45%, transparent); box-shadow: var(--ds-shadow-lifted); } .ds-eco__rot { font-weight: 600; font-size: var(--ds-text-sm); } .ds-eco__nota { font-size: var(--ds-text-xs); color: var(--ds-color-text-muted); } /* Sobre campo escuro a mesma composição precisa de superfície própria. */ .ds-field--ink .ds-eco__centro, .ds-field--ink .ds-eco__no { background: color-mix(in srgb, var(--ds-color-on-ink) 8%, var(--ds-color-ink)); color: var(--ds-color-on-ink); border-color: color-mix(in srgb, var(--ds-color-on-ink) 18%, transparent); } .ds-field--ink .ds-eco__sub, .ds-field--ink .ds-eco__nota { color: color-mix(in srgb, var(--ds-color-on-ink) 65%, transparent); } @media (prefers-reduced-motion: reduce) { .ds-eco__no { transition: none; } .ds-eco__no:hover { transform: translate(-50%, -50%); } } @media (max-width: 767.98px) { /* No celular a órbita não cabe: vira lista, com o centro no topo. */ .ds-eco { aspect-ratio: auto; display: grid; gap: var(--ds-space-4); background: none; } .ds-eco__fios { display: none; } .ds-eco__centro { position: static; transform: none; } .ds-eco__nos { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-2); } .ds-eco__no { position: static; transform: none; white-space: normal; opacity: 1 !important; } .ds-eco__no:hover { transform: none; } } /* -------------------------------------------------------------------------- 16. ABAS (painel por dentro / segmentos) -------------------------------------------------------------------------- */ .ds-abas__barra { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: var(--ds-space-5); border-bottom: var(--ds-border-w) solid var(--ds-color-rule); } .ds-aba { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; font-size: var(--ds-text-sm); color: inherit; padding: .7rem 1rem; opacity: .6; border-bottom: 2px solid transparent; margin-bottom: -1px; } .ds-aba:hover { opacity: .9; } .ds-aba[aria-selected="true"] { opacity: 1; font-weight: 600; border-bottom-color: var(--ds-color-brand); } .ds-abas__texto { max-width: 62ch; margin: 0 0 var(--ds-space-5); color: var(--ds-color-text-muted); } .ds-abas__conteudo[hidden] { display: none; } .ds-seg { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--ds-space-6); } .ds-seg__barra { display: flex; flex-direction: column; gap: .15rem; } .ds-seg__aba { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; padding: .7rem .9rem; border-left: 2px solid var(--ds-color-rule); color: inherit; opacity: .6; } .ds-seg__aba[aria-selected="true"] { opacity: 1; font-weight: 600; border-left-color: var(--ds-color-brand); background: color-mix(in srgb, currentColor 5%, transparent); } .ds-seg__conteudo[hidden] { display: none; } .ds-seg__titulo { font-size: var(--ds-text-h3); margin: 0 0 var(--ds-space-3); } .ds-seg__texto { max-width: 58ch; color: var(--ds-color-text-muted); margin: 0 0 var(--ds-space-4); } .ds-seg__recursos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .1rem; } .ds-seg__recursos li { padding: .6rem 0; border-top: var(--ds-border-w) solid var(--ds-color-rule); } @media (max-width: 767.98px) { .ds-seg { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-4); } /* Vertical não cabe: vira trilho horizontal de chips, rolável com o dedo. */ .ds-seg__barra { flex-direction: row; overflow-x: auto; gap: .4rem; scroll-snap-type: x proximity; padding-bottom: .35rem; scrollbar-width: none; } .ds-seg__barra::-webkit-scrollbar { display: none; } .ds-seg__aba { border-left: 0; border: var(--ds-border-w) solid var(--ds-color-rule); border-radius: 999px; padding: .5rem .9rem; white-space: nowrap; scroll-snap-align: start; } .ds-seg__aba[aria-selected="true"] { border-color: var(--ds-color-brand); background: transparent; } } /* -------------------------------------------------------------------------- 17. FLUXO, DOCUMENTOS FISCAIS, INTEGRAÇÕES -------------------------------------------------------------------------- */ .ds-fluxo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--ds-space-4); } .ds-fluxo__etapa { position: relative; display: grid; gap: .3rem; align-content: start; padding-top: var(--ds-space-4); border-top: 2px solid var(--ds-color-rule); } .ds-fluxo__etapa--destaque { border-top-color: var(--ds-color-brand); } .ds-fluxo__n { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); opacity: .5; } .ds-fluxo__rot { font-weight: 600; font-size: var(--ds-text-md); } .ds-fluxo__nota { font-size: var(--ds-text-sm); color: var(--ds-color-text-muted); } body[data-ds-entrance] .ds-fluxo[data-revela] .ds-fluxo__etapa { opacity: 0; transform: translateY(10px); } body[data-ds-entrance] .ds-fluxo[data-revela].ds-revelado .ds-fluxo__etapa { opacity: 1; transform: none; transition: opacity .5s ease var(--d), transform .5s cubic-bezier(.2,.7,.3,1) var(--d); } .ds-docsgrade { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0; border-top: var(--ds-border-w) solid var(--ds-color-rule); } .ds-doc { padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-5) 0; border-bottom: var(--ds-border-w) solid var(--ds-color-rule); } .ds-doc__sigla { font-size: var(--ds-text-h3); margin: 0 0 .2rem; letter-spacing: var(--ds-heading-track); font-variant-numeric: tabular-nums; } .ds-doc__nome { margin: 0 0 .4rem; font-weight: 600; font-size: var(--ds-text-sm); } .ds-doc__nota { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-color-text-muted); max-width: 30ch; } .ds-selos { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--ds-space-5) 0 0; padding: 0; } .ds-selos li { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); padding: .35rem .7rem; border: var(--ds-border-w) solid var(--ds-color-rule); border-radius: var(--ds-radius-sm); } .ds-integra { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--ds-space-6); align-items: center; } .ds-integra__coluna { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .ds-integra__item { display: grid; gap: .1rem; padding: .75rem 0; position: relative; } .ds-integra__coluna--esq .ds-integra__item { text-align: right; border-right: 2px solid var(--ds-color-rule); padding-right: var(--ds-space-4); } .ds-integra__coluna--dir .ds-integra__item { border-left: 2px solid var(--ds-color-rule); padding-left: var(--ds-space-4); } .ds-integra__nome { font-weight: 600; } .ds-integra__nota { font-size: var(--ds-text-sm); color: var(--ds-color-text-muted); } .ds-integra__centro { display: grid; gap: .25rem; justify-items: center; text-align: center; padding: var(--ds-space-5) var(--ds-space-5); border: 2px solid var(--ds-color-brand); border-radius: var(--ds-radius-lg); max-width: 16rem; } .ds-integra__marca { font-family: var(--ds-font-heading); font-weight: 700; font-size: var(--ds-text-h3); } .ds-integra__sub { font-size: var(--ds-text-sm); color: var(--ds-color-text-muted); } @media (max-width: 767.98px) { .ds-integra { grid-template-columns: minmax(0, 1fr); } .ds-integra__coluna--esq .ds-integra__item { text-align: left; border-right: 0; padding-right: 0; border-left: 2px solid var(--ds-color-rule); padding-left: var(--ds-space-4); } .ds-integra__centro { max-width: none; } } /* -------------------------------------------------------------------------- 18. ESTUDOS DE CASO E CHAMADA FINAL -------------------------------------------------------------------------- */ .ds-estudos { display: grid; gap: var(--ds-space-7); } .ds-estudo { display: grid; gap: var(--ds-space-4); padding-top: var(--ds-space-5); border-top: 2px solid var(--ds-color-rule); } .ds-estudo__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ds-space-3); } .ds-estudo__titulo { font-size: var(--ds-text-h2); margin: 0; max-width: 20ch; } .ds-estudo__seg { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); opacity: .6; } .ds-estudo__numeros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--ds-space-4); } .ds-estudo__numeros li { display: grid; gap: .1rem; } .ds-estudo__numeros strong { font-family: var(--ds-font-heading); font-size: var(--ds-text-h2); letter-spacing: var(--ds-heading-track); font-variant-numeric: tabular-nums; line-height: 1; } .ds-estudo__numeros span { font-size: var(--ds-text-sm); color: var(--ds-color-text-muted); } .ds-estudo__corpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--ds-space-5); margin: 0; } .ds-estudo__corpo dt { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); opacity: .6; margin-bottom: .4rem; } .ds-estudo__corpo dd { margin: 0; font-size: var(--ds-text-sm); } .ds-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-6); align-items: center; } .ds-cta__titulo { font-size: var(--ds-text-h1); margin: 0 0 var(--ds-space-3); max-width: 18ch; } .ds-cta__texto { margin: 0; color: inherit; opacity: .8; max-width: 46ch; } .ds-cta__acoes { display: flex; flex-wrap: wrap; gap: var(--ds-space-4); align-items: center; } @media (max-width: 767.98px) { .ds-cta { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- 19. ÍCONES EM SVG Substituem a fonte de ícones vinda de CDN. Herdam cor e acompanham o tamanho do texto ao redor. -------------------------------------------------------------------------- */ .ds-icone { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.18em; flex: none; } .ds-icone--burger { width: 1.6rem; height: 1.6rem; vertical-align: middle; } .ds-tilemark .ds-icone { width: 1.5rem; height: 1.5rem; } /* -------------------------------------------------------------------------- 20. MARCA COMO TEXTO Em campo claro o texto usa --ds-color-brand-text (a versão que passa em contraste). Sobre grafite, a marca cheia tem 9,8:1 e é ela que aparece. -------------------------------------------------------------------------- */ .ds-field--ink .ds-head__eyebrow, .ds-field--ink .ds-tilemark, .ds-field--ink .ds-metric__value { color: var(--ds-color-brand); } /* -------------------------------------------------------------------------- 21. FOCO NOS CONTROLES NOVOS Abas e chips são