/* Servilha — componentes (CSS puro, qualquer framework). Requer sv-tokens.css. Gerado por fonte/gen_css.py. */ /* Servilha — componentes. Só tokens; nenhum valor de cor solto. Marca plana: sem vidro, sem gradiente em superfície. */ .sv { font-family: Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto); background: var(--sv-fundo); -webkit-font-smoothing: antialiased; } .sv *, .sv *::before, .sv *::after { box-sizing: border-box; } .sv :focus-visible { outline: 2px solid var(--sv-foco); outline-offset: 2px; } /* Título de página: o peso e a ênfase em vêm do tipo da marca */ .sv-titulo { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 300; letter-spacing: -0.03em; font-size: 36px; line-height: 42px; margin: 0; color: var(--sv-texto); text-wrap: balance; } .sv-titulo b, .sv-titulo strong { font-weight: 600; } .sv-titulo--display { font-size: 56px; line-height: 60px; letter-spacing: -0.035em; } .sv-titulo--secao { font-size: 26px; line-height: 32px; letter-spacing: -0.025em; } .sv-subtitulo { font-size: 16px; line-height: 24px; color: var(--sv-texto-2); margin: 0; max-width: 62ch; } .sv-rotulo { font: 500 12px/16px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-texto-2); } /* Símbolo: pintado pelo token simbolo */ .sv-simbolo { display: block; fill: var(--sv-simbolo); } /* Assinatura (símbolo + nome em linhas, identidade/logo/assinatura/): o símbolo e a 1ª linha com o token `simbolo`, as seguintes com `texto-2`. Altura pela classe; a largura sai da proporção do arquivo. Nunca abaixo do mínimo de medidas.json. */ .sv-assinatura { display: block; flex: none; width: auto; height: 32px; fill: var(--sv-simbolo); } .sv-assinatura .sv-assinatura__linha ~ .sv-assinatura__linha { fill: var(--sv-texto-2); } /* Botão */ .sv-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--sv-raio-md); font: 600 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color var(--sv-tempo-rapido) var(--sv-curva-marca), color var(--sv-tempo-rapido) var(--sv-curva-marca), border-color var(--sv-tempo-rapido) var(--sv-curva-marca); } .sv-botao--principal { background: var(--sv-acao); color: var(--sv-sobre-acao); } .sv-botao--principal:hover { background: var(--sv-acao-hover); } .sv-botao--secundario { background: var(--sv-realce); color: var(--sv-sobre-realce); } .sv-botao--secundario:hover { background: var(--sv-superficie-2); } .sv-botao--contorno { background: var(--sv-superficie); color: var(--sv-texto); border-color: var(--sv-borda-controle); } .sv-botao--contorno:hover { background: var(--sv-superficie-2); } .sv-botao--fantasma { background: transparent; color: var(--sv-texto-2); } .sv-botao--fantasma:hover { background: var(--sv-superficie-2); color: var(--sv-texto); } .sv-botao--perigo { background: var(--sv-critico); color: var(--sv-sobre-acao); } [data-theme="escuro"] .sv-botao--perigo, .dark .sv-botao--perigo, .sv-botao--perigo[data-theme="escuro"] { color: var(--sv-fundo); } .sv-botao--sm { height: 32px; padding: 0 12px; font-size: 13px; } .sv-botao--lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 14px; } .sv-botao:disabled, .sv-botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .sv-botao svg { width: 16px; height: 16px; flex: none; } /* Campo */ /* align-content: start — numa grade de campos, o campo sem ajuda não estica a distância entre rótulo e controle; > label:not([class]) — o rótulo do campo é o filho direto sem classe: uma caixa de marcar dentro do campo ("Não sei ao certo") mantém a letra dela */ .sv-campo { display: grid; gap: 6px; align-content: start; } .sv-campo > label:not([class]) { font: 600 13px/18px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto); } .sv-entrada { height: 40px; width: 100%; padding: 0 12px; border-radius: var(--sv-raio-md); border: 1px solid var(--sv-borda-controle); background: var(--sv-superficie); color: var(--sv-texto); font: 400 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; transition: border-color var(--sv-tempo-rapido) var(--sv-curva-marca); } .sv-entrada::placeholder { color: var(--sv-texto-3); } .sv-entrada:hover { border-color: var(--sv-texto-2); } .sv-entrada:focus-visible { outline: 2px solid var(--sv-foco); outline-offset: 2px; border-color: var(--sv-acao); } select.sv-entrada { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, rgba(0,0,0,0) 50%, var(--sv-texto-2) 50%), linear-gradient(135deg, var(--sv-texto-2) 50%, rgba(0,0,0,0) 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px; background-repeat: no-repeat; } textarea.sv-entrada { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; } .sv-ajuda { font: 500 12px/16px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-3); } .sv-campo--erro .sv-entrada { border-color: var(--sv-critico); background: var(--sv-critico-fundo); } .sv-campo--erro .sv-ajuda { color: var(--sv-critico); } /* Cartão */ .sv-cartao { background: var(--sv-superficie); border: 1px solid var(--sv-linha); border-radius: var(--sv-raio-lg); box-shadow: var(--sv-sombra-1); padding: 24px; } .sv-cartao__titulo { font: 500 18px/24px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.015em; margin: 0; } /* Indicador (número) */ .sv-indicador { display: grid; gap: 6px; } .sv-indicador__valor { font: 400 32px/36px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--sv-texto); } .sv-indicador__variacao { font: 600 12px/16px Raleway, 'Segoe UI', system-ui, sans-serif; font-variant-numeric: tabular-nums; } .sv-indicador__variacao--sobe { color: var(--sv-sucesso); } .sv-indicador__variacao--desce { color: var(--sv-critico); } /* Etiqueta de status: sempre ponto + palavra */ .sv-etiqueta { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: var(--sv-raio-sm); font: 600 12px/16px Raleway, 'Segoe UI', system-ui, sans-serif; background: var(--sv-superficie-2); color: var(--sv-texto-2); white-space: nowrap; } .sv-etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .sv-etiqueta--sucesso { background: var(--sv-sucesso-fundo); color: var(--sv-sucesso); } .sv-etiqueta--atencao { background: var(--sv-atencao-fundo); color: var(--sv-atencao); } .sv-etiqueta--critico { background: var(--sv-critico-fundo); color: var(--sv-critico); } .sv-etiqueta--marca { background: var(--sv-realce); color: var(--sv-sobre-realce); } /* Tabela */ .sv-tabela-caixa { background: var(--sv-superficie); border: 1px solid var(--sv-linha); border-radius: var(--sv-raio-lg); overflow-x: auto; } .sv-tabela { width: 100%; border-collapse: collapse; font: 400 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; } .sv-tabela th { text-align: left; font: 500 12px/16px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-texto-2); background: var(--sv-superficie-2); padding: 12px 16px; white-space: nowrap; } .sv-tabela td { padding: 14px 16px; border-top: 1px solid var(--sv-linha); color: var(--sv-texto); vertical-align: middle; } .sv-tabela tbody tr { transition: background-color var(--sv-tempo-rapido) var(--sv-curva-marca); } .sv-tabela tbody tr:hover { background: var(--sv-superficie-2); } .sv-tabela .num { text-align: right; font-variant-numeric: tabular-nums; } .sv-tabela .fraco { color: var(--sv-texto-2); } /* Aviso (toast) */ .sv-aviso { display: flex; gap: 12px; align-items: flex-start; width: min(380px, 100%); padding: 14px 16px; border-radius: var(--sv-raio-lg); background: var(--sv-superficie); border: 1px solid var(--sv-linha); box-shadow: var(--sv-sombra-2); } .sv-aviso__icone { flex: none; width: 20px; height: 20px; margin-top: 1px; } .sv-aviso__titulo { font: 600 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; margin: 0; color: var(--sv-texto); } .sv-aviso__texto { font: 400 13px/18px Raleway, 'Segoe UI', system-ui, sans-serif; margin: 2px 0 0; color: var(--sv-texto-2); } .sv-aviso--sucesso .sv-aviso__icone { color: var(--sv-sucesso); } .sv-aviso--critico .sv-aviso__icone { color: var(--sv-critico); } .sv-aviso--marca .sv-aviso__icone { color: var(--sv-acao); } /* Estado vazio: frase + uma ação */ .sv-vazio { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 48px 24px; border-radius: var(--sv-raio-lg); border: 1px dashed var(--sv-linha); } .sv-vazio .sv-simbolo { width: 44px; height: 44px; } .sv-vazio__titulo { font: 300 22px/28px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.025em; margin: 0; } .sv-vazio__titulo b { font-weight: 600; } .sv-vazio__texto { font: 400 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); margin: 0; max-width: 42ch; } /* Carregando: as peças do símbolo chegam e se encaixam */ .sv-carregando { width: 48px; height: 48px; overflow: visible; } .sv-carregando path { --dx: 0px; --dy: 0px; fill: var(--sv-simbolo); animation: sv-encaixe 1.6s var(--sv-curva-marca) infinite; } .sv-carregando path:first-child { --dx: -9px; --dy: -9px; } .sv-carregando path:last-child { --dx: 9px; --dy: 9px; } @keyframes sv-encaixe { 0% { transform: translate(var(--dx), var(--dy)); opacity: 0; } 15% { opacity: 1; } 55%, 85% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } } /* Navegação lateral */ .sv-nav { display: flex; flex-direction: column; gap: 4px; width: 248px; padding: 16px 12px; background: var(--sv-superficie); border-right: 1px solid var(--sv-linha); } .sv-nav__marca { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; font: 600 15px/20px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.02em; color: var(--sv-texto); } .sv-nav__marca .sv-simbolo { width: 26px; height: 26px; } .sv-nav__grupo { font: 500 11px/16px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-texto-3); padding: 14px 10px 6px; } .sv-nav__item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: var(--sv-raio-md); color: var(--sv-texto-2); font: 500 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; text-decoration: none; transition: background-color var(--sv-tempo-rapido) var(--sv-curva-marca), color var(--sv-tempo-rapido) var(--sv-curva-marca); } .sv-nav__item svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .sv-nav__item:hover { background: var(--sv-superficie-2); color: var(--sv-texto); } .sv-nav__item[aria-current="page"] { background: var(--sv-realce); color: var(--sv-sobre-realce); font-weight: 600; } .sv-nav__contador { margin-left: auto; font: 600 11px/16px Raleway, 'Segoe UI', system-ui, sans-serif; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: var(--sv-raio-pilula); background: var(--sv-superficie-2); color: var(--sv-texto-2); } @media (prefers-reduced-motion: reduce) { .sv-carregando path, .sv-carregando > span { animation: none; } .sv * { transition: none !important; } } /* ===================== v2.1 · componentes completados em 28/09/2026 ===================== */ /* Botão só com ícone (sempre com aria-label) */ .sv-botao-icone { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--sv-raio-md); border: 1px solid transparent; background: transparent; color: var(--sv-texto-2); cursor: pointer; transition: background-color var(--sv-tempo-rapido) var(--sv-curva-marca), color var(--sv-tempo-rapido) var(--sv-curva-marca); } .sv-botao-icone:hover, .sv-botao-icone[aria-expanded="true"] { background: var(--sv-superficie-2); color: var(--sv-texto); } .sv-botao-icone--contorno { border-color: var(--sv-borda-controle); background: var(--sv-superficie); } .sv-botao-icone svg { width: 18px; height: 18px; } /* Menu suspenso (dropdown) — também é a superfície da seleção */ .sv-menu { display: grid; gap: 2px; min-width: 220px; padding: 6px; background: var(--sv-superficie); border: 1px solid var(--sv-linha); border-radius: 14px; box-shadow: var(--sv-sombra-2); z-index: var(--sv-camada-menu); } .sv-menu__item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; width: 100%; text-align: left; font: 500 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto); cursor: pointer; text-decoration: none; transition: background-color var(--sv-tempo-rapido) var(--sv-curva-marca); } .sv-menu__item svg { width: 16px; height: 16px; flex: none; color: var(--sv-texto-2); } .sv-menu__item:hover, .sv-menu__item[data-ativo="true"] { background: var(--sv-superficie-2); } .sv-menu__item[aria-selected="true"], .sv-menu__item[aria-checked="true"] { background: var(--sv-realce); color: var(--sv-sobre-realce); font-weight: 600; } .sv-menu__item[aria-selected="true"] svg, .sv-menu__item[aria-checked="true"] svg { color: var(--sv-sobre-realce); } .sv-menu__item--perigo, .sv-menu__item--perigo svg { color: var(--sv-critico); } .sv-menu__item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .sv-menu__atalho { margin-left: auto; font: 500 12px/16px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-3); } .sv-menu__grupo { font: 500 11px/16px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: .08em; text-transform: uppercase; color: var(--sv-texto-3); padding: 8px 10px 4px; } .sv-menu__divisor { height: 1px; background: var(--sv-linha); margin: 4px -6px; } .sv-menu__busca { margin: 0 0 4px; } .sv-menu__vazio { padding: 10px; font: 400 13px/18px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-3); } /* Seleção personalizada (abre um sv-menu) */ .sv-selecao { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 40px; width: 100%; padding: 0 12px; border-radius: var(--sv-raio-md); border: 1px solid var(--sv-borda-controle); background: var(--sv-superficie); color: var(--sv-texto); font: 400 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; cursor: pointer; text-align: left; } .sv-selecao:hover { border-color: var(--sv-texto-2); } .sv-selecao[aria-expanded="true"] { border-color: var(--sv-acao); outline: 2px solid var(--sv-foco); outline-offset: 2px; } .sv-selecao__valor--vazio { color: var(--sv-texto-3); } .sv-selecao svg { width: 16px; height: 16px; color: var(--sv-texto-2); flex: none; } /* Caixa de marcar, opção única e interruptor */ .sv-marcar, .sv-opcao, .sv-interruptor { display: inline-flex; align-items: flex-start; gap: 10px; font: 500 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto); cursor: pointer; } .sv-marcar input, .sv-opcao input { appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border: 1.5px solid var(--sv-borda-controle); background: var(--sv-superficie); display: grid; place-items: center; cursor: pointer; transition: background-color var(--sv-tempo-rapido) var(--sv-curva-marca), border-color var(--sv-tempo-rapido) var(--sv-curva-marca); } .sv-marcar input { border-radius: 5px; } .sv-marcar input:checked, .sv-marcar input:indeterminate { background: var(--sv-acao); border-color: var(--sv-acao); } .sv-marcar input:checked::after { content: ""; width: 5px; height: 9px; border: solid var(--sv-sobre-acao); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); } .sv-marcar input:indeterminate::after { content: ""; width: 8px; height: 2px; background: var(--sv-sobre-acao); border-radius: 1px; } .sv-opcao input { border-radius: 50%; } .sv-opcao input:checked { border-color: var(--sv-acao); } .sv-opcao input:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sv-acao); } .sv-marcar small, .sv-opcao small, .sv-interruptor small { display: block; font: 400 13px/18px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); } .sv-interruptor input { appearance: none; flex: none; position: relative; width: 36px; height: 20px; margin: 0; border-radius: var(--sv-raio-pilula); background: var(--sv-borda-controle); cursor: pointer; transition: background-color var(--sv-tempo-rapido) var(--sv-curva-marca); } .sv-interruptor input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--sv-superficie); box-shadow: 0 1px 2px rgba(14,14,14,.25); transition: transform var(--sv-tempo-base) var(--sv-curva-marca); } .sv-interruptor input:checked { background: var(--sv-acao); } .sv-interruptor input:checked::after { transform: translateX(16px); } [data-theme="escuro"] .sv-interruptor input::after, .dark .sv-interruptor input::after { background: var(--sv-texto); } [data-theme="escuro"] .sv-interruptor input:checked::after, .dark .sv-interruptor input:checked::after { background: var(--sv-fundo); } .sv-marcar input:disabled, .sv-opcao input:disabled, .sv-interruptor input:disabled { opacity: .45; cursor: not-allowed; } /* Busca e filtros */ .sv-busca { position: relative; display: block; } .sv-busca svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--sv-texto-3); pointer-events: none; } .sv-busca .sv-entrada { padding-left: 38px; } .sv-filtros { display: flex; flex-wrap: wrap; gap: 8px; } .sv-filtro { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--sv-raio-pilula); border: 1px solid var(--sv-borda-controle); background: var(--sv-superficie); font: 500 13px/18px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); cursor: pointer; transition: background-color var(--sv-tempo-rapido) var(--sv-curva-marca); } .sv-filtro:hover { background: var(--sv-superficie-2); color: var(--sv-texto); } .sv-filtro[aria-pressed="true"] { background: var(--sv-realce); border-color: transparent; color: var(--sv-sobre-realce); font-weight: 600; } .sv-filtro__conta { font-variant-numeric: tabular-nums; color: var(--sv-texto-3); } .sv-filtro[aria-pressed="true"] .sv-filtro__conta { color: var(--sv-sobre-realce); } /* Formulário em etapas (a aplicação / diagnóstico) */ .sv-etapas { display: grid; gap: 20px; width: min(460px, 100%); } .sv-etapas__topo { display: flex; justify-content: space-between; font: 500 12px/16px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: .08em; text-transform: uppercase; color: var(--sv-texto-2); } .sv-etapas__pergunta { font: 300 24px/30px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -.025em; margin: 0; color: var(--sv-texto); } .sv-etapas__escolhas { display: grid; gap: 8px; } .sv-escolha { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--sv-borda-controle); border-radius: var(--sv-raio-md); background: var(--sv-superficie); font: 500 15px/20px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto); cursor: pointer; transition: background-color var(--sv-tempo-rapido) var(--sv-curva-marca), border-color var(--sv-tempo-rapido) var(--sv-curva-marca); } .sv-escolha:hover { background: var(--sv-superficie-2); } .sv-escolha input { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--sv-borda-controle); border-radius: 50%; display: grid; place-items: center; } .sv-escolha input:checked { border-color: var(--sv-acao); } .sv-escolha input:checked::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sv-acao); } .sv-escolha:has(input:checked) { border-color: var(--sv-acao); background: var(--sv-realce); color: var(--sv-sobre-realce); } .sv-etapas__acoes { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .sv-etapas__nota { font: 500 12px/16px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-3); margin: 0; text-align: center; } /* Progresso */ .sv-progresso { display: grid; gap: 8px; } .sv-progresso__rotulo { display: flex; justify-content: space-between; font: 500 13px/18px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); font-variant-numeric: tabular-nums; } .sv-progresso__trilho { height: 6px; border-radius: var(--sv-raio-pilula); background: var(--sv-superficie-2); overflow: hidden; } .sv-progresso__barra { display: block; height: 100%; border-radius: var(--sv-raio-pilula); background: var(--sv-acao); transition: width var(--sv-tempo-lento) var(--sv-curva-marca); } /* Abas */ .sv-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--sv-linha); overflow-x: auto; } .sv-aba { height: 40px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; font: 500 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); cursor: pointer; white-space: nowrap; transition: color var(--sv-tempo-rapido) var(--sv-curva-marca), border-color var(--sv-tempo-rapido) var(--sv-curva-marca); } .sv-aba:hover { color: var(--sv-texto); } .sv-aba[aria-selected="true"] { color: var(--sv-texto); font-weight: 600; border-bottom-color: var(--sv-acao); } .sv-abas--segmento { display: inline-flex; gap: 2px; padding: 4px; border: 0; border-radius: 12px; background: var(--sv-superficie-2); } .sv-abas--segmento .sv-aba { height: 32px; border: 0; margin: 0; border-radius: 8px; } .sv-abas--segmento .sv-aba[aria-selected="true"] { background: var(--sv-superficie); box-shadow: var(--sv-sombra-1); } /* Paginação e trilha */ .sv-paginacao { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 500 13px/18px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); } .sv-paginacao__paginas { display: flex; gap: 4px; } .sv-pagina { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 0; background: transparent; font: 500 13px/18px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); cursor: pointer; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; } .sv-pagina:hover { background: var(--sv-superficie-2); color: var(--sv-texto); } .sv-pagina[aria-current="page"] { background: var(--sv-realce); color: var(--sv-sobre-realce); font-weight: 600; } .sv-pagina svg { width: 16px; height: 16px; } .sv-trilha ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font: 500 13px/18px Raleway, 'Segoe UI', system-ui, sans-serif; } .sv-trilha li { display: flex; gap: 6px; color: var(--sv-texto-3); } .sv-trilha li + li::before { content: "/"; color: var(--sv-texto-3); } .sv-trilha a { color: var(--sv-texto-2); text-decoration: none; } .sv-trilha a:hover { color: var(--sv-texto); text-decoration: underline; } .sv-trilha [aria-current="page"] { color: var(--sv-texto); } /* Modal, painel lateral e fundo escurecido */ .sv-veu { position: fixed; inset: 0; background: rgba(14,14,14,.45); z-index: var(--sv-camada-painel); } .sv-veu--modal { z-index: calc(var(--sv-camada-modal) - 1); } [data-theme="escuro"] .sv-veu, .dark .sv-veu { background: rgba(0,0,0,.6); } .sv-modal { width: min(480px, 100%); display: grid; gap: 16px; padding: 24px; background: var(--sv-superficie); border-radius: var(--sv-raio-xl); box-shadow: var(--sv-sombra-3); z-index: var(--sv-camada-modal); } .sv-modal__cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .sv-modal__titulo { font: 500 20px/26px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -.02em; margin: 0; color: var(--sv-texto); } .sv-modal__texto { font: 400 14px/21px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); margin: 0; } .sv-modal__acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .sv-painel { width: min(440px, 100%); height: 100%; display: grid; grid-template-rows: auto 1fr auto; background: var(--sv-superficie); border-radius: var(--sv-raio-xl) 0 0 var(--sv-raio-xl); box-shadow: var(--sv-sombra-3); z-index: calc(var(--sv-camada-painel) + 1); } .sv-painel__cabeca { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 20px 16px 24px; border-bottom: 1px solid var(--sv-linha); } .sv-painel__corpo { padding: 24px; overflow-y: auto; display: grid; gap: 20px; align-content: start; } .sv-painel__pe { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--sv-linha); } /* Dica (tooltip): invertida, curta, sem ação dentro */ .sv-dica { position: relative; display: inline-block; max-width: 240px; padding: 6px 10px; border-radius: 8px; background: var(--sv-texto); color: var(--sv-fundo); font: 600 12px/16px Raleway, 'Segoe UI', system-ui, sans-serif; z-index: var(--sv-camada-dica); } .sv-dica::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: var(--sv-texto); transform: translateX(-50%) rotate(45deg); border-radius: 1px; } /* Alerta na página */ .sv-alerta { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--sv-raio-lg); background: var(--sv-realce); color: var(--sv-texto); } .sv-alerta__icone { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--sv-sobre-realce); } .sv-alerta__titulo { font: 600 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; margin: 0; } .sv-alerta__texto { font: 400 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; margin: 2px 0 0; color: var(--sv-texto-2); } .sv-alerta__acao { margin-left: auto; align-self: center; } .sv-alerta--sucesso { background: var(--sv-sucesso-fundo); } .sv-alerta--sucesso .sv-alerta__icone { color: var(--sv-sucesso); } .sv-alerta--atencao { background: var(--sv-atencao-fundo); } .sv-alerta--atencao .sv-alerta__icone { color: var(--sv-atencao); } .sv-alerta--critico { background: var(--sv-critico-fundo); } .sv-alerta--critico .sv-alerta__icone { color: var(--sv-critico); } /* Esqueleto de carregamento */ .sv-esqueleto { display: block; border-radius: 8px; background: var(--sv-superficie-2); animation: sv-pulsa 1.6s var(--sv-curva-marca) infinite; } @keyframes sv-pulsa { 50% { opacity: .55; } } /* Avatar */ .sv-avatar { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--sv-realce); color: var(--sv-sobre-realce); font: 500 14px/1 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -.02em; } .sv-avatar img { width: 100%; height: 100%; object-fit: cover; } .sv-avatar--sm { width: 28px; height: 28px; font-size: 11px; } .sv-avatar--lg { width: 48px; height: 48px; font-size: 17px; } .sv-avatares { display: flex; } .sv-avatares .sv-avatar { box-shadow: 0 0 0 2px var(--sv-superficie); } .sv-avatares .sv-avatar + .sv-avatar { margin-left: -8px; } /* Sanfona (perguntas frequentes, detalhes) */ .sv-sanfona { border-bottom: 1px solid var(--sv-linha); } .sv-sanfona summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; list-style: none; cursor: pointer; font: 400 18px/24px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -.015em; color: var(--sv-texto); } .sv-sanfona summary::-webkit-details-marker { display: none; } .sv-sanfona summary svg { width: 18px; height: 18px; flex: none; color: var(--sv-texto-2); transition: transform var(--sv-tempo-base) var(--sv-curva-marca); } .sv-sanfona[open] summary svg { transform: rotate(45deg); } .sv-sanfona__corpo { padding: 0 0 20px; font: 400 15px/24px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); max-width: 65ch; } /* Gráfico */ .sv-grafico { display: grid; gap: 16px; } .sv-grafico__cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .sv-grafico__legenda { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; font: 500 13px/18px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); } .sv-grafico__legenda li { display: flex; align-items: center; gap: 6px; } .sv-grafico__legenda i { width: 10px; height: 10px; border-radius: 3px; } .sv-grafico svg { width: 100%; height: auto; overflow: visible; } .sv-grafico .grade { stroke: var(--sv-linha); stroke-width: 1; } .sv-grafico .eixo { fill: var(--sv-texto-3); font: 500 12px Raleway, 'Segoe UI', system-ui, sans-serif; } .sv-grafico .valor { fill: var(--sv-texto); font: 600 12px Raleway, 'Segoe UI', system-ui, sans-serif; } .sv-grafico .d1 { fill: var(--sv-dado-1); } .sv-grafico .d2 { fill: var(--sv-dado-2); } .sv-grafico .d3 { fill: var(--sv-dado-3); } .sv-grafico .l1 { stroke: var(--sv-dado-1); } .sv-grafico .l2 { stroke: var(--sv-dado-2); } .sv-grafico .l3 { stroke: var(--sv-dado-3); } .sv-grafico .linha-serie { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sv-grafico .ponto { stroke: var(--sv-superficie); stroke-width: 2; } .sv-grafico .marca-barra:hover, .sv-grafico .ponto:hover { opacity: .8; } /* Depoimento em vídeo */ .sv-depoimento { display: grid; gap: 16px; } .sv-depoimento__video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--sv-raio-lg); overflow: hidden; display: grid; place-items: center; } .sv-depoimento__video { background: var(--sv-superficie-2); } .sv-depoimento__video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sv-depoimento__play { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--sv-superficie); color: var(--sv-acao); display: grid; place-items: center; cursor: pointer; box-shadow: var(--sv-sombra-2); } .sv-depoimento__play svg { width: 20px; height: 20px; margin-left: 3px; } .sv-depoimento__frase { font: 300 20px/28px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -.02em; color: var(--sv-texto); margin: 0; } .sv-depoimento__autor { display: flex; align-items: center; gap: 12px; font: 400 13px/18px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); } .sv-depoimento__autor b { display: block; font: 600 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto); } /* Cabeçalho e rodapé do site */ .sv-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; } .sv-cabecalho__marca { display: flex; align-items: center; gap: 10px; font: 400 19px/1 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -.035em; color: var(--sv-texto); text-decoration: none; } .sv-cabecalho__marca .sv-simbolo { width: 28px; height: 28px; } .sv-cabecalho__links { display: flex; gap: 28px; font: 500 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; } .sv-cabecalho__links a { color: var(--sv-texto-2); text-decoration: none; } .sv-cabecalho__links a:hover { color: var(--sv-texto); } .sv-cabecalho__menu { display: none; } @media (max-width: 760px) { .sv-cabecalho { padding: 16px 0; } .sv-cabecalho__links { display: none; } .sv-cabecalho__marca span { display: none; } .sv-cabecalho__menu { display: inline-grid; } } .sv-menu-movel { display: grid; gap: 4px; padding: 12px; background: var(--sv-superficie); border: 1px solid var(--sv-linha); border-radius: var(--sv-raio-lg); box-shadow: var(--sv-sombra-2); } .sv-menu-movel a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: var(--sv-raio-md); font: 400 18px/24px 'Playfair Display', Georgia, 'Times New Roman', serif; color: var(--sv-texto); text-decoration: none; } .sv-menu-movel a:hover { background: var(--sv-superficie-2); } .sv-rodape { display: grid; gap: 32px; padding: 48px 0 32px; border-top: 1px solid var(--sv-linha); } .sv-rodape__topo { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .sv-rodape__frase { font: 300 22px/28px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -.02em; color: var(--sv-texto); max-width: 22ch; margin: 12px 0 0; } .sv-rodape__frase b { font-weight: 600; } .sv-rodape__colunas { display: flex; gap: 48px; flex-wrap: wrap; } .sv-rodape__coluna { display: grid; gap: 10px; align-content: start; font: 400 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; } .sv-rodape__coluna strong { font: 500 12px/16px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: .08em; text-transform: uppercase; color: var(--sv-texto-3); } .sv-rodape__coluna a { color: var(--sv-texto-2); text-decoration: none; } .sv-rodape__coluna a:hover { color: var(--sv-texto); } .sv-rodape__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--sv-linha); font: 400 12px/16px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-3); } @media (prefers-reduced-motion: reduce) { .sv-esqueleto { animation: none; } } /* ===================== v2.2 · documentos e relatórios (HTML que vira PDF) ===================== */ /* Sumário: grade leve de colunas iguais, sem linhas; número de dois dígitos na cor de ação */ .sv-sumario { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 32px; } .sv-sumario--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sv-sumario a { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--sv-texto-2); font: 400 15px/21px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.01em; transition: color var(--sv-tempo-rapido) var(--sv-curva-marca); } .sv-sumario a:hover { color: var(--sv-texto); } .sv-sumario__n { flex: none; font: 500 12px/21px 'Playfair Display', Georgia, 'Times New Roman', serif; color: var(--sv-acao); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .sv-sumario, .sv-sumario--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; } } @media print { .sv-sumario, .sv-sumario--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; } } /* Documento: página de leitura de até 960 px que também imprime em A4 */ .sv-doc { max-width: 960px; margin: 0 auto; padding: 0 16px; } .sv-doc__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid var(--sv-linha); } .sv-doc__topo .sv-simbolo { width: 28px; height: 28px; flex: none; } .sv-doc__topo > :first-child { white-space: nowrap; } .sv-doc__capa { display: grid; gap: 20px; padding: 72px 0 40px; } .sv-doc__meta { display: flex; flex-wrap: wrap; gap: 8px; } .sv-doc__sumario { padding: 8px 0 56px; } .sv-doc__secao { padding: 40px 0; border-top: 1px solid var(--sv-linha); scroll-margin-top: 16px; } .sv-doc__cabeca { display: grid; gap: 10px; margin-bottom: 28px; } .sv-doc__grade { display: grid; gap: 16px; } .sv-doc__grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-doc__grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sv-doc__grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 760px) { .sv-doc__grade--3 { grid-template-columns: 1fr; } .sv-doc__grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .sv-doc__grade--2, .sv-doc__grade--4 { grid-template-columns: 1fr; } } /* Sem @page aqui: o tamanho e a margem da página vêm de cada modelo (documento, timbrado, cartão), que usa este mesmo CSS. */ @media print { .sv-doc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .sv-doc { max-width: none; padding: 0 16mm; } .sv-doc__capa { padding: 32px 0 28px; } .sv-doc__sumario { padding: 0 0 24px; } .sv-doc__secao { padding: 24px 0; } .sv-doc__cabeca { display: block; break-after: avoid; break-inside: avoid; } .sv-doc__cabeca > * + * { margin-top: 10px; } /* reserva espaço depois do cabeçalho: se o conteúdo não couber, o cabeçalho desce junto */ .sv-doc__cabeca::after { content: ""; display: block; height: 200px; margin-bottom: -200px; } .sv-doc .sv-cartao, .sv-doc .sv-tabela tr, .sv-doc .sv-alerta, .sv-doc li, .sv-doc figure { break-inside: avoid; } .sv-doc h2, .sv-doc h3 { break-after: avoid; } .sv-doc p { orphans: 3; widows: 3; } .sv-doc .so-tela, .sv-doc .sv-botao-icone { display: none; } .sv-doc__grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ===================== v2.3 · formulário-isca: etapas com trilho, campo monetário, atalhos, comparação e resultado (06/10/2026) ===================== */ /* Formulário em etapas em tela inteira: trilho à esquerda no computador (contador, etapas, nota); no celular, a barra de etapa no topo */ .sv-etapas-tela { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); min-height: 100vh; background: var(--sv-fundo); } .sv-etapas-tela__principal { display: grid; align-content: center; padding: 48px clamp(24px, 5vw, 80px); } .sv-trilho { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 32px; padding: 40px; background: var(--sv-superficie-2); color: var(--sv-texto); } .sv-trilho__contador { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 500 88px/0.9 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; color: var(--sv-texto); } .sv-trilho__contador span { font-size: 24px; font-weight: 400; letter-spacing: 0; color: var(--sv-texto-2); } .sv-trilho__etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: 400 15px/20px Raleway, 'Segoe UI', system-ui, sans-serif; } .sv-trilho__etapas li { display: flex; align-items: center; gap: 12px; color: var(--sv-texto-2); } .sv-trilho__etapas li::before { content: ""; flex: none; width: 24px; height: 1px; background: var(--sv-borda-controle); } .sv-trilho__etapas li[aria-current] { color: var(--sv-texto); font-weight: 600; } .sv-trilho__etapas li[aria-current]::before { height: 2px; background: var(--sv-acao); } .sv-trilho__nota { margin: 0; font: 400 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); max-width: 32ch; } .sv-etapas-barra { display: none; } .sv-etapas-barra__passo { justify-self: end; font: 400 15px/20px Raleway, 'Segoe UI', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--sv-texto-2); } .sv-etapas-barra__passo b { font-weight: 600; color: var(--sv-texto); } .sv-etapas-barra__linha { grid-column: 1 / -1; display: block; height: 2px; background: var(--sv-linha); } .sv-etapas-barra__linha i { display: block; height: 100%; background: var(--sv-acao); transition: width var(--sv-tempo-lento) var(--sv-curva-marca); } @media (max-width: 1023px) { .sv-etapas-tela { grid-template-columns: minmax(0, 1fr); } .sv-trilho { display: none; } .sv-etapas-barra { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 16px; padding: 14px 20px 0; position: sticky; top: 0; background: var(--sv-fundo); z-index: var(--sv-camada-fixo); } .sv-etapas-tela__principal { align-content: start; padding: 28px 20px 32px; } } /* Atalhos (chips): valores prontos que preenchem o campo de cima; o escolhido fica com aria-pressed="true". Até cinco numa linha, em colunas iguais (nunca um sozinho na segunda linha); no celular, três colunas: cinco fecham 3 + 2 e quatro fecham 2 + 2. O valor fica centrado na coluna. */ .sv-atalhos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; } @media (max-width: 760px) { .sv-atalhos { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } .sv-atalhos:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sv-atalho { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 8px; border: 1px solid var(--sv-borda-controle); border-radius: var(--sv-raio-md); background: var(--sv-superficie); color: var(--sv-texto); font: 400 15px/20px Raleway, 'Segoe UI', system-ui, sans-serif; font-variant-numeric: tabular-nums lining-nums; cursor: pointer; white-space: nowrap; transition: background-color var(--sv-tempo-rapido) var(--sv-curva-marca), color var(--sv-tempo-rapido) var(--sv-curva-marca), border-color var(--sv-tempo-rapido) var(--sv-curva-marca); } .sv-atalho:hover { background: var(--sv-superficie-2); } .sv-atalho[aria-pressed="true"] { background: var(--sv-acao); border-color: var(--sv-acao); color: var(--sv-sobre-acao); } /* Campo monetário: o prefixo da moeda fica dentro do campo, fora do valor digitado; número grande e tabular */ .sv-moeda { position: relative; display: flex; align-items: center; } .sv-moeda__prefixo { position: absolute; left: 16px; font: 400 18px/1 Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); pointer-events: none; } .sv-moeda .sv-entrada { padding-left: 52px; } .sv-entrada--grande { height: 56px; font-size: 21px; font-variant-numeric: tabular-nums lining-nums; } /* Comparação de dois valores (hoje × depois): dois números lado a lado, o do resultado marcado por um fio em cima. Neutra: nunca vermelho para um e verde para o outro, porque a comparação não é um status. */ .sv-comparacao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--sv-linha); border-bottom: 1px solid var(--sv-linha); } .sv-comparacao__item { display: grid; gap: 6px; align-content: start; padding: 20px 24px 20px 0; } .sv-comparacao__item + .sv-comparacao__item { padding-left: 24px; border-left: 1px solid var(--sv-linha); } .sv-comparacao__item--resultado { box-shadow: inset 0 3px 0 var(--sv-acao); } .sv-comparacao__valor { font: 500 34px/1.1 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--sv-texto); white-space: nowrap; } .sv-comparacao__nota { font: 400 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); } @media (max-width: 560px) { .sv-comparacao { grid-template-columns: minmax(0, 1fr); } .sv-comparacao__item + .sv-comparacao__item { padding-left: 0; border-left: 0; border-top: 1px solid var(--sv-linha); } } /* Resultado: o número que a pessoa veio buscar, com rótulo, as linhas que o explicam e a ressalva, uma vez, legível */ .sv-resultado { display: grid; gap: 20px; } .sv-resultado__destaque { display: grid; gap: 4px; padding-left: 20px; border-left: 3px solid var(--sv-acao); } .sv-resultado__valor { margin: 0; font: 500 64px/1 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.025em; font-variant-numeric: tabular-nums lining-nums; color: var(--sv-texto); white-space: nowrap; } .sv-resultado__linhas { display: grid; margin: 0; } .sv-resultado__linha { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--sv-linha); font: 400 16px/22px Raleway, 'Segoe UI', system-ui, sans-serif; font-variant-numeric: tabular-nums lining-nums; } .sv-resultado__linha dt { color: var(--sv-texto-2); } .sv-resultado__linha dd { margin: 0; color: var(--sv-texto); text-align: right; white-space: nowrap; } .sv-resultado__ressalva { margin: 0; font: 400 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); max-width: 70ch; } @media (max-width: 560px) { .sv-resultado__valor { font-size: 44px; } } /* Modal como nativo e modal de leitura (política, termos): rola por dentro, nunca a página */ dialog.sv-modal { border: 0; color: var(--sv-texto); } dialog.sv-modal:not([open]) { display: none; } dialog.sv-modal::backdrop { background: rgba(14,14,14,.45); } .sv-modal--leitura { width: min(620px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; } /* ===================== v2.4 · painel do computador ao celular, gráfico em preto e branco e piso de leitura e de toque (07/10/2026) ===================== */ /* Painel (telas de sistema): menu lateral à esquerda e o conteúdo; título à esquerda e ações à direita, na mesma linha. Abaixo de 1024 px o menu sai da lateral e vira a barra do topo (a marca + o botão de menu de 44 px); o botão abre o menu como painel à esquerda (data-menu="aberto" no .sv-app, com o véu). Indicadores e cartões vão a uma coluna; a tabela e o funil rolam dentro da própria caixa, nunca a página. */ .sv-app { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; background: var(--sv-fundo); } .sv-app > .sv-nav { min-height: 100vh; } .sv-app__barra, .sv-app > .sv-app__veu { display: none; } .sv-app__conteudo { position: relative; min-width: 0; display: grid; gap: 28px; align-content: start; padding: 36px 40px 48px; container-type: inline-size; } .sv-app__cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; } .sv-app__cabeca > :first-child { flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; } .sv-app__acoes { display: flex; flex: none; gap: 8px; align-items: center; } /* O cabeçalho decide pela largura do CONTEÚDO, não da janela (o menu lateral come 220 a 270 px): título e ações na mesma linha só com 860 px de conteúdo ou mais. Abaixo disso, o título ocupa a linha inteira e as ações descem para baixo dele, à esquerda, com a principal primeiro; com menos de 520 px, empilham na largura da coluna. Assim o título nunca é espremido até sobrar uma palavra sozinha (ex.: janela de 1093 px, notebook de 1366 a 125%). */ @container (max-width: 859px) { .sv-app__cabeca { flex-direction: column; align-items: flex-start; } .sv-app__cabeca > :first-child { width: 100%; } .sv-app__acoes { flex-wrap: wrap; } .sv-app__acoes .sv-botao--principal { order: -1; } } @container (max-width: 519px) { .sv-app__cabeca { align-items: stretch; } .sv-app__acoes { display: grid; grid-template-columns: minmax(0, 1fr); } } .sv-indicadores { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); } /* rótulo, número e nota alinhados entre os cartões, mesmo quando um rótulo quebra em duas linhas */ .sv-indicadores > .sv-indicador { grid-row: span 3; grid-template-rows: subgrid; align-content: start; } .sv-app .sv-etiqueta { justify-self: start; } /* aviso (toast) da tela: no canto de baixo à direita; no celular, na largura da tela com a margem de 16 px */ .sv-app__aviso { position: absolute; right: 40px; bottom: 28px; z-index: var(--sv-camada-aviso); } @container (max-width: 880px) { .sv-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 520px) { .sv-indicadores { grid-template-columns: minmax(0, 1fr); } } .sv-funil { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 4px; } .sv-funil__coluna { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 12px; border-radius: var(--sv-raio-lg); background: var(--sv-superficie-2); scroll-snap-align: start; } .sv-funil__cabeca { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 4px 6px; } .sv-funil__cabeca .sv-nav__contador { margin: 0; } @media (max-width: 1023px) { .sv-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } .sv-app__barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--sv-superficie); border-bottom: 1px solid var(--sv-linha); position: sticky; top: 0; z-index: var(--sv-camada-fixo); } .sv-app > .sv-nav { display: none; } .sv-app[data-menu="aberto"] > .sv-nav { display: flex; position: fixed; inset: 0 auto 0 0; width: min(300px, 100% - 56px); height: 100%; z-index: calc(var(--sv-camada-painel) + 1); box-shadow: var(--sv-sombra-3); } .sv-app[data-menu="aberto"] > .sv-app__veu { display: block; } .sv-app__conteudo { padding: 24px 16px 40px; gap: 24px; } .sv-app__aviso { left: 16px; right: 16px; bottom: 16px; width: auto; } } @media (max-width: 760px) { .sv-funil { grid-auto-columns: calc(100% - 40px); scroll-snap-type: x mandatory; } } /* Gráfico com duas séries ou mais: a forma também separa as séries (impresso em preto e branco, daltonismo). Série 2 tracejada, série 3 pontilhada; a amostra da legenda é a própria linha (svg pequeno na legenda). */ .sv-grafico .tracejada { stroke-dasharray: 7 5; } .sv-grafico .pontilhada { stroke-dasharray: 1 5; } .sv-grafico .sv-grafico__legenda svg { flex: none; width: 24px; height: 10px; overflow: visible; } /* Gráfico no celular: um desenho próprio, mais estreito e com menos rótulos, nunca o do computador encolhido (a letra do eixo encolheria junto). O cartão do gráfico é um contêiner: abaixo de 480 px de largura, o desenho largo dá lugar ao estreito. Desenhe o largo com 480 de largura no viewBox e o estreito com 300, para a letra nunca sair menor que o corpo escrito. */ .sv-grafico { container-type: inline-size; } .sv-grafico .sv-grafico__desenho--largo { max-width: 720px; } .sv-grafico .sv-grafico__desenho--estreito { display: none; max-width: 400px; } @container (max-width: 479px) { .sv-grafico .sv-grafico__desenho--largo { display: none; } .sv-grafico .sv-grafico__desenho--estreito { display: block; } } /* Piso de leitura e de toque (marca.json, "piso"; padrão ligado): nenhum texto abaixo de 14 px e nenhum alvo de toque abaixo de 44 × 44 px (botão, inclusive o pequeno, botão de ícone, campo, item de menu e de navegação, aba, filtro, atalho, página, link de ação solto, caixa de marcar com o texto). Link dentro de uma frase fica fora. Conferido por verificacao/piso.js. */ .sv-campo > label:not([class]), .sv-ajuda, .sv-indicador__variacao, .sv-etiqueta, .sv-aviso__texto, .sv-nav__contador, .sv-botao--sm, .sv-menu__atalho, .sv-menu__vazio, .sv-marcar small, .sv-opcao small, .sv-interruptor small, .sv-filtro, .sv-etapas__nota, .sv-progresso__rotulo, .sv-paginacao, .sv-pagina, .sv-trilha ol, .sv-dica, .sv-grafico__legenda, .sv-depoimento__autor, .sv-rodape__base, .sv-sumario__n { font-size: 14px; line-height: 20px; } .sv-rotulo, .sv-tabela th, .sv-nav__grupo, .sv-menu__grupo, .sv-etapas__topo, .sv-rodape__coluna strong { font-size: 14px; line-height: 20px; } .sv-grafico .eixo, .sv-grafico .valor { font-size: 14px; } .sv-avatar--sm { width: 32px; height: 32px; font-size: 14px; } .sv-botao, .sv-entrada, .sv-selecao, .sv-menu__item, .sv-nav__item, .sv-aba, .sv-filtro, .sv-atalho, .sv-pagina { min-height: 44px; } .sv-abas--segmento .sv-aba { min-height: 44px; } .sv-botao-icone, .sv-pagina { min-width: 44px; } .sv-botao-icone { min-height: 44px; } .sv-marcar, .sv-opcao, .sv-interruptor { min-height: 44px; padding-block: 10px; } .sv-cabecalho__marca, .sv-trilha a, .sv-cabecalho__links a, .sv-rodape__base a { display: inline-flex; align-items: center; min-height: 44px; } /* O alvo de 44 px não muda a linha de base: a linha onde um link cresce centraliza tudo na vertical (o item atual da trilha, a barra "/" e o texto da base do rodapé ficam na altura do link, não no alto). */ .sv-trilha ol, .sv-trilha li, .sv-rodape__base, .sv-cabecalho__links { align-items: center; } .sv-rodape__coluna a { display: flex; align-items: center; min-height: 44px; } .sv-sumario a { min-height: 44px; } /* ===================== v2.5 · ações no celular: modal, painel lateral e alerta (07/10/2026) ===================== */ /* Modal e painel lateral no celular: as ações empilham na largura da folha, a principal primeiro (em cima). No HTML a ordem continua cancelar → ação (no computador, lado a lado à direita, a ação na ponta). */ @media (max-width: 480px) { .sv-modal__acoes, .sv-painel__pe { flex-direction: column-reverse; align-items: stretch; } .sv-modal__acoes > *, .sv-painel__pe > * { width: 100%; } } /* Alerta com ação, no celular: o botão desce para baixo do texto, alinhado com ele, em vez de espremer o texto e o próprio rótulo */ @media (max-width: 560px) { .sv-alerta:has(> .sv-botao) { display: grid; grid-template-columns: auto minmax(0, 1fr); } .sv-alerta > .sv-botao { grid-column: 2; justify-self: start; } } /* Servilha: Servilha Algarismos (gerado por interface/fonte/algarismos.py; não edite à mão). Os dez algarismos da Raleway, alinhados e de largura igual (OFL 1.1, renomeada). Entra na frente da pilha só onde o número forma coluna ou muda no lugar: font-family: "Servilha Algarismos", Raleway, 'Segoe UI', system-ui, sans-serif. */ @font-face { font-family: 'Servilha Algarismos'; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0030-0039; src: url(data:font/woff;base64,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) format('woff'); } @font-face { font-family: 'Servilha Algarismos'; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0030-0039; src: url(data:font/woff;base64,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) format('woff'); } @font-face { font-family: 'Servilha Algarismos'; font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0030-0039; src: url(data:font/woff;base64,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) format('woff'); } /* ===================== Camada da marca Servilha Advogados (T2 Chanfro) ===================== Vem depois do sistema e vence pela ordem. Cada regra de sistema que muda aqui tem o motivo em DIRECAO-MARCA.md ("T2 Chanfro" e "Decisões do sistema, estágio 6") e em SISTEMA.md. Só tokens; nenhuma cor solta. Variáveis locais começam com --_ (o gerador não põe o prefixo da marca nelas). */ /* ---------- 1. A letra do logo: Playfair Display só de 28 px para cima, Raleway no resto ---------- */ /* Nada de negrito ou itálico falso: a Raleway não carrega itálico (a ênfase de texto é o peso 600) e a Playfair Display carrega 400, 500 e o itálico 400 (só para a segunda voz do lema). */ .sv { font-synthesis: none; } .sv-titulo { font-weight: 400; font-size: 40px; line-height: 46px; letter-spacing: -0.01em; } .sv-titulo--display { font-size: 64px; line-height: 68px; letter-spacing: -0.01em; } .sv-titulo--secao { font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.005em; } .sv-titulo b, .sv-titulo strong { font-weight: inherit; } @media (max-width: 560px) { .sv-titulo { font-size: 32px; line-height: 38px; font-weight: 500; } .sv-titulo--display { font-size: 44px; line-height: 48px; font-weight: 400; } .sv-titulo--secao { font-size: 28px; line-height: 34px; } } /* O lema em duas vozes: "Advocacia com propósito" (afirmação) + "desde 2012." (a data) em Playfair Display Italic, na cor da ênfase (Dourado no Granito, Bronze na Pedra). É o único itálico da marca. O itálico herda o peso da linha: 400 de 40 px para cima, 500 entre 28 e 40 px (o itálico 500 é carregado só por isso). */ .sv-lema em { font-style: italic; font-weight: inherit; color: var(--sv-enfase); } .sv-lema--quebra em { display: block; } /* Abaixo de 28 px, título em Raleway 600 (o fio da Playfair Display mede 0,020 em: a 24 px ele some). */ .sv-cartao__titulo, .sv-modal__titulo, .sv-vazio__titulo { font: 600 20px/26px Raleway, 'Segoe UI', system-ui, sans-serif; letter-spacing: 0; } .sv-sanfona summary { font: 600 18px/26px Raleway, 'Segoe UI', system-ui, sans-serif; letter-spacing: 0; } .sv-etapas__pergunta { font: 500 28px/34px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.005em; } /* Playfair Display entre 28 e 40 px: sempre 500 (a haste do 400 é fina demais nesse tamanho); 400 de 40 px para cima. */ .sv-depoimento__frase { font: 500 28px/36px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.005em; } .sv-rodape__frase { font: 500 28px/34px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.005em; max-width: 12em; } .sv-indicador__valor { font: 500 32px/38px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: 0; } .sv-comparacao__valor { font-weight: 500; letter-spacing: 0; } .sv-resultado__valor { font-weight: 400; letter-spacing: -0.01em; } .sv-trilho__contador { font-weight: 400; letter-spacing: -0.01em; } .sv-trilho__contador span { font: 500 20px/1 Raleway, 'Segoe UI', system-ui, sans-serif; } .sv-sumario a { font: 500 16px/22px Raleway, 'Segoe UI', system-ui, sans-serif; letter-spacing: 0; } .sv-sumario__n { font: 600 14px/22px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-enfase); } .sv-menu-movel a { font: 600 16px/22px Raleway, 'Segoe UI', system-ui, sans-serif; } /* Iniciais do avatar na fonte de texto (numa serifa de contraste alto, o fio some nas iniciais). */ .sv-avatar { font: 600 14px/1 Raleway, 'Segoe UI', system-ui, sans-serif; letter-spacing: 0.02em; } .sv-avatar--lg { font-size: 16px; } /* Raleway 500 em todo texto de 14 e 15 px (a haste do 400 a 14 px tem 0,98 px e não cobre um pixel numa tela comum); o texto de parágrafo curto sobe para o corpo de 16 px. */ .sv-tabela { font: 500 14px/22px Raleway, 'Segoe UI', system-ui, sans-serif; } .sv-aviso__texto, .sv-alerta__texto, .sv-marcar small, .sv-opcao small, .sv-interruptor small, .sv-resultado__ressalva, .sv-trilho__nota, .sv-comparacao__nota, .sv-rodape__coluna, .sv-rodape__base, .sv-depoimento__autor, .sv-menu__vazio, .sv-paginacao, .sv-campo > label:not([class]) { font-weight: 500; } .sv-modal__texto, .sv-vazio__texto { font: 400 16px/24px Raleway, 'Segoe UI', system-ui, sans-serif; } .sv-atalho, .sv-escolha, .sv-sanfona__corpo, .sv-trilho__etapas, .sv-etapas-barra__passo { font-size: 16px; } .sv-sanfona__corpo { line-height: 26px; } /* ---------- 2. Rótulo: Raleway 500, 14 px, caixa alta, 0,14em (marca.json "rotulo": {"familia": "texto"}) ---------- */ .sv-rotulo, .sv-tabela th, .sv-nav__grupo, .sv-menu__grupo, .sv-etapas__topo, .sv-rodape__coluna strong { font: 500 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; } .sv-tabela th { padding: 12px 16px; } /* O olho (sobretítulo do topo do site e da capa): o rótulo na cor da ênfase. Diz um fato: o nome e a OAB, a frente, a data. */ .sv-olho { margin: 0; font: 500 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-enfase); } /* ---------- 3. Algarismos que formam coluna ou mudam no lugar: Servilha Algarismos (largura igual) ---------- */ /* A Raleway não tem tnum: a fonte derivada (interface/fonte/algarismos.py, @font-face no topo desta camada) entra na frente da pilha só aqui. O número grande do indicador e do resultado fica na Playfair Display (isolado, proporcional basta). */ .sv-tabela .num, .sv-nav__contador, .sv-filtro__conta, .sv-progresso__rotulo, .sv-paginacao, .sv-pagina, .sv-etapas__topo, .sv-etapas-barra__passo, .sv-resultado__linha dd, .sv-indicador__variacao, .sv-atalho, .sv-entrada--grande, .sv-sumario__n, .sv-trilho__contador span { font-family: 'Servilha Algarismos', Raleway, 'Segoe UI', system-ui, sans-serif; } /* ---------- 4. Canto reto: raio 0 em tudo (os tokens já valem 0); só o avatar e a opção única são círculos ---------- */ .sv-menu, .sv-menu__item, .sv-pagina, .sv-dica, .sv-dica::after, .sv-esqueleto, .sv-abas--segmento, .sv-abas--segmento .sv-aba, .sv-marcar input, .sv-botao--lg, .sv-grafico__legenda i, .sv-etiqueta::before, .sv-interruptor input::after, .sv-depoimento__play, .sv-funil__coluna, .sv-menu-movel, .sv-menu-movel a, .sv-tabela-caixa, .sv-aviso, .sv-alerta, .sv-painel { border-radius: 0; } .sv-interruptor input::after { box-shadow: none; } /* Sem sombra em repouso: o segmento escolhido se separa por um fio. */ .sv-abas--segmento .sv-aba[aria-selected="true"] { box-shadow: 0 0 0 1px var(--sv-linha); } /* Ícones Lucide de traço 2 (o traço fino é linguagem de startup, rejeitada). */ .sv-nav__item svg { stroke-width: 2; } /* ---------- 5. Botão e campo: canto reto, Raleway 600 de 16 px no botão, campo de 48 px com texto de 16 px ---------- */ .sv-botao { height: 48px; padding: 0 22px; font-size: 16px; line-height: 22px; letter-spacing: 0.01em; } .sv-botao--sm { height: 44px; padding: 0 16px; font-size: 14px; line-height: 20px; } .sv-botao--lg { height: 56px; padding: 0 28px; font-size: 16px; } /* Contorno: fio de 1 px na cor do texto, sem fundo (no Granito, o fio é Branco-nome). */ .sv-botao--contorno { background: transparent; color: var(--sv-texto); border-color: var(--sv-texto); } .sv-botao--contorno:hover { background: var(--sv-superficie-2); } .sv-entrada, .sv-selecao { height: 48px; padding: 0 14px; font: 400 16px/22px Raleway, 'Segoe UI', system-ui, sans-serif; } textarea.sv-entrada { height: auto; padding: 12px 14px; font: 400 16px/24px Raleway, 'Segoe UI', system-ui, sans-serif; } .sv-busca .sv-entrada { padding-left: 40px; } .sv-moeda .sv-entrada { padding-left: 54px; } .sv-entrada--grande { height: 60px; font-size: 22px; } select.sv-entrada { background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; } /* Link de texto: a cor da ênfase, sublinhado, 500. */ .sv-link { color: var(--sv-enfase); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } .sv-link:hover { color: var(--sv-texto); } /* ---------- 6. O chanfro (a assinatura do território) ---------- */ /* Cartão e modal: corte a 45° nas quinas superior direita e inferior esquerda (uma quina e a gêmea girada 180°, como as duas metades do S), 24 px (16 px abaixo de 520 px de tela). A borda `linha` continua no corte: em cada quina, um quadrado do tamanho do corte com um degradê opaco (a superfície até 1 px antes da diagonal, a linha depois), sem transparência (no PDF, um degradê com transparente escurece a linha). Sem raio, sem sombra, sem pseudo-elemento. */ .sv-cartao, .sv-modal { --_c: var(--sv-chanfro-cartao); border: 1px solid var(--sv-linha); border-radius: 0; box-shadow: none; clip-path: polygon(0 0, calc(100% - var(--_c)) 0, 100% var(--_c), 100% 100%, var(--_c) 100%, 0 calc(100% - var(--_c))); background: linear-gradient(45deg, var(--sv-superficie) calc(50% - 1px), var(--sv-linha) calc(50% - 1px)) right top / var(--_c) var(--_c) no-repeat border-box, linear-gradient(225deg, var(--sv-superficie) calc(50% - 1px), var(--sv-linha) calc(50% - 1px)) left bottom / var(--_c) var(--_c) no-repeat border-box, var(--sv-superficie) border-box; } @media (max-width: 519px) { .sv-cartao, .sv-modal { --_c: var(--sv-chanfro-cartao-estreito); } } /* Cartão pequeno (o do funil, com 14 px de recuo): o corte estreito, para não morder o texto. */ .sv-funil .sv-cartao, .sv-cartao--compacto { --_c: var(--sv-chanfro-cartao-estreito); } /* O texto curto do cartão do funil (assunto, quando) é equilibrado: na coluna estreita, nunca uma palavra sozinha embaixo. */ .sv-funil .sv-cartao .sv-ajuda > span { text-wrap: balance; } /* O funil rola dentro da própria caixa e sempre mostra 40 px ou mais da coluna seguinte (nunca uma coluna inteira escondida exatamente atrás da borda): com 960 px de conteúdo ou mais, as colunas dividem a largura; abaixo, 3,4 colunas à vista; abaixo de 640 px, 2,4; no celular, uma e a ponta da seguinte. Abaixo de 1024 px de tela, a caixa sangra até a borda, como a tabela (os 16 px da margem passam para dentro dela). */ @container (max-width: 959px) { .sv-funil { grid-auto-columns: calc((100% - 36px) / 3.4); } } @container (max-width: 639px) { .sv-funil { grid-auto-columns: calc((100% - 24px) / 2.4); } } @media (max-width: 1023px) { .sv-funil { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; } } @media (max-width: 760px) { .sv-funil { grid-auto-columns: calc(100% - 64px); } } /* Foto: corte de 1/8 do lado menor nas mesmas duas quinas e, do lado de fora de cada corte, um fio paralelo a ele, de espessura f = corte/10, afastado por uma fresta igual ao fio (a relação do próprio logo: fresta de borda de um fio). Comprimento do fio = o do corte; pontas perpendiculares. A cor do fio é a do chão embaixo dele: `fio` (Bronze na Pedra, Dourado no Granito); a foto que atravessa a divisa dos chãos troca a de baixo com --_fio-b. Marcação:
(proporção 3:4; --larga 16:9, --quadrada 1:1). A figura é um contêiner de tamanho, então o corte sai do tamanho real dela, em qualquer largura, sem script. */ .sv-foto { position: relative; display: block; margin: 0; aspect-ratio: 3 / 4; container-type: size; --_c: calc(min(100cqw, 100cqh) / 8); --_f: calc(var(--_c) / 10); --_o: calc(var(--_f) * 1.0607); --_l: calc(var(--_c) * 1.4142); --_fio-a: var(--sv-fio); --_fio-b: var(--sv-fio); } .sv-foto--larga { aspect-ratio: 16 / 9; } .sv-foto--quadrada { aspect-ratio: 1 / 1; } .sv-foto > img, .sv-foto__quadro { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; clip-path: polygon(0 0, calc(100% - var(--_c)) 0, 100% var(--_c), 100% 100%, var(--_c) 100%, 0 calc(100% - var(--_c))); } .sv-foto::before, .sv-foto::after { content: ""; position: absolute; width: var(--_l); height: var(--_f); transform: rotate(45deg); pointer-events: none; } .sv-foto::before { background: var(--_fio-a); left: calc(100% - var(--_c) / 2 + var(--_o) - var(--_l) / 2); top: calc(var(--_c) / 2 - var(--_o) - var(--_f) / 2); } .sv-foto::after { background: var(--_fio-b); left: calc(var(--_c) / 2 - var(--_o) - var(--_l) / 2); top: calc(100% - var(--_c) / 2 + var(--_o) - var(--_f) / 2); } /* Selo da OAB: contorno de 2 px na cor do fio, o mesmo chanfro com 12 px, Raleway 500 em caixa alta (0,16em). Vem do quadro de fio da OAB do banner do cliente. Um por peça; nunca preenchido (o chão aparece dentro dele). O contorno continua no corte com dois traços da mesma espessura (pseudo-elementos girados a 45°, rentes ao corte por dentro). O corte (--_c) e a espessura (--_t, a mesma da borda) mudam juntos na peça de tamanho fixo (o selo do post tem corte de 24 px e fio de 3 px). */ .sv-selo { --_c: var(--sv-chanfro-selo); --_t: 2px; position: relative; display: inline-flex; align-items: center; justify-self: start; align-self: start; min-height: 40px; padding: 8px 18px 8px 20px; border: var(--_t) solid var(--sv-fio); color: var(--sv-enfase); white-space: nowrap; font: 500 14px/20px Raleway, 'Segoe UI', system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - var(--_c)) 0, 100% var(--_c), 100% 100%, var(--_c) 100%, 0 calc(100% - var(--_c))); } .sv-selo::before, .sv-selo::after { content: ""; position: absolute; width: calc(var(--_c) * 1.4142 + var(--_t) * 2); height: var(--_t); background: var(--sv-fio); transform: rotate(45deg); pointer-events: none; } .sv-selo::before { left: calc(100% - var(--_t) * 0.3536 - var(--_c) * 1.2071); top: calc(var(--_c) / 2 - var(--_t) * 1.1464); } .sv-selo::after { left: calc(0px - var(--_c) * 0.2071 - var(--_t) * 1.6464); top: calc(100% + var(--_t) * 0.1464 - var(--_c) / 2); } /* ---------- 7. O logo: o S sozinho no cabeçalho e no menu; a pilha vertical em capa, login, rodapé e fecho ---------- */ /* Respiro mínimo em volta de qualquer forma do logo: 0,30 da altura do S (S de 40 px: 12 px; pilha de 118 px, com o S de 80 px: 24 px), também até um corte, um fio de chanfro, a borda de uma foto ou a divisa entre Granito e Pedra. O logo nunca é chanfrado, cortado nem emoldurado. */ .sv-pilha { display: block; flex: none; width: auto; height: 118px; fill: var(--sv-simbolo); } .sv-pilha .sv-pilha__nome { fill: var(--sv-texto); } .sv-pilha--grande { height: 176px; } .sv-pilha--mono, .sv-pilha--mono .sv-pilha__nome { fill: var(--sv-texto); } .sv-cabecalho__marca { display: inline-flex; align-items: center; justify-content: flex-start; min-width: 44px; min-height: 44px; } .sv-cabecalho__marca .sv-simbolo { width: 40px; height: 40px; } .sv-nav__marca { padding: 8px 10px 24px; } .sv-nav__marca .sv-simbolo { width: 32px; height: 32px; } .sv-app__barra .sv-nav__marca { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0; } .sv-app__barra .sv-simbolo { width: 28px; height: 28px; } /* Placas do símbolo (prévia e prancha): retângulo liso, sem corte (o logo nunca é emoldurado por chanfro), com o respiro. */ .sv-simbolo-placas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; } .sv-simbolo-placa { min-height: 200px; display: grid; place-items: center; padding: 40px; background: var(--sv-fundo); border: 1px solid var(--sv-linha); } .sv-simbolo-placa .sv-simbolo { width: 72px; height: 72px; } @media (max-width: 560px) { .sv-simbolo-placas { grid-template-columns: minmax(0, 1fr); } } /* O avatar da marca em tamanho de interface: o S sozinho, Dourado no disco de Granito (a pilha só cabe de 210 px para cima). */ .sv-avatar--marca { background: var(--sv-chao-marca); } .sv-avatar--marca .sv-simbolo { width: 60%; height: 60%; fill: var(--sv-dourado); } [data-theme="escuro"] .sv-avatar--marca, .dark .sv-avatar--marca { box-shadow: inset 0 0 0 1px var(--sv-linha); } /* ---------- 8. Dois chãos por função ---------- */ /* Granito quando a marca se apresenta (topo e rodapé do site, capa, avatar); Pedra quando o escritório explica (conteúdo, sistema, documento). O bloco declara o chão com data-theme ("escuro" = Granito, "claro" = Pedra) e a classe sv-chao. */ .sv-chao { background: var(--sv-fundo); color: var(--sv-texto); } .sv-site { width: 100%; max-width: 1276px; margin: 0 auto; padding-inline: 48px; } @media (max-width: 1023px) { .sv-site { padding-inline: 16px; } } /* Cabeçalho do site: o S sozinho, os links e a Área do cliente na cor da ênfase; fio `linha` embaixo. Abaixo de 1024 px os links vão para o menu (o S, cinco links e os intervalos pedem cerca de 760 px de conteúdo). */ .sv-cabecalho { padding: 24px 0; gap: 32px; border-bottom: 1px solid var(--sv-linha); } .sv-cabecalho__links { gap: 32px; margin-left: auto; font: 500 16px/22px Raleway, 'Segoe UI', system-ui, sans-serif; } .sv-cabecalho__links a { color: var(--sv-texto); } .sv-cabecalho__links a:hover { color: var(--sv-enfase); } .sv-cabecalho__links .sv-cabecalho__destaque { color: var(--sv-enfase); } .sv-cabecalho__direita { display: flex; align-items: center; gap: 8px; } @media (max-width: 1023px) { .sv-cabecalho { padding: 16px 0; } .sv-cabecalho__links { display: none; } .sv-cabecalho__menu { display: inline-grid; } } .sv-menu-movel .sv-cabecalho__destaque { color: var(--sv-enfase); } /* Topo do site (modelo Leitura, Granito): texto à esquerda, o retrato chanfrado à direita, atravessando a divisa para a Pedra; as frentes começam na Pedra, na coluna do texto. */ .sv-heroi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 460px); gap: 48px 72px; align-items: start; padding-top: 72px; } .sv-heroi__texto { display: grid; gap: 24px; justify-items: start; padding-bottom: 40px; } /* O lema: "com propósito" vem unido por espaço sem quebra (no HTML), então a primeira voz quebra depois de "Advocacia" ou cabe inteira; a data vai sempre na linha dela (sv-lema--quebra). Nunca "propósito" sozinho numa linha. */ .sv-heroi .sv-titulo--display { font-size: clamp(44px, 5.3vw, 76px); line-height: 1.04; max-width: 12em; text-wrap: wrap; } .sv-heroi .sv-subtitulo { font-size: 20px; line-height: 32px; max-width: 34em; } .sv-heroi__acoes { display: flex; flex-wrap: wrap; gap: 12px; } .sv-heroi__foto { position: relative; z-index: 1; width: 100%; margin-top: 8px; margin-bottom: -150px; --_fio-b: var(--sv-bronze); } .sv-frentes-area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 460px); gap: 48px 72px; padding-block: 56px 72px; } .sv-frentes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .sv-frente { display: grid; gap: 10px; align-content: start; padding: 28px 24px 32px; } .sv-frente__titulo { margin: 0; font: 500 28px/34px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.005em; color: var(--sv-texto); } .sv-frente p { margin: 0; color: var(--sv-texto-2); } @media (max-width: 1023px) { .sv-heroi { grid-template-columns: minmax(0, 1fr); padding-top: 40px; gap: 8px; } .sv-heroi__texto { padding-bottom: 32px; } .sv-heroi__foto { max-width: 340px; margin-bottom: -96px; } .sv-frentes-area { grid-template-columns: minmax(0, 1fr); padding-block: 136px 48px; } } @media (max-width: 760px) { .sv-frentes { grid-template-columns: minmax(0, 1fr); } } /* De 1024 a 1279 px, a coluna do texto (ao lado da foto) tem 400 a 650 px: as três frentes vão uma embaixo da outra, na coluna (três cartões de 120 px deixavam "leilão." sozinho na última linha). */ @media (min-width: 1024px) and (max-width: 1279px) { .sv-frentes { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .sv-heroi .sv-subtitulo { font-size: 18px; line-height: 29px; } .sv-heroi__acoes > .sv-botao { width: 100%; } } /* Rodapé (Granito): a pilha vertical, o lema e as colunas; a base com o nome, a OAB e a política. */ .sv-rodape { gap: 40px; padding: 56px 0 32px; border-top: 0; } .sv-rodape__marca { display: grid; gap: 28px; justify-items: start; } .sv-rodape__frase { margin: 0; } .sv-rodape__colunas { gap: 56px; } .sv-rodape__coluna { gap: 0; } .sv-rodape__coluna strong { margin-bottom: 4px; } .sv-rodape__base { font-size: 14px; } /* ---------- 9. Componentes com o desenho da marca ---------- */ /* Etiqueta: o ponto vira quadrado (sem círculo fora do avatar e da opção única). */ .sv-etiqueta { height: 28px; } /* Indicador e resultado: o destaque do número é um fio de 2 px na cor do fio, à esquerda (o resultado) ou em cima (o lado do resultado numa comparação). Nenhum outro desenho marca um número. */ .sv-resultado__destaque { border-left-width: 2px; border-left-color: var(--sv-fio); padding-left: 20px; } .sv-comparacao__item--resultado { box-shadow: inset 0 2px 0 var(--sv-fio); } /* Navegação: o ativo em realce; contador quadrado. */ .sv-nav__contador { padding: 1px 7px; } /* Gráfico: barras de canto reto (o raio da marca é 0) e o desenho estreito (viewBox de 240) no celular. */ .sv-grafico .marca-barra { rx: 0; } /* Sumário do documento: o rótulo em cima (ele apresenta o bloco, também no topo da página 2 do PDF) e nunca se parte. */ .sv-doc__sumario > .sv-rotulo { display: block; margin-bottom: 12px; } @media print { .sv-doc__sumario, .sv-doc__sumario .sv-sumario { break-inside: avoid; } } /* Documento: capa com a pilha vertical (respiro de 24 px até o rótulo) e o fecho assinado com a pilha. */ .sv-doc__topo { min-height: 44px; } .sv-doc__capa > .sv-pilha { margin-bottom: 20px; } /* No celular, o título do documento desce para o titulo-1 do celular (32 px, 500): a capa cabe numa tela e meia. */ @media (max-width: 560px) { .sv-doc__capa .sv-titulo--display { font-size: 32px; line-height: 38px; font-weight: 500; } } .sv-doc__fecho { display: grid; gap: 28px; justify-items: start; padding: 48px 0 64px; border-top: 1px solid var(--sv-linha); } .sv-doc__assina { display: grid; gap: 4px; margin: 0; } .sv-doc__assina strong { font: 600 16px/24px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto); } .sv-doc__assina span { font: 500 14px/22px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); } @media print { .sv-doc__fecho { break-inside: avoid; padding: 28px 0 0; } } /* Tela centrada (login, confirmação): coluna de 360 px no eixo, sem cartão. A pilha no topo (S de 88 px), com o respiro. */ .sv-centrada { min-height: 100vh; display: grid; place-items: center; padding: 48px 16px; background: var(--sv-fundo); } .sv-centrada__coluna { width: min(360px, 100%); display: grid; gap: 20px; justify-items: center; text-align: center; } .sv-centrada__coluna > .sv-pilha { height: 130px; margin-bottom: 12px; } .sv-centrada__coluna > .sv-titulo { font-size: 32px; line-height: 38px; font-weight: 500; } .sv-centrada__form { width: 100%; display: grid; gap: 16px; text-align: left; margin-top: 8px; } .sv-centrada__form .sv-botao { width: 100%; } .sv-centrada__pe { display: grid; justify-items: center; gap: 20px; } .sv-centrada__pe a { display: inline-flex; align-items: center; min-height: 44px; } /* ---------- 10. Correções de sistema que valem para esta marca (das auditorias do molde) ---------- */ /* Formulário em etapas: as ações à esquerda, a principal primeiro (no HTML: Continuar, depois Voltar); no celular, a principal na largura da coluna e Voltar logo embaixo, à esquerda. A nota alinhada ao bloco. */ .sv-etapas__acoes { justify-content: flex-start; } .sv-etapas__nota { text-align: left; } @media (max-width: 760px) { .sv-etapas__acoes { flex-direction: column; align-items: stretch; gap: 4px; } .sv-etapas__acoes > .sv-botao--principal { width: 100%; } .sv-etapas__acoes > :not(.sv-botao--principal) { align-self: flex-start; } .sv-etapas__acoes > .sv-botao--fantasma { padding-inline: 0; min-width: 44px; } } /* Alerta com ação, no celular: o botão começa na linha do texto. */ @media (max-width: 560px) { .sv-alerta > .sv-alerta__acao { margin-left: 0; align-self: start; } } /* Depoimento: o botão de tocar sem sombra (separa-se pela borda) e o triângulo é ícone de traço em texto-2. O quadro do vídeo é uma foto: leva o chanfro e o fio (sv-foto sv-foto--larga), então sai do recorte do sistema. */ .sv-depoimento__play { box-shadow: none; border: 1px solid var(--sv-linha); color: var(--sv-texto-2); } .sv-depoimento__play svg { margin-left: 2px; } .sv-depoimento__video.sv-foto { overflow: visible; border-radius: 0; background: none; display: block; } .sv-depoimento__video .sv-foto__quadro { display: grid; place-items: center; background: var(--sv-superficie-2); } /* Estado vazio: Centrada, sem moldura, o apoio em uma linha (34 caracteres). */ .sv-vazio { border: 0; } .sv-vazio__texto { max-width: 34ch; } .sv-vazio .sv-simbolo { width: 48px; height: 48px; margin-bottom: 8px; } /* Centrada: o botão na largura da coluna (até 360 px), como no login. */ .sv-vazio > .sv-botao { width: min(360px, 100%); } /* Caixa de marcar, opção e interruptor desabilitados: o controle a 45 %, o rótulo atenuado e o motivo legível. */ .sv-marcar:has(> input:disabled), .sv-opcao:has(> input:disabled), .sv-interruptor:has(> input:disabled) { color: var(--sv-texto-3); cursor: not-allowed; } .sv-marcar:has(> input:disabled) small, .sv-opcao:has(> input:disabled) small, .sv-interruptor:has(> input:disabled) small { color: var(--sv-texto-2); } /* O que rola para o lado avisa sem degradê nem sombra: no celular, abas e tabela sangram até a borda da tela. */ @media (max-width: 560px) { .sv-abas:not(.sv-abas--segmento):has(> .sv-aba:nth-child(4)) > .sv-aba { flex: 0 0 40%; overflow: hidden; text-overflow: clip; } } @media (max-width: 760px) { .sv-abas:not(.sv-abas--segmento) { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; } .sv-tabela-caixa { margin-inline: -16px; padding-inline: 0; border-inline: 0; } .sv-tabela-caixa .sv-tabela :is(th, td):first-child { padding-left: 32px; } .sv-tabela-caixa .sv-tabela :is(th, td):last-child { padding-right: 32px; } } /* O aviso flutuante pousa no canto e o conteúdo reserva o espaço dele no fim: nunca cobre a última linha da tabela. */ .sv-app__conteudo:has(> .sv-app__aviso) { padding-bottom: 136px; } /* Piso de toque: link curto da trilha com 44 px de largura. */ .sv-trilha a { min-width: 44px; justify-content: center; } /* Gráfico no celular: a legenda em coluna, uma linha por série (nunca "Imóveis — Sucessões" com "Contratos" sozinho embaixo). */ @container (max-width: 479px) { .sv-grafico .sv-grafico__legenda { flex-direction: column; align-items: flex-start; gap: 6px; } } /* Sumário abaixo de 400 px de tela: uma coluna (com duas, um nome de duas palavras quebra: "Próximos / passos"). */ @media (max-width: 399px) { .sv-sumario, .sv-sumario--3 { grid-template-columns: minmax(0, 1fr); gap: 4px; } } /* Avatar: o grupo sobrepõe 4 px (com 8, a inicial da direita era cortada: "HP" virava "H"); sobre o realce (a linha escolhida da seleção), o avatar usa a superfície, para o círculo não sumir; a foto escura no Granito leva um anel de 1 px em borda-controle, porque a borda da foto some no chão (o fio do chanfro é da foto chanfrada, não do círculo). */ .sv-avatares .sv-avatar + .sv-avatar { margin-left: -4px; } .sv-menu__item[aria-selected="true"] .sv-avatar, .sv-nav__item[aria-current] .sv-avatar { background: var(--sv-superficie); color: var(--sv-texto); } [data-theme="escuro"] .sv-avatar:has(> img), .dark .sv-avatar:has(> img) { box-shadow: 0 0 0 1px var(--sv-borda-controle); } /* Capa do documento no PDF: o subtítulo nunca se parte entre as páginas 1 e 2 (o teto da capa é medido por verificacao/capa.js). */ @media print { .sv-doc__capa > .sv-subtitulo, .sv-doc__capa > .sv-titulo, .sv-doc__meta { break-inside: avoid; } } /* Nenhuma palavra sozinha na última linha: texto de apoio equilibrado ao fim, títulos e perguntas equilibrados. */ .sv-subtitulo, .sv-vazio__texto, .sv-modal__texto, .sv-aviso__texto, .sv-alerta__texto, .sv-sanfona__corpo, .sv-resultado__ressalva, .sv-marcar small, .sv-opcao small, .sv-interruptor small, .sv-ajuda, .sv-frente p, .sv-escolha, .sv-resultado__linha dt, .sv-sumario a { text-wrap: pretty; } .sv-etapas__pergunta, .sv-vazio__titulo, .sv-modal__titulo, .sv-cartao__titulo, .sv-rodape__frase, .sv-depoimento__frase, .sv-sanfona summary, .sv-frente__titulo { text-wrap: balance; } @media (prefers-reduced-motion: reduce) { .sv-carregando path { animation: none; } } /* ---------- 12. Peças de tamanho fixo (estágio 7: post, story, compartilhamento de link) ---------- */ /* A peça é um arquivo de tamanho fixo, com escala própria em px da peça. O piso conta no tamanho em que ela aparece: post e story aparecem com 390 px de largura no celular (36 %), então nada abaixo de 40 px na peça (14,4 px na tela, por isso a Raleway em 500); o compartilhamento de link aparece com cerca de 500 px (42 %), então nada abaixo de 34 px. A peça declara o próprio chão no (data-theme="claro" = Pedra, "escuro" = Granito), nunca o tema do aparelho. Sem @page aqui: o documento usa este mesmo CSS. */ .sv-peca { position: relative; display: grid; overflow: hidden; margin: 0; background: var(--sv-fundo); color: var(--sv-texto); font-synthesis: none; } .sv-peca--post { width: 1080px; height: 1350px; padding: 96px; grid-template-rows: auto auto minmax(0, 1fr); } .sv-peca--story { width: 1080px; height: 1920px; padding: 314px 96px 404px; grid-template-rows: auto auto minmax(0, 1fr); } /* 250 e 340 livres + 64 de respiro */ .sv-peca--og { width: 1200px; height: 630px; padding: 56px 72px; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 56px; } /* O topo: o S sozinho (80 px; a quina superior esquerda, oposta à da foto) e o rótulo à direita (a frente e o contador do carrossel). */ .sv-peca__topo { display: flex; justify-content: space-between; align-items: center; gap: 32px; min-height: 80px; } .sv-peca__simbolo { display: block; flex: none; width: 80px; height: 80px; } .sv-peca__rotulo { margin: 0; font: 500 40px/48px Raleway, 'Segoe UI', system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-texto-2); white-space: nowrap; } /* A afirmação: Playfair Display 400, 94 px no post com foto; 112 px no post de frase e no story; sem palavra sozinha. */ .sv-peca__frase { margin: 0; font: 400 94px/98px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.01em; color: var(--sv-texto); text-wrap: balance; } .sv-peca--frase .sv-peca__frase, .sv-peca--story .sv-peca__frase { font-size: 112px; line-height: 116px; } .sv-peca__texto { margin: 0; font: 500 40px/58px Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); text-wrap: pretty; } .sv-peca__olho { margin: 0; font: 500 40px/48px Raleway, 'Segoe UI', system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-enfase); } /* O selo da peça: corte de 24 px e fio de 3 px, com a letra de 40 px (0,12em: ele cabe na coluna ao lado da foto). A foto da peça: 380 × 557 px (corte de 47 px, fio de 4,7 px); com 450 px, a coluna do texto ficava estreita demais para o selo no piso. */ .sv-peca .sv-selo { --_c: calc(var(--sv-chanfro-selo) * 2); --_t: 3px; min-height: 0; padding: 16px 28px 16px 32px; font-size: 40px; line-height: 48px; letter-spacing: 0.12em; } .sv-peca .sv-foto { width: 380px; aspect-ratio: 380 / 557; } /* Post de conteúdo (Pedra): o topo, a afirmação, e embaixo o texto com a lei e o selo à esquerda e o retrato chanfrado à direita. */ .sv-peca--post .sv-peca__frase { max-width: 790px; margin-top: 64px; } .sv-peca__base { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; align-self: end; } .sv-peca__lado { display: grid; gap: 40px; justify-items: start; align-content: end; } /* Post de frase (Granito): o topo, a afirmação no centro óptico, o texto com a lei e o selo embaixo. */ .sv-peca--frase { grid-template-rows: auto minmax(0, 1fr) auto; } .sv-peca--frase .sv-peca__frase { align-self: center; max-width: none; margin: -40px 0 0; } .sv-peca--frase .sv-peca__lado { gap: 48px; } /* Story (Granito): o S sozinho no topo (sem o nome ao lado, que leria como a horizontal), o lema, e embaixo o retrato chanfrado com a chamada e o selo ao lado. */ .sv-peca--story .sv-peca__frase { margin-top: 64px; } /* Compartilhamento de link (Granito, Leitura): à esquerda o S no alto, o lema no meio e, no pé, as frentes e o nome com a OAB (longe do S: o nome logo embaixo do S leria como uma assinatura que não existe); à direita o retrato chanfrado. */ .sv-peca--og .sv-peca__lado { grid-template-rows: auto minmax(0, 1fr) auto; gap: 24px; align-content: stretch; } .sv-peca--og .sv-peca__frase { align-self: center; } .sv-peca__assina { display: grid; gap: 6px; } .sv-peca--og .sv-peca__simbolo { width: 64px; height: 64px; } .sv-peca--og .sv-peca__olho { font-size: 34px; line-height: 44px; letter-spacing: 0; text-transform: none; } /* em caixa alta, o nome e a OAB não cabem numa linha */ .sv-peca--og .sv-peca__frase { font-size: 76px; line-height: 80px; } .sv-peca--og .sv-peca__texto { font-size: 34px; line-height: 44px; } .sv-peca--og .sv-foto { width: 340px; aspect-ratio: 3 / 4; align-self: end; } /* Guias de conferência (só para revisar, nunca no arquivo final): as áreas que o aplicativo cobre no story. */ .sv-peca--guias::before, .sv-peca--guias::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; background: var(--sv-critico-fundo); opacity: 0.7; } .sv-peca--guias::before { top: 0; height: 250px; } .sv-peca--guias::after { bottom: 0; height: 340px; } /* ---------- 13. Cartão de visita e papel timbrado (impressos) ---------- */ /* Cartão de visita: 90 × 50 mm, margem de segurança de 5 mm; na impressão, 3 mm de sangria em volta (a face passa a 96 × 56 mm e o modelo declara @page do mesmo tamanho). Piso de 7 pt. Frente no Granito com a pilha vertical (30 mm: o S com 20 mm, o mínimo no papel); verso na Pedra-2 com o nome em Playfair Display (16 pt: no papel, a Playfair só de 14 pt para cima, o fio fica com 0,1 mm), o cargo e a OAB, o S em Bronze no canto e os contatos. O chão vai até a sangria nas duas faces. */ .sv-visita { position: relative; display: grid; overflow: hidden; width: 90mm; height: 50mm; padding: 5mm; background: var(--sv-fundo); color: var(--sv-texto); font-synthesis: none; break-after: page; } .sv-visita--frente { place-items: center; background: var(--sv-chao-marca); } .sv-visita--frente .sv-pilha { height: 30mm; } .sv-visita--verso { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--sv-superficie); } .sv-visita__nome { margin: 0; font: 400 16pt/1.1 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.005em; color: var(--sv-texto); } .sv-visita__cargo { margin: 1.4mm 0 0; font: 500 8pt/1.3 Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); } .sv-visita__simbolo { display: block; width: 9mm; height: 9mm; } .sv-visita__contatos { grid-column: 1 / -1; grid-row: 3; margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6mm; font: 500 8pt/1.3 Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto); } .sv-visita__contatos span { color: var(--sv-texto-2); } @media print { .sv-visita { width: 96mm; height: 56mm; padding: 8mm; } } /* Papel timbrado de impressão: A4, só o cabeçalho (o S em Bronze à esquerda; o nome e a OAB em texto à direita, na quina oposta) e o pé (três linhas de 8 pt), o corpo em branco e sem chão: o papel da bandeja é o chão. Margens de 14 mm em cima e embaixo e 16 mm dos lados, fora do alcance que a impressora perde na borda. */ .sv-timbrado { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 210mm; height: 297mm; padding: 14mm 16mm; background: var(--sv-superficie); color: var(--sv-texto); font-synthesis: none; } .sv-timbrado__cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 10mm; } .sv-timbrado__cabeca .sv-simbolo { display: block; width: 14mm; height: 14mm; } .sv-timbrado__olho { margin: 0; display: grid; justify-items: end; gap: 0.8mm; font: 500 8pt/1.3 Raleway, 'Segoe UI', system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-enfase); } .sv-timbrado__pe { display: grid; gap: 0.8mm; margin: 0; font: 500 8pt/11pt Raleway, 'Segoe UI', system-ui, sans-serif; color: var(--sv-texto-2); } .sv-timbrado__pe strong { font-weight: 600; color: var(--sv-texto); } @media print { .sv-timbrado { background: none; } } /* ---------- 11. Algarismos alinhados em tudo (por último) ---------- */ /* As duas fontes vêm com algarismo antigo por padrão (o zero da Raleway vira "o"). O atalho `font:` zera a variante numérica de cada elemento que o usa, então a regra vem no fim do arquivo e com !important, em tudo o que está dentro da marca. Documento, peça e e-mail que não leem esta regra usam as fontes derivadas Servilha Título e Servilha Texto. */ .sv, .sv *, .sv *::before, .sv *::after { font-variant-numeric: lining-nums !important; } /* Tela que segue o tema do aparelho (data-theme="aparelho"): os mesmos ajustes do tema escuro, quando o aparelho está no escuro */ @media (prefers-color-scheme: dark) { [data-theme="aparelho"] .sv-botao--perigo, .sv-botao--perigo[data-theme="aparelho"] { color: var(--sv-fundo); } [data-theme="aparelho"] .sv-interruptor input::after { background: var(--sv-texto); } [data-theme="aparelho"] .sv-interruptor input:checked::after { background: var(--sv-fundo); } [data-theme="aparelho"] .sv-veu { background: rgba(0,0,0,.6); } [data-theme="aparelho"] .sv-avatar--marca { box-shadow: inset 0 0 0 1px var(--sv-linha); } [data-theme="aparelho"] .sv-avatar:has(> img) { box-shadow: 0 0 0 1px var(--sv-borda-controle); } }