/* Painel SpinHub — tema base A fonte Poppins e carregada por no de cada pagina, nao por @import: @import dentro do CSS serializa 3 idas ao servidor antes do texto aparecer. */ :root { --sh-purple: #8b15c9; --sh-purple-light: #b24bf0; --sh-purple-dark: #3a0a52; --sh-void: #0a0612; --sh-void-2: #130a1f; --sh-green: #26ff6e; --sh-green-soft: #7bffb0; --sh-white: #ffffff; --sh-text: #e9e4f2; --sh-text-muted: #a698bd; --sh-danger: #ff5470; --sh-warning: #ffb020; /* metal (gunmetal/grafite escuro, mais contraste e brilho especular, como referência) */ --sh-metal-1: #403c46; --sh-metal-2: #0a090c; --sh-metal-3: #211e26; --sh-metal-edge: rgba(255, 255, 255, 0.22); --sh-metal-specular: radial-gradient(140% 90% at 18% -15%, rgba(255, 255, 255, 0.22), transparent 55%); --sh-metal-bg: var(--sh-metal-specular), linear-gradient(165deg, var(--sh-metal-1) 0%, var(--sh-metal-3) 45%, var(--sh-metal-2) 100%); --sh-metal-shadow: 0 28px 70px rgba(0, 0, 0, 0.65), inset 0 1px 0 var(--sh-metal-edge), inset 0 -1px 0 rgba(0, 0, 0, 0.6); --sh-radius: 14px; --sh-radius-sm: 8px; --sh-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5); --sh-font: 'Poppins', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } /* ---- scrollbar customizado (verde neon sobre roxo do sistema) ---- */ html { scrollbar-width: thin; scrollbar-color: var(--sh-green) var(--sh-purple-dark); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--sh-purple-dark); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--sh-green), #14b34c); border-radius: 999px; border: 2px solid var(--sh-purple-dark); } ::-webkit-scrollbar-thumb:hover { background: var(--sh-green-soft); } ::-webkit-scrollbar-corner { background: var(--sh-purple-dark); } html, body { margin: 0; padding: 0; } body { font-family: var(--sh-font); background: radial-gradient(ellipse at top, var(--sh-void-2) 0%, var(--sh-void) 60%); color: var(--sh-text); min-height: 100vh; -webkit-font-smoothing: antialiased; position: relative; } /* ---- grain (somente na interface do sistema, nunca dentro dos relatórios) ---- */ /* Sem mix-blend-mode de proposito: um blend em tela cheia obriga o navegador a reagrupar e recompor a pagina inteira a cada quadro em que algo anima embaixo. Alpha puro num valor um pouco menor da praticamente o mesmo resultado visual. */ body.sh-grain::after { content: ''; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- metal (paineis / barras escovadas) ---- */ .metal-panel { background: var(--sh-metal-bg); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--sh-metal-shadow); position: relative; } .metal-panel::before { content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); } /* ---- animacoes de entrada forcadas (CSS puro, nao depende de JS/observer) ---- */ @keyframes sh-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes sh-in-scale { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes sh-in-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes sh-in-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } .card, .auth-card, .modal, .report-card, .stat-card, .btn, .badge, table.table tbody tr, .empty-state, .field, .toast { animation: sh-in-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 55ms); } .admin-topbar, .toolbar { animation: sh-in-down 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; } .modal-overlay.open .modal { animation: sh-in-scale 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } /* Entrada é sempre forçada (mesmo com prefers-reduced-motion) por pedido de produto: os elementos precisam aparecer com a animação sempre, sem depender de JS/observers. */ a { color: var(--sh-green-soft); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .brand-logo { display: inline-flex; align-items: center; gap: 0; font-weight: 800; font-size: 1.6rem; letter-spacing: -0.5px; font-style: italic; } .brand-logo .spin { color: var(--sh-green); text-shadow: 0 0 18px rgba(38, 255, 110, 0.65); margin-right: -1px; } .brand-logo .hub { color: var(--sh-white); } .sh-icon { display: inline-flex; vertical-align: -3px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; font-size: 0.95rem; font-weight: 600; border-radius: var(--sh-radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; background: rgba(255, 255, 255, 0.06); color: var(--sh-text); } /* !important: sem ele, o "both" da animação de entrada prende o transform final (translateY(0)) para sempre e o hover/active nunca se move. */ .btn:hover { transform: translateY(-1px) !important; } .btn:active { transform: translateY(0) !important; } .btn-primary { background: linear-gradient(135deg, var(--sh-purple), var(--sh-purple-light)); color: #fff; font-weight: 500; box-shadow: 0 8px 24px rgba(139, 21, 201, 0.45); transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; } .btn-primary:hover { background: linear-gradient(135deg, var(--sh-green), var(--sh-green-soft)); color: #082c17; box-shadow: 0 10px 30px rgba(38, 255, 110, 0.45); } .btn-neon { background: rgba(38, 255, 110, 0.12); color: var(--sh-green); border-color: rgba(38, 255, 110, 0.5); box-shadow: 0 0 0 rgba(38, 255, 110, 0); } .btn-neon:hover { box-shadow: 0 0 22px rgba(38, 255, 110, 0.55); } .btn-danger { background: rgba(255, 84, 112, 0.12); color: var(--sh-danger); border-color: rgba(255, 84, 112, 0.4); } .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.18); } .btn-bright { background: linear-gradient(180deg, #ffffff, #e4e0ec); color: #14101c; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 #fff; border-color: transparent; } .btn-bright:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 #fff; } .btn-sm { padding: 7px 13px; font-size: 0.82rem; } .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; } .card { background: var(--sh-metal-bg); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--sh-radius); padding: 24px; box-shadow: var(--sh-metal-shadow); position: relative; } .card::before { content: ''; position: absolute; left: 6%; right: 6%; top: 0; height: 1px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); } .field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 0.85rem; color: var(--sh-text-muted); font-weight: 600; } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="search"], .field textarea, .field select { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--sh-radius-sm); padding: 11px 14px; color: var(--sh-white); font-size: 0.95rem; font-family: var(--sh-font); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--sh-green); box-shadow: 0 0 0 3px rgba(38, 255, 110, 0.15); } .field-hint { font-size: 0.78rem; color: var(--sh-text-muted); } .input-with-action { display: flex; gap: 8px; } .input-with-action input { flex: 1; } .alert { padding: 12px 16px; border-radius: var(--sh-radius-sm); font-size: 0.9rem; margin-bottom: 16px; } .alert-error { background: rgba(255, 84, 112, 0.12); border: 1px solid rgba(255, 84, 112, 0.4); color: #ffb3c0; } .alert-success { background: rgba(38, 255, 110, 0.1); border: 1px solid rgba(38, 255, 110, 0.4); color: var(--sh-green-soft); } .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; } .badge-active { background: rgba(38, 255, 110, 0.15); color: var(--sh-green); } .badge-inactive { background: rgba(255, 255, 255, 0.08); color: var(--sh-text-muted); } table.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } table.table th { text-align: left; color: var(--sh-text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } table.table td { padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); vertical-align: middle; } table.table tr:hover td { background: rgba(255, 255, 255, 0.03); } .modal-overlay { position: fixed; inset: 0; background: rgba(5, 2, 10, 0.75); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .modal-overlay.open { display: flex; } .modal { background: var(--sh-metal-bg); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--sh-radius); box-shadow: var(--sh-metal-shadow), 0 30px 80px rgba(0, 0, 0, 0.6); max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 28px; } .modal::before { content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); } .modal h2 { margin-top: 0; } .modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--sh-text-muted); font-size: 1.4rem; cursor: pointer; } .toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 2000; } .toast { padding: 12px 18px; border-radius: var(--sh-radius-sm); background: var(--sh-metal-bg); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--sh-shadow-lg); font-size: 0.9rem; animation: sh-toast-in 0.25s ease; } .toast.success { border-color: rgba(38, 255, 110, 0.5); color: var(--sh-green-soft); } .toast.error { border-color: rgba(255, 84, 112, 0.5); color: #ffb3c0; } @keyframes sh-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .empty-state { text-align: center; padding: 60px 20px; color: var(--sh-text-muted); } .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--sh-white); animation: sh-spin 0.7s linear infinite; } @keyframes sh-spin { to { transform: rotate(360deg); } } .text-muted { color: var(--sh-text-muted); } .flex { display: flex; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-gap { display: flex; gap: 10px; align-items: center; } .mt-0 { margin-top: 0; }