/** * Design System - Portal Municipal * Baseado em DEV/referencia_design.html * Variáveis, reset e estilos base. CSS centralizado (não inline). */ /* ======================================== DESIGN SYSTEM - CSS VARIABLES ======================================== */ :root { /* Cores Principais - Degradê Azul Institucional */ --primary: #3b82f6; --primary-darker: #1e40af; --primary-dark: #2563eb; --primary-base: #3b82f6; --primary-light: #60a5fa; --primary-lighter: #93bbfd; --primary-accent: #3b82f6; /* Backgrounds */ --bg-body: #f3f4f6; --bg-card: #ffffff; --bg-header: #ffffff; --bg-subtle: #f9fafb; --bg-secondary: #f8fafc; /* Bordas e neutros */ --border-color: #e5e7eb; --border-light: #e5e7eb; --neutral-100: #f8fafc; --neutral-600: #64748b; /* Status */ --status-online: #059669; --status-warning: #d97706; --status-offline: #dc2626; --error: #b91c1c; --danger: #dc3545; --warning: #ffc107; --warning-base: #d97706; /* Textos */ --text-primary: #111827; --text-secondary: #4b5563; --text-tertiary: #6b7280; --text-muted: #9ca3af; --text-inverse: #ffffff; /* Sombras */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Tipografia */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; /* Espaçamentos */ --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --spacing-3xl: 4rem; /* Bordas */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; /* Transições */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* Superfícies */ --surface-dark: #1a1a2e; --focus-ring: #fbbf24; } /* ======================================== ESCALA DE FONTE (Acessibilidade LBI) Classes aplicadas no para escalonar todo o rem ======================================== */ html.font-scale-90 { font-size: 90%; } html.font-scale-100 { font-size: 100%; } html.font-scale-110 { font-size: 110%; } html.font-scale-120 { font-size: 120%; } /* ======================================== MODO ALTO CONTRASTE (Acessibilidade WCAG) Fundo quase preto + azul escuro ======================================== */ body.high-contrast { --primary: #3b82f6; --primary-darker: #1e40af; --primary-dark: #2563eb; --primary-base: #3b82f6; --primary-light: #60a5fa; --primary-lighter: #93bbfd; --primary-accent: #3b82f6; --bg-body: #0d0d0d; --bg-card: #141414; --bg-header: #0d0d0d; --bg-subtle: #1a1a1a; --bg-secondary: #1e1e1e; --border-color: #334155; --border-light: #334155; --neutral-100: #1e293b; --neutral-600: #94a3b8; --text-primary: #ffffff; --text-secondary: #e5e7eb; --text-tertiary: #d1d5db; --text-muted: #9ca3af; --text-inverse: #0d0d0d; --status-online: #22c55e; --status-warning: #eab308; --status-offline: #ef4444; } body.high-contrast * { border-color: #334155 !important; color: #ffffff !important; } body.high-contrast .search-box, body.high-contrast .service-card, body.high-contrast .stat-card, body.high-contrast .info-card, body.high-contrast .content-card, body.high-contrast .breadcrumb-container, body.high-contrast .header { background: #141414 !important; border: 2px solid #3b82f6 !important; } body.high-contrast .btn-primary, body.high-contrast .search-box button { background: #3b82f6 !important; color: #ffffff !important; border: 2px solid #60a5fa !important; } body.high-contrast .btn-primary *, body.high-contrast .logo-icon * { color: #ffffff !important; } body.high-contrast .language-dropdown { background: #141414 !important; border: 2px solid #3b82f6 !important; } body.high-contrast .language-option:hover { background: #2563eb !important; color: #ffffff !important; } /* ======================================== RESET & BASE ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: 1.6; color: var(--text-primary); background-color: var(--bg-body); overflow-x: hidden; } a { text-decoration: none; color: var(--primary-base); } a:hover { color: var(--primary-dark); } img { max-width: 100%; height: auto; display: block; } /* Container padrão */ .container { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-lg); } /* Títulos e textos usando variáveis */ h1, h2, h3, h4 { color: var(--text-primary); font-weight: 600; } /* Títulos em overlay (capa, hero): texto claro sobre imagem/fundo escuro */ .heading-inverse h1, .heading-inverse h2, .heading-inverse h3, .heading-inverse h4 { color: var(--text-inverse); } p { color: var(--text-secondary); } /* ======================================== GLOBAL Z-INDEX HIERARCHY Referência centralizada de camadas para evitar conflitos. Ao criar novos overlays, consulte esta tabela. ======================================== Camada | Z-Index | Arquivo fonte -----------------+---------+--------------------- .header (sticky) 1000 header-nav.css .nav-dropdown 1000 header-nav.css .header (mobile) 1001 responsivo.css .accessibility-panel 1001 acessibilidade.css .mobile-nav-overlay 1100 responsivo.css .messages-container 2100 design-system.css (abaixo) .modal-wrapper 2000 design-system.css (abaixo) .guia-portal-overlay 2000 design-system.css (abaixo) .vlibras-widget 2500 design-system.css (abaixo) ======================================== */ /* Mensagens Django (toasts) — acima de modais */ .messages-container { position: relative; z-index: 2100; } /* Modais genéricos e Guia do Portal */ .modal-wrapper, .guia-portal-overlay { z-index: 2000; } /* VLibras — sempre no topo (widget de acessibilidade) */ div[vw].vlibras-pos-bottom-right { z-index: 2500 !important; }