/* ============================================================ CYBERBOT DESIGN SYSTEM v1.0 Fundação visual reutilizável do app. Fonte da verdade de cores, tipografia, espaçamento, raios e sombras. Regras de uso: - Toda página que usar este CSS deve prefixar suas classes de componente com `ds-` (evita colisão com CSS antigo das views). - NUNCA hardcodar cor/espaçamento/raio direto — sempre var(--token). - Este arquivo é standalone: não depende de index.css/style.css. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap'); /* ------------------------------------------------------------ TOKENS (:root) — única fonte de verdade de design ------------------------------------------------------------ */ :root{ /* cor de marca (ação/foco — nunca usar como estado semântico) */ --brand:#a3e635; --brand-dark:#65a30d; --brand-ink:#eafff6; /* cores semânticas (resultado/estado — nunca usar como marca) */ --win:#4ade80; --loss:#f87171; --warn:#fbbf24; --warn-dark:#f59e0b; --info:#60a5fa; --gold:#ffd86b; /* fundo (grid quadriculado + glow) */ --bg-grid-line: rgba(255,255,255,0.05); /* Fundo synthwave ESCURO OPACO (roxo/azul) — as telas internas montam o fundo com estas vars (grid + glow no topo + gradiente bg1→bg3). Precisam ser OPACAS senão a tela fica branca. */ --bg-glow: rgba(139,92,246,0.30); /* glow roxo no topo-centro */ --bg-1:#0c0a20; /* topo: roxo bem escuro */ --bg-2:#0a0818; --bg-3:#07060f; /* base: quase preto azulado */ /* superfícies (cards/painéis) */ --surface: rgba(13,20,35,0.6); --surface-solid:#0d1423; --surface-border: rgba(255,255,255,0.08); --surface-border-brand: rgba(163, 230, 53,0.16); --surface-2: rgba(255,255,255,0.03); /* texto */ --text-1:#eef2f7; --text-2:#9aa7b9; --text-3:#5f6c80; /* tipografia */ --font-display:'Orbitron','Segoe UI',system-ui,sans-serif; --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; /* espaçamento — escala 4/8/12/16/24/32 */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; /* raios */ --r-sm:10px; --r-md:14px; --r-lg:18px; --r-full:999px; /* sombras */ --shadow-card:0 8px 24px rgba(0,0,0,0.35); --shadow-brand:0 8px 20px rgba(163, 230, 53,0.25); --shadow-loss:0 8px 20px rgba(248,113,113,0.22); /* borda/transição padrão */ --border-w:1px; --transition:160ms ease; } /* ===== FUNDO SYNTHWAVE GLOBAL (rosa/roxo/azul desfocado) — atrás de TODAS as telas ===== Aplicado DIRETO no (o ::before não pegava em alguns contextos). A var --bg-synthwave é reusada nos overrides de das telas (ex: index.ejs) pra garantir consistência. */ :root{ --bg-synthwave: radial-gradient(72% 60% at 6% 84%, rgba(236,72,153,0.30), transparent 55%), radial-gradient(72% 66% at 97% 14%, rgba(139,92,246,0.32), transparent 55%), radial-gradient(48% 50% at 94% 84%, rgba(59,130,246,0.22), transparent 55%), radial-gradient(65% 60% at 50% 44%, rgba(8,6,18,0.72), transparent 72%), linear-gradient(160deg,#0a0818,#07060f 55%,#0b0820); } html{ background: var(--bg-synthwave); background-attachment: fixed; background-color:#07060f; } body{ background: transparent; } /* ------------------------------------------------------------ 0. RESET MÍNIMO + FUNDO DE PÁGINA `.ds-page` vai no (ou wrapper raiz) da tela. `.ds-container` centraliza o conteúdo (max ~440-560px). ------------------------------------------------------------ */ .ds-page{ min-height:100%; background: linear-gradient(var(--bg-grid-line) 1px, transparent 1px) 0 0/42px 42px, linear-gradient(90deg, var(--bg-grid-line) 1px, transparent 1px) 0 0/42px 42px, radial-gradient(120% 80% at 50% 0%, var(--bg-glow), transparent 58%), linear-gradient(180deg,var(--bg-1),var(--bg-2),var(--bg-3)); background-attachment: fixed; font-family: var(--font-body); color: var(--text-1); -webkit-font-smoothing:antialiased; } .ds-container{ max-width:440px; width:100%; margin:0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-6); display:flex; flex-direction:column; gap: var(--sp-6); box-sizing:border-box; } @media (min-width:560px){ .ds-container{ max-width:560px; } } /* util interno usado pelos componentes — não faz parte da API pública, mas fica documentado: aplica box-sizing a tudo dentro de .ds-page */ .ds-page *{ box-sizing:border-box; } /* ------------------------------------------------------------ 1. HEADER DE PÁGINA .ds-page-header > .ds-kicker + .ds-title + .ds-subtitle ------------------------------------------------------------ */ .ds-page-header{ display:flex; flex-direction:column; gap: var(--sp-2); } .ds-kicker{ font-family: var(--font-display); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--brand); } .ds-title{ font-family: var(--font-display); font-size:28px; font-weight:800; letter-spacing:.01em; line-height:1.15; background: linear-gradient(180deg, #ffffff, #cfe9dd 70%); -webkit-background-clip:text; background-clip:text; color:transparent; } .ds-subtitle{ font-size:14px; color: var(--text-2); line-height:1.5; max-width:34ch; } /* rótulo de seção opcional (divide blocos dentro de uma tela) */ .ds-section-label{ font-family: var(--font-display); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--text-3); margin-bottom: var(--sp-3); display:flex; align-items:center; gap: var(--sp-2); } .ds-section-label::after{ content:""; flex:1; height:1px; background: var(--surface-border); } /* ------------------------------------------------------------ 2. CARD BASE + HERO CARD .ds-card (base, reusado por vários componentes) .ds-card--brand (borda verde de destaque) .ds-card-title (título dentro de um card genérico) ------------------------------------------------------------ */ .ds-card{ background: var(--surface); border: var(--border-w) solid var(--surface-border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: var(--sp-5); backdrop-filter: blur(6px); } .ds-card--brand{ border-color: var(--surface-border-brand); position:relative; overflow:hidden; } .ds-card--brand::before{ content:""; position:absolute; inset:0; background: radial-gradient(160% 100% at 100% 0%, rgba(163, 230, 53,0.14), transparent 55%); pointer-events:none; } .ds-card-title{ font-family: var(--font-display); font-size:18px; font-weight:700; color: var(--text-1); } /* Hero card = .ds-card.ds-card--brand com ícone + título + descrição */ .ds-hero{ display:flex; flex-direction:column; gap: var(--sp-4); } .ds-hero-icon{ width:52px;height:52px; border-radius: var(--r-md); background: linear-gradient(160deg, var(--brand), var(--brand-dark)); display:flex;align-items:center;justify-content:center; font-size:24px; box-shadow: var(--shadow-brand); } .ds-hero-desc{ font-size:13.5px; color: var(--text-2); line-height:1.55; } /* ------------------------------------------------------------ 3. KPI TILES .ds-kpi-row > .ds-kpi(--win|--loss|--warn) > .ds-kpi-value + .ds-kpi-label ------------------------------------------------------------ */ .ds-kpi-row{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } .ds-kpi{ background: var(--surface); border: var(--border-w) solid var(--surface-border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-2); text-align:center; display:flex; flex-direction:column; gap: var(--sp-1); } .ds-kpi-value{ font-family: var(--font-display); font-size:22px; font-weight:800; } .ds-kpi-label{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--text-2); } .ds-kpi--win .ds-kpi-value{ color: var(--win); } .ds-kpi--loss .ds-kpi-value{ color: var(--loss); } .ds-kpi--warn .ds-kpi-value{ color: var(--warn); } /* ------------------------------------------------------------ 4. BOTÕES .ds-btn-row > .ds-btn.ds-btn--primary|--ghost|--danger ------------------------------------------------------------ */ .ds-btn{ font-family: var(--font-body); font-size:14px; font-weight:700; letter-spacing:.01em; border-radius: var(--r-md); padding: 13px var(--sp-5); border: var(--border-w) solid transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap: var(--sp-2); transition: transform var(--transition), filter var(--transition), background var(--transition); width:100%; } .ds-btn:active{ transform: scale(.98); } .ds-btn--primary{ background: linear-gradient(160deg, var(--brand), var(--brand-dark)); color:#04241a; box-shadow: var(--shadow-brand); } .ds-btn--primary:hover{ filter:brightness(1.06); } .ds-btn--ghost{ background: transparent; color: var(--text-1); border-color: var(--surface-border); } .ds-btn--ghost:hover{ background: var(--surface-2); border-color: rgba(255,255,255,0.16); } .ds-btn--danger{ background: rgba(248,113,113,0.12); color: var(--loss); border-color: rgba(248,113,113,0.35); box-shadow: var(--shadow-loss); } .ds-btn--danger:hover{ background: rgba(248,113,113,0.18); } .ds-btn-row{ display:flex; flex-direction:column; gap: var(--sp-3); } /* ------------------------------------------------------------ 5. TABS / PILLS .ds-tabs > .ds-tab(.is-active) ------------------------------------------------------------ */ .ds-tabs{ display:flex; gap: var(--sp-2); background: var(--surface-2); border: var(--border-w) solid var(--surface-border); padding: var(--sp-1); border-radius: var(--r-full); } .ds-tab{ flex:1; text-align:center; font-size:12.5px; font-weight:600; color: var(--text-2); padding: var(--sp-2) var(--sp-2); border-radius: var(--r-full); cursor:pointer; transition: background var(--transition), color var(--transition); } .ds-tab.is-active{ background: linear-gradient(160deg, var(--brand), var(--brand-dark)); color:#04241a; } /* ------------------------------------------------------------ 6. CARD DE LISTA / RANKING .ds-card.ds-list-card > .ds-list-item > .ds-avatar + .ds-list-body + .ds-list-value ------------------------------------------------------------ */ .ds-list-card{ display:flex; flex-direction:column; } .ds-list-item{ display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: var(--border-w) solid var(--surface-border); } .ds-list-item:last-child{ border-bottom:none; padding-bottom:0; } .ds-list-item:first-child{ padding-top:0; } .ds-avatar{ width:40px;height:40px; border-radius: var(--r-full); background: var(--surface-2); border: var(--border-w) solid var(--surface-border); display:flex;align-items:center;justify-content:center; font-size:17px; flex-shrink:0; } .ds-list-body{ flex:1; min-width:0; } .ds-list-name{ font-size:14px; font-weight:600; color: var(--text-1); } .ds-list-sub{ font-size:12px; color: var(--text-2); margin-top:2px; } .ds-list-value{ font-family: var(--font-display); font-size:15px; font-weight:700; color: var(--brand); flex-shrink:0; } /* ------------------------------------------------------------ 7. BADGES / PILLS DE STATUS .ds-badge-row > .ds-badge(--live|--ready|--soon) ------------------------------------------------------------ */ .ds-badge-row{ display:flex; gap: var(--sp-2); flex-wrap:wrap; } .ds-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); border: var(--border-w) solid transparent; } .ds-badge--live{ background: rgba(74,222,128,0.12); color: var(--win); border-color: rgba(74,222,128,0.35); } .ds-badge--live .ds-badge-dot{ width:6px;height:6px;border-radius:50%; background: var(--win); box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: ds-pulse 1.6s infinite; } @keyframes ds-pulse{ 0%{ box-shadow:0 0 0 0 rgba(74,222,128,.55); } 70%{ box-shadow:0 0 0 7px rgba(74,222,128,0); } 100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); } } .ds-badge--ready{ background: rgba(96,165,250,0.12); color: var(--info); border-color: rgba(96,165,250,0.35); } .ds-badge--soon{ background: rgba(251,191,36,0.12); color: var(--warn); border-color: rgba(251,191,36,0.35); } /* ------------------------------------------------------------ 8. METER / BARRA DE PROGRESSO .ds-card > .ds-meter-head(.ds-meter-title + .ds-meter-value) + .ds-meter-track > .ds-meter-fill ------------------------------------------------------------ */ .ds-meter-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom: var(--sp-3); } .ds-meter-title{ font-size:13px; color: var(--text-2); font-weight:600; } .ds-meter-value{ font-family: var(--font-display); font-size:26px; font-weight:800; color: var(--brand); } .ds-meter-track{ width:100%; height:10px; border-radius: var(--r-full); background: var(--surface-2); border: var(--border-w) solid var(--surface-border); overflow:hidden; } .ds-meter-fill{ height:100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--brand-dark), var(--brand)); box-shadow: var(--shadow-brand); } /* ------------------------------------------------------------ 9. INPUT + LABEL .ds-field > label + input ------------------------------------------------------------ */ .ds-field{ display:flex; flex-direction:column; gap: var(--sp-2); } .ds-field label{ font-size:12.5px; font-weight:600; color: var(--text-2); } .ds-field input{ font-family: var(--font-body); font-size:14px; color: var(--text-1); background: var(--surface-2); border: var(--border-w) solid var(--surface-border); border-radius: var(--r-md); padding: 13px var(--sp-4); outline:none; width:100%; transition: border-color var(--transition), background var(--transition); } .ds-field input::placeholder{ color: var(--text-3); } .ds-field input:focus{ border-color: var(--brand); background: rgba(163, 230, 53,0.05); } /* ------------------------------------------------------------ 10. ACESSOS RÁPIDOS .ds-quick-grid > .ds-quick-card > .ds-quick-icon(.tg|.ig) + .ds-quick-name + .ds-quick-sub ------------------------------------------------------------ */ .ds-quick-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .ds-quick-card{ background: var(--surface); border: var(--border-w) solid var(--surface-border); border-radius: var(--r-lg); padding: var(--sp-4); display:flex; flex-direction:column; gap: var(--sp-2); align-items:flex-start; transition: border-color var(--transition), transform var(--transition); } .ds-quick-card:active{ transform: scale(.98); } .ds-quick-icon{ width:36px;height:36px; border-radius: var(--r-sm); display:flex;align-items:center;justify-content:center; font-size:17px; } .ds-quick-icon.tg{ background: rgba(96,165,250,0.14); color: var(--info); } .ds-quick-icon.ig{ background: rgba(255,216,107,0.14); color: var(--gold); } .ds-quick-name{ font-size:13.5px; font-weight:700; color: var(--text-1); } .ds-quick-sub{ font-size:11.5px; color: var(--text-2); } /* ------------------------------------------------------------ 11. RODAPÉ .ds-footer > .ds-footer-brand (span verde) + .ds-footer-note ------------------------------------------------------------ */ .ds-footer{ text-align:center; padding-top: var(--sp-4); border-top: var(--border-w) solid var(--surface-border); display:flex; flex-direction:column; gap: var(--sp-1); } .ds-footer-brand{ font-family: var(--font-display); font-size:13px; font-weight:700; color: var(--text-1); letter-spacing:.04em; } .ds-footer-brand span{ color: var(--brand); } .ds-footer-note{ font-size:11px; color: var(--text-3); } /* ------------------------------------------------------------ UTIL .ds-stack — empilha blocos verticalmente com gap padrão ------------------------------------------------------------ */ .ds-stack{ display:flex; flex-direction:column; gap: var(--sp-4); }