/** * Sistema de Presets Tipográficos Governamentais * Sistema de Ponto Eletrônico com Reconhecimento Facial * * 6 Presets de fontes otimizadas para interfaces governamentais * Aplicação via atributos data-typography, data-typography-size, * data-typography-spacing e data-typography-weight no elemento * * Uso: * */ /* ============================================ IMPORTAÇÃO DE GOOGLE FONTS ============================================ */ /* Inter - Moderna e clara (PADRÃO ATUAL) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* Open Sans - Padrão oficial GOV.BR */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); /* Roboto - Universal, Material Design */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); /* Lato - Profissional e amigável */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap'); /* Source Sans Pro - Adobe, textos longos */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap'); /* Noto Sans - Suporte multilíngue robusto */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&display=swap'); /* Poppins - Geométrica e moderna */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); /* MuseoModerno - Fonte display moderna para branding */ @import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@300;400;500;600;700&display=swap'); /* ============================================ PRESET 1: INTER MODERN (Padrão Atual) Moderna, excelente legibilidade digital ============================================ */ [data-typography="inter-modern"], html:not([data-typography]) { --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-headings: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ============================================ PRESET 2: OPEN SANS GOV.BR Padrão oficial do design system gov.br ============================================ */ [data-typography="open-sans"] { --font-family-primary: 'Open Sans', Arial, 'Helvetica Neue', sans-serif; --font-family-headings: 'Open Sans', Arial, 'Helvetica Neue', sans-serif; } /* ============================================ PRESET 3: ROBOTO UNIVERSAL Material Design, amplamente adotada ============================================ */ [data-typography="roboto-universal"] { --font-family-primary: 'Roboto', 'Segoe UI', Arial, sans-serif; --font-family-headings: 'Roboto', 'Segoe UI', Arial, sans-serif; } /* ============================================ PRESET 4: LATO PROFISSIONAL Profissional e amigável ============================================ */ [data-typography="lato-profissional"] { --font-family-primary: 'Lato', 'Helvetica Neue', Arial, sans-serif; --font-family-headings: 'Lato', 'Helvetica Neue', Arial, sans-serif; } /* ============================================ PRESET 5: SOURCE SANS PRO Adobe, excelente para textos longos ============================================ */ [data-typography="source-sans-pro"] { --font-family-primary: 'Source Sans 3', 'Source Sans Pro', sans-serif; --font-family-headings: 'Source Sans 3', 'Source Sans Pro', sans-serif; } /* ============================================ PRESET 6: NOTO SANS MULTILÍNGUE Suporte robusto a caracteres especiais ============================================ */ [data-typography="noto-sans"] { --font-family-primary: 'Noto Sans', Arial, sans-serif; --font-family-headings: 'Noto Sans', Arial, sans-serif; } /* ============================================ PRESET 7: POPPINS MODERNA Geométrica e clean, interfaces modernas ============================================ */ [data-typography="poppins-modern"] { --font-family-primary: 'Poppins', Arial, sans-serif; --font-family-headings: 'Poppins', Arial, sans-serif; } /* ============================================ CONTROLES DE TAMANHO Small: 14px (WCAG mínimo) Medium: 15px (padrão confortável) Large: 17px (acessibilidade aumentada) ============================================ */ [data-typography-size="small"] { --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 14px; --font-size-lg: 16px; --font-size-xl: 17px; --font-size-2xl: 20px; --font-size-3xl: 26px; --font-size-card-value: 44px; --font-size-card-label: 10px; } [data-typography-size="medium"], html:not([data-typography-size]) { --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 15px; --font-size-lg: 17px; --font-size-xl: 18px; --font-size-2xl: 22px; --font-size-3xl: 28px; --font-size-card-value: 48px; --font-size-card-label: 11px; } [data-typography-size="large"] { --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 17px; --font-size-lg: 19px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 30px; --font-size-card-value: 52px; --font-size-card-label: 12px; } [data-typography-size="extra-large"] { --font-size-xs: 13px; --font-size-sm: 15px; --font-size-base: 19px; --font-size-lg: 21px; --font-size-xl: 22px; --font-size-2xl: 26px; --font-size-3xl: 32px; --font-size-card-value: 56px; --font-size-card-label: 13px; } [data-typography-size="extra-small"] { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 13px; --font-size-lg: 15px; --font-size-xl: 16px; --font-size-2xl: 18px; --font-size-3xl: 24px; --font-size-card-value: 40px; --font-size-card-label: 9px; } /* ============================================ CONTROLES DE ESPAÇAMENTO DE LINHAS Normal: 1.5 (WCAG mínimo recomendado) Relaxed: 1.8 (melhor para dislexia/leitura longa) ============================================ */ [data-typography-spacing="normal"], html:not([data-typography-spacing]) { --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.6; } [data-typography-spacing="relaxed"] { --line-height-tight: 1.3; --line-height-normal: 1.7; --line-height-relaxed: 1.8; } /* ============================================ CONTROLES DE PESO DA FONTE Regular: 400 (padrão) Semibold: 600 (melhor contraste/legibilidade) ============================================ */ [data-typography-weight="regular"], html:not([data-typography-weight]) { --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; } [data-typography-weight="semibold"] { --font-weight-regular: 600; --font-weight-medium: 600; --font-weight-semibold: 700; --font-weight-bold: 700; } /* ============================================ APLICAÇÃO GLOBAL ============================================ */ body { font-family: var(--font-family-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-headings); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); } /* Elementos específicos que devem herdar as variáveis */ button, input, select, textarea, .form-control, .btn, .card, .table, .badge, .alert, .nav-link, .sidebar-link { font-family: var(--font-family-primary); } /* ============================================ TRANSIÇÕES SUAVES ============================================ */ body, h1, h2, h3, h4, h5, h6, p, span, a, button, input, select, textarea { transition: font-family 0.3s ease, font-size 0.3s ease, line-height 0.3s ease, font-weight 0.3s ease; } /* ============================================ OTIMIZAÇÕES DE RENDERING ============================================ */ /* Suavização de fontes */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Controle de quebra de texto */ body { text-rendering: optimizeLegibility; font-feature-settings: "kern" 1; font-kerning: normal; } /* Hifenização para textos longos (acessibilidade) */ p, .text-content, .description { hyphens: auto; word-wrap: break-word; overflow-wrap: break-word; } /* ============================================ ACESSIBILIDADE ============================================ */ /* Garantir tamanho mínimo em dispositivos móveis */ @media (max-width: 768px) { body { font-size: max(var(--font-size-base), 16px); /* Prevenir zoom no iOS */ } input, select, textarea { font-size: max(var(--font-size-base), 16px); /* Prevenir zoom no iOS */ } } /* Suportar zoom até 200% sem quebra de layout */ @media (min-resolution: 192dpi) { body { text-size-adjust: 100%; } } /* Alto contraste (Windows High Contrast Mode) */ @media (prefers-contrast: high) { body { font-weight: var(--font-weight-semibold); } } /* Preferência de movimento reduzido */ @media (prefers-reduced-motion: reduce) { body, h1, h2, h3, h4, h5, h6, p, span, a, button, input, select, textarea { transition: none !important; } } /* ============================================ FALLBACK PARA FONTES NÃO CARREGADAS ============================================ */ /* Se Google Fonts falhar, garantir fontes do sistema */ @supports not (font-display: swap) { html { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; } } /* ============================================ CLASSES UTILITÁRIAS DE TIPOGRAFIA ============================================ */ /* Tamanhos específicos */ .text-xs { font-size: var(--font-size-xs) !important; } .text-sm { font-size: var(--font-size-sm) !important; } .text-base { font-size: var(--font-size-base) !important; } .text-lg { font-size: var(--font-size-lg) !important; } .text-xl { font-size: var(--font-size-xl) !important; } .text-2xl { font-size: var(--font-size-2xl) !important; } .text-3xl { font-size: var(--font-size-3xl) !important; } /* Pesos */ .font-light { font-weight: var(--font-weight-light) !important; } .font-regular { font-weight: var(--font-weight-regular) !important; } .font-medium { font-weight: var(--font-weight-medium) !important; } .font-semibold { font-weight: var(--font-weight-semibold) !important; } .font-bold { font-weight: var(--font-weight-bold) !important; } /* Line-heights */ .leading-tight { line-height: var(--line-height-tight) !important; } .leading-normal { line-height: var(--line-height-normal) !important; } .leading-relaxed { line-height: var(--line-height-relaxed) !important; } /* Família de fontes */ .font-primary { font-family: var(--font-family-primary) !important; } .font-headings { font-family: var(--font-family-headings) !important; } .font-monospace { font-family: var(--font-family-monospace) !important; } /* ============================================ DEBUG (remover em produção) ============================================ */ /* Visualizar preset ativo (apenas desenvolvimento) */ /* body::after { content: "Fonte: " attr(data-typography) " | Tamanho: " attr(data-typography-size) " | Espaçamento: " attr(data-typography-spacing) " | Peso: " attr(data-typography-weight); position: fixed; bottom: 50px; right: 10px; background: rgba(0, 0, 0, 0.8); color: white; padding: 8px 12px; border-radius: 4px; font-size: 11px; font-family: monospace; z-index: 99998; pointer-events: none; } */