:root { --bg: #050508; --card: #0c0c12; --blue: #3b82f6; --purple: #8b5cf6; --cyan: #06b6d4; --emerald: #10b981; --amber: #f59e0b; --text: #e2e8f0; --muted: #94a3b8; --nav-h: 4rem; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; color: var(--text); font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; } /* Tailwind define bg-bgDark no ; fallback */ body:not([class*='bg-']) { background: var(--bg); } body.native-cursor { cursor: auto; } body:not(.native-cursor) { cursor: none; } #custom-cursor { position: fixed; width: 22px; height: 22px; border: 2px solid var(--cyan); border-radius: 50%; pointer-events: none; z-index: 10000; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s; box-shadow: 0 0 12px rgba(6, 182, 212, 0.5); mix-blend-mode: screen; } #custom-cursor.hovering, #custom-cursor.pressed { width: 36px; height: 36px; background: rgba(6, 182, 212, 0.08); } #custom-cursor-dot { position: fixed; width: 4px; height: 4px; background: #fff; border-radius: 50%; pointer-events: none; z-index: 10001; transform: translate(-50%, -50%); } .scanlines { position: fixed; inset: 0; background: linear-gradient( to bottom, transparent, transparent 50%, rgba(0, 0, 0, 0.18) 50%, rgba(0, 0, 0, 0.18) ); background-size: 100% 4px; pointer-events: none; z-index: 9998; opacity: 0.55; animation: scanMove 12s linear infinite; } @keyframes scanMove { to { background-position: 0 100vh; } } .glass-panel { background: rgba(12, 12, 18, 0.72); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.08); } .site-nav { position: fixed; top: 0; width: 100%; z-index: 50; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .nav-inner { max-width: 80rem; margin: 0 auto; padding: 0 1rem; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .logo { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; border: none; background: none; color: inherit; } .logo-mark { width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; border: 1px solid rgba(6, 182, 212, 0.5); display: grid; place-items: center; color: var(--cyan); } .logo-text { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: 0.12em; } .glitch-text { position: relative; } .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0.75; } .glitch-text::before { left: 2px; text-shadow: -2px 0 #ff00c1; animation: glitch1 2.5s infinite linear alternate-reverse; } .glitch-text::after { left: -2px; text-shadow: -2px 0 #00fff9; animation: glitch2 3s infinite linear alternate-reverse; } @keyframes glitch1 { 0% { clip-path: inset(10% 0 70% 0); } 100% { clip-path: inset(60% 0 20% 0); } } @keyframes glitch2 { 0% { clip-path: inset(50% 0 30% 0); } 100% { clip-path: inset(20% 0 60% 0); } } .nav-links { display: none; gap: 1.5rem; } .nav-link { font-size: 0.875rem; color: var(--muted); text-decoration: none; transition: color 0.2s; } .nav-link.active, .nav-link:hover { color: var(--cyan); } .nav-actions { display: flex; align-items: center; gap: 0.5rem; } .api-status { display: none; align-items: center; gap: 0.5rem; padding: 0.35rem 0.85rem; border-radius: 999px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.7rem; font-family: 'Geist Mono', monospace; } .api-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } .api-dot.on { background: var(--emerald); } .api-dot.warn { background: var(--amber); } .api-dot.err { background: #ef4444; } .api-ping { position: absolute; width: 8px; height: 8px; border-radius: 50%; animation: ping 1.2s infinite; } .api-ping.hidden { display: none; } .api-ping.on { background: var(--emerald); } @keyframes ping { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } } .icon-btn { border: none; background: rgba(255, 255, 255, 0.06); color: var(--muted); padding: 0.45rem; border-radius: 0.5rem; cursor: pointer; display: grid; place-items: center; } .icon-btn:hover { color: var(--cyan); background: rgba(6, 182, 212, 0.12); } .icon-btn .spin { animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #app { padding-top: var(--nav-h); min-height: 100vh; position: relative; } .view-container { display: none; min-height: calc(100vh - var(--nav-h)); opacity: 0; } .view-container.active { display: block; animation: viewIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes viewIn { from { opacity: 0; transform: scale(0.95) translateY(20px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } } #home-blobs .blob { position: fixed; border-radius: 50%; filter: blur(100px); opacity: 0.2; z-index: -1; pointer-events: none; } .blob-a { width: 500px; height: 500px; background: var(--blue); top: -120px; left: -80px; } .blob-b { width: 420px; height: 420px; background: var(--purple); bottom: 10%; right: -60px; } .hero { text-align: center; max-width: 48rem; margin: 0 auto 3rem; padding: 2rem 1rem 0; } .hero h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2.5rem, 7vw, 4.25rem); line-height: 1.05; margin: 0 0 1rem; letter-spacing: -0.02em; } .badge-nexus { display: inline-flex; align-items: center; gap: 0.35rem; border-color: rgba(6, 182, 212, 0.35) !important; background: rgba(6, 182, 212, 0.1) !important; color: var(--cyan) !important; font-family: 'Geist Mono', monospace; } .gradient-text { background: linear-gradient(90deg, var(--blue), var(--purple), var(--cyan)); -webkit-background-clip: text; color: transparent; } .hero p { color: var(--muted); font-size: 1.05rem; line-height: 1.6; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; } .btn-primary, .btn-ghost { padding: 0.85rem 1.5rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; } .btn-primary { background: #fff; color: #000; box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); } .btn-primary:hover { background: #e2e8f0; transform: scale(1.03); } .btn-ghost:hover { border-color: rgba(6, 182, 212, 0.45); box-shadow: 0 0 20px rgba(59, 130, 246, 0.35); transform: scale(1.03); } .btn-ghost { border: 1px solid rgba(255, 255, 255, 0.15); color: var(--text); } .badges { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 2rem 1rem; } .badge { font-size: 0.7rem; font-family: 'Geist Mono', monospace; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); } .dashboard-panel { max-width: 80rem; margin: 0 auto 2rem; padding: 1.25rem; border-radius: 1rem; } .chart-wrap { height: 200px; position: relative; } .chart-hint { font-size: 0.65rem; color: var(--muted); margin: 0.5rem 0 0; } .activity-panel { max-width: 80rem; margin: 0 auto 2rem; padding: 1.25rem; border-radius: 1rem; } .activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .activity-item { padding: 0.65rem 0.85rem; border-radius: 0.5rem; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.06); } .activity-item.pending { border-color: rgba(245, 158, 11, 0.4); } .activity-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.65rem; color: var(--muted); margin-bottom: 0.35rem; } .activity-type { color: var(--cyan); text-transform: uppercase; letter-spacing: 0.05em; } .activity-body { margin: 0; font-size: 0.8rem; line-height: 1.4; } .activity-empty { font-size: 0.8rem; color: var(--muted); padding: 0.5rem 0; } .node-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.5rem; background: rgba(5, 5, 8, 0.75); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; white-space: nowrap; text-shadow: 0 0 8px currentColor; } .panel-logs-wrap.hidden { display: none; } .panel-logs { list-style: none; margin: 0; padding: 0; max-height: 120px; overflow-y: auto; font-size: 0.7rem; color: var(--muted); } .panel-logs li { padding: 0.25rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } /* Páginas scrolláveis (métricas, playground) */ .page-scroll { overflow-y: auto; max-height: calc(100vh - var(--nav-h)); } .page-inner { max-width: 80rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; } .page-head { margin-bottom: 1.5rem; } .page-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.75rem; margin: 0 0 0.5rem; } .page-desc { color: var(--muted); margin: 0 0 1rem; font-size: 0.9rem; } .page-desc code { color: var(--cyan); font-size: 0.8rem; } .page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } .kpi-card { padding: 1rem; border-radius: 0.75rem; } .kpi-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 0.35rem; } .kpi-value { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--cyan); } .kpi-sub { font-size: 0.65rem; color: var(--muted); margin: 0.35rem 0 0; } .metrics-sources { font-size: 0.75rem; color: var(--muted); margin-bottom: 1rem; } .metrics-sources.hidden { display: none; } .metrics-select { background: #050508; border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text); padding: 0.35rem 0.65rem; border-radius: 0.35rem; font-size: 0.75rem; } .table-wrap { overflow-x: auto; } .table-wrap-tall { max-height: 320px; overflow-y: auto; } .metrics-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .metrics-table th { text-align: left; padding: 0.5rem 0.65rem; color: var(--muted); font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.7rem; text-transform: uppercase; } .metrics-table td { padding: 0.55rem 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); vertical-align: top; } /* Playground */ .playground-wrap { max-width: 48rem; } .pg-mode { display: flex; gap: 1.25rem; padding: 0.85rem 1rem; margin-bottom: 0.75rem; border-radius: 0.5rem; } .pg-mode-opt { font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; gap: 0.35rem; } .pg-options { padding: 0.85rem 1rem; margin-bottom: 0.75rem; border-radius: 0.5rem; } .pg-options.hidden { display: none; } .pg-options label:not(.pg-check) { display: block; font-size: 0.75rem; color: var(--muted); margin-bottom: 0.35rem; } .pg-check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8rem; cursor: pointer; margin-top: 0.5rem; } .pg-check.highlight { border: 1px solid rgba(245, 158, 11, 0.35); padding: 0.5rem; border-radius: 0.35rem; background: rgba(245, 158, 11, 0.06); } .pg-hint { font-size: 0.7rem; color: var(--amber); margin: 0.5rem 0 0; } .pg-hint.hidden { display: none; } .playground-log { min-height: 280px; max-height: 42vh; overflow-y: auto; padding: 1rem; margin-bottom: 0.75rem; border-radius: 0.5rem; } .pg-msg { margin-bottom: 0.85rem; padding: 0.65rem 0.85rem; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.06); } .pg-user { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.25); margin-left: 1.5rem; } .pg-jarvis { background: rgba(6, 182, 212, 0.08); border-color: rgba(6, 182, 212, 0.2); margin-right: 1.5rem; } .pg-error { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.35); } .pg-role { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.25rem; } .pg-text { font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; } .pg-meta { display: block; font-size: 0.65rem; color: var(--muted); margin-top: 0.35rem; } .pg-compose { padding: 0.75rem; border-radius: 0.5rem; } .pg-input { width: 100%; resize: vertical; min-height: 72px; background: #050508; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.5rem; color: var(--text); padding: 0.65rem; font-size: 0.85rem; margin-bottom: 0.5rem; } .pg-compose-actions { display: flex; justify-content: flex-end; gap: 0.5rem; } .pg-compose-actions .btn-primary { border: none; cursor: pointer; } @media (max-width: 767px) { .nav-links { display: none; } .kpi-grid { grid-template-columns: repeat(2, 1fr); } } .section-head { max-width: 80rem; margin: 0 auto 1rem; padding: 0 1rem; display: flex; justify-content: space-between; align-items: end; } .cards-grid { max-width: 80rem; margin: 0 auto; padding: 0 1rem 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .agent-card { position: relative; padding: 1.25rem; border-radius: 1rem; overflow: hidden; } .agent-card:hover { transform: translateY(-8px) scale(1.02); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 24px color-mix(in srgb, var(--agent-color) 45%, transparent); z-index: 2; } .agent-card .card-watermark { position: absolute; top: 0.75rem; right: 0.75rem; opacity: 0.08; pointer-events: none; } .agent-card .card-watermark svg { width: 5rem; height: 5rem; } .agent-card .card-body { position: relative; z-index: 1; } .card-head { display: flex; justify-content: space-between; margin-bottom: 1rem; } .card-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; border: 1px solid; display: grid; place-items: center; } .status-pill { display: flex; align-items: center; gap: 0.35rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); } .status-pill.on { color: var(--emerald); border-color: rgba(16, 185, 129, 0.4); } .status-pill.off { color: #f87171; border-color: rgba(239, 68, 68, 0.4); } .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .card-model { font-family: 'Geist Mono', monospace; font-size: 0.75rem; color: var(--cyan); } .card-desc, .card-state { font-size: 0.85rem; color: var(--muted); } .mono { font-family: 'Geist Mono', monospace; } #sala-canvas, #rede-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .overlay-panel { position: absolute; z-index: 10; pointer-events: none; padding: 1rem; border-radius: 0.75rem; max-width: 20rem; } .overlay-panel h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; margin: 0 0 0.35rem; display: flex; align-items: center; gap: 0.5rem; } .sala-top-left { top: 1rem; left: 1rem; } .rede-top-right { top: 1rem; right: 1rem; text-align: right; } .rede-controls { top: 5rem; right: 1rem; display: flex; flex-direction: column; gap: 0.35rem; pointer-events: auto; } #sala-tooltip { position: absolute; z-index: 20; padding: 0.85rem; border-radius: 0.5rem; min-width: 180px; } #sala-tooltip.hidden { display: none; } #rede-panel { bottom: 2rem; left: 2rem; pointer-events: auto; transition: opacity 0.3s, transform 0.3s; } #rede-panel.hidden { display: none; } #rede-panel.translate-y-4 { opacity: 0; transform: translateY(1rem); } #view-rede.focus-mode .overlay-panel:not(.rede-controls) { opacity: 0.2; } .modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 1rem; } .modal-backdrop:not(.hidden) { display: flex; } .modal-backdrop.hidden { display: none !important; } .modal-card { width: 100%; max-width: 26rem; padding: 1.5rem; border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.12); background: var(--card); } .modal-card.wide { max-width: 32rem; } .modal-card label { display: block; font-size: 0.75rem; color: var(--muted); margin-bottom: 0.35rem; } .modal-card input { width: 100%; padding: 0.65rem; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.12); background: #050508; color: var(--text); font-family: 'Geist Mono', monospace; font-size: 0.8rem; } .modal-actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; } .friday-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(120%); z-index: 10002; padding: 0.65rem 1.25rem; border-radius: 0.5rem; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.85rem; transition: transform 0.35s; } .friday-toast.visible { transform: translateX(-50%) translateY(0); } .friday-toast[data-type='error'] { border-color: rgba(239, 68, 68, 0.5); } .friday-toast[data-type='ok'] { border-color: rgba(16, 185, 129, 0.5); } .site-footer { margin-top: 3rem; padding: 2rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.35); max-width: 80rem; margin-left: auto; margin-right: auto; } .footer-policy { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: 'Geist Mono', monospace; font-size: 0.75rem; color: var(--muted); margin: 0 0 1rem; } .footer-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: ping 1.2s infinite; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; font-family: 'Geist Mono', monospace; font-size: 0.8rem; } .footer-links a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; } .footer-links a:hover { color: var(--cyan); } .sala-status-row { display: flex; gap: 1rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.06); align-items: center; } .sala-live { display: inline-flex; align-items: center; gap: 0.35rem; font-family: 'Geist Mono', monospace; font-size: 0.65rem; color: var(--emerald); position: relative; padding-left: 1rem; } @media (min-width: 768px) { .nav-links { display: flex; } .api-status { display: flex; } .menu-toggle { display: none; } } @media (max-width: 767px) { #mobile-menu:not(.open) { display: none; } #mobile-menu.open { display: block; padding: 0.5rem 1rem 1rem; } #mobile-menu a { display: block; padding: 0.65rem 0; color: var(--muted); text-decoration: none; } }