/** * GVSI Comunidade — estilos compartilhados + design tokens (light/dark) * Tokens em CSS variables (tripletas R G B) para permitir opacidade do Tailwind * (ex.: bg-primary/20). O tema alterna trocando a classe .dark no . */ :root { color-scheme: light; /* Cores dinâmicas (mudam no dark) */ --c-primary: 0 55 176; --c-on-primary: 255 255 255; --c-primary-container: 29 78 216; --c-on-primary-container: 202 211 255; --c-inverse-primary: 183 196 255; --c-secondary: 77 91 148; --c-on-secondary: 255 255 255; --c-secondary-container: 176 190 254; --c-on-secondary-container: 61 76 131; --c-tertiary: 127 37 0; --c-on-tertiary: 255 255 255; --c-tertiary-container: 167 52 0; --c-on-tertiary-container: 255 201 183; --c-error: 186 26 26; --c-on-error: 255 255 255; --c-error-container: 255 218 214; --c-on-error-container: 147 0 10; --c-background: 250 248 255; --c-on-background: 26 27 35; --c-surface: 250 248 255; --c-on-surface: 26 27 35; --c-surface-variant: 226 225 237; --c-on-surface-variant: 67 70 85; --c-surface-bright: 250 248 255; --c-surface-dim: 217 217 229; --c-surface-container-lowest: 255 255 255; --c-surface-container-low: 243 242 254; --c-surface-container: 237 237 249; --c-surface-container-high: 232 231 243; --c-surface-container-highest: 226 225 237; --c-inverse-surface: 46 48 57; --c-inverse-on-surface: 240 240 251; --c-outline: 116 118 134; --c-outline-variant: 196 197 215; --c-surface-tint: 33 81 218; /* Cores "fixed" (estáticas nos dois temas, por definição do Material 3) */ --c-primary-fixed: 220 225 255; --c-primary-fixed-dim: 183 196 255; --c-on-primary-fixed: 0 21 81; --c-on-primary-fixed-variant: 0 57 181; --c-secondary-fixed: 220 225 255; --c-secondary-fixed-dim: 183 196 255; --c-on-secondary-fixed: 3 22 77; --c-on-secondary-fixed-variant: 53 67 123; --c-tertiary-fixed: 255 219 207; --c-tertiary-fixed-dim: 255 181 156; --c-on-tertiary-fixed: 57 12 0; --c-on-tertiary-fixed-variant: 131 39 0; } .dark { color-scheme: dark; --c-primary: 183 196 255; --c-on-primary: 0 42 108; --c-primary-container: 0 57 181; --c-on-primary-container: 220 225 255; --c-inverse-primary: 0 55 176; --c-secondary: 176 190 254; --c-on-secondary: 31 45 97; --c-secondary-container: 53 67 123; --c-on-secondary-container: 220 225 255; --c-tertiary: 255 181 156; --c-on-tertiary: 92 25 0; --c-tertiary-container: 131 39 0; --c-on-tertiary-container: 255 219 207; --c-error: 255 180 171; --c-on-error: 105 0 5; --c-error-container: 147 0 10; --c-on-error-container: 255 218 214; --c-background: 18 19 24; --c-on-background: 227 225 233; --c-surface: 18 19 24; --c-on-surface: 227 225 233; --c-surface-variant: 69 70 79; --c-on-surface-variant: 196 197 215; --c-surface-bright: 56 57 63; --c-surface-dim: 18 19 24; --c-surface-container-lowest: 12 13 17; --c-surface-container-low: 26 27 35; --c-surface-container: 30 31 39; --c-surface-container-high: 41 42 50; --c-surface-container-highest: 51 53 61; --c-inverse-surface: 227 225 233; --c-inverse-on-surface: 46 48 57; --c-outline: 142 144 158; --c-outline-variant: 68 70 85; --c-surface-tint: 183 196 255; } /* ---- Ícones (Material Symbols) ---- */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; display: inline-block; line-height: 1; } .material-symbols-outlined.fill { font-variation-settings: 'FILL' 1; } /* ---- Transições entre páginas (evita "piscar" a tela ao trocar de menu) ---- */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; } /* Sidebar (desktop) e nav inferior (mobile) ficam "parados" durante a troca */ aside.fixed.inset-y-0 { view-transition-name: gvsi-sidebar; } nav.fixed.bottom-0 { view-transition-name: gvsi-bottomnav; } /* ---- Base ---- */ html { -webkit-tap-highlight-color: transparent; background-color: rgb(var(--c-background)); /* evita flash branco antes do Tailwind carregar */ } body { font-family: 'Inter', sans-serif; min-height: 100dvh; font-size: 18px; /* base legível p/ público 70+: texto sem classe de tamanho (ex.: balões de mensagem) herda 18px */ } /* ---- Balão de mensagem enviada (reutilizado quando houver mensagens reais) ---- */ .message-gradient-outgoing { background: linear-gradient(135deg, #004ac6 0%, #2563eb 100%); } /* ---- Scrollbars ---- */ .custom-scrollbar::-webkit-scrollbar { width: 6px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #d3e4fe; border-radius: 10px; } .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #33353d; } .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ---- Superfícies translúcidas ---- */ .glass-input { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .glass-card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .dark .glass-input { background: rgba(30, 31, 39, 0.8); } .dark .glass-card { background: rgba(30, 31, 39, 0.7); } /* ---- Seleção de mídia ---- */ .active-media-ring { outline: 3px solid #004ac6; outline-offset: 2px; } /* ---- Animações ---- */ @keyframes slideInFromRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .animate-slide-in-right { animation: slideInFromRight 0.3s ease-out forwards; } @keyframes pulse-record { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } .animate-record { animation: pulse-record 2s infinite ease-in-out; }