/* ============================================================================ DueloZone — Camada de componentes do Design System (DZ-307) ---------------------------------------------------------------------------- Carregada DEPOIS do CSS de pagina (final do ) para vencer a cascata sem precisar de !important em tudo. Depende de /public/css/dz-tokens.css. Nao remove comportamento: apenas normaliza aparencia dos componentes que ja existem (botao, card, input, badge, tabela, dock, header). ========================================================================== */ /* --------------------------------------------------------------------------- 1. Base tipografica ------------------------------------------------------------------------ */ html{ -webkit-text-size-adjust:100%; } body{ font-family:var(--dz-font); font-size:var(--dz-fs-body); font-weight:var(--dz-fw-regular); letter-spacing:var(--dz-ls-tight); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } h1,h2,h3,h4,h5,h6{ font-family:var(--dz-font); letter-spacing:var(--dz-ls-tight); font-weight:var(--dz-fw-bold); margin-top:0; } /* Escala tipografica utilitaria — hierarquia explicita. Valor financeiro pesa mais que label, label pesa mais que auxiliar. */ .dz-t-display{ font-size:var(--dz-fs-display); font-weight:var(--dz-fw-bold); line-height:1.15; letter-spacing:-.02em; color:var(--dz-text) } .dz-t-title{ font-size:var(--dz-fs-title); font-weight:var(--dz-fw-bold); line-height:1.2; color:var(--dz-text) } .dz-t-section{ font-size:var(--dz-fs-section); font-weight:var(--dz-fw-semi); line-height:1.3; color:var(--dz-text) } .dz-t-body{ font-size:var(--dz-fs-body); font-weight:var(--dz-fw-regular); line-height:1.5; color:var(--dz-text) } .dz-t-label{ font-size:var(--dz-fs-xs); font-weight:var(--dz-fw-semi); line-height:1.2; text-transform:uppercase; letter-spacing:var(--dz-ls-caps); color:var(--dz-text-2); } .dz-t-muted{ font-size:var(--dz-fs-sm); font-weight:var(--dz-fw-regular); color:var(--dz-text-muted) } /* Valor financeiro: tabular, sem quebra, com o maior peso visual da tela. */ .dz-money{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; font-weight:var(--dz-fw-bold); letter-spacing:-.02em; white-space:nowrap; color:var(--dz-text); } .dz-money--xl{ font-size:clamp(1.9rem, 4.4vw, 2.6rem); line-height:1.05 } .dz-money--lg{ font-size:1.375rem; line-height:1.1 } .dz-money--in, .dz-money.is-positive{ color:var(--dz-success) } .dz-money--out, .dz-money.is-negative{ color:var(--dz-danger-soft) } .dz-money--gold{ color:var(--dz-gold-soft) } /* --------------------------------------------------------------------------- 2. Botoes — hierarquia primario / secundario / destrutivo / ouro / ghost ------------------------------------------------------------------------ */ .dz-b{ --_bg:var(--dz-secondary); --_fg:var(--dz-on-secondary); --_bd:var(--dz-border-strong); display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:38px; padding:0 var(--dz-sp-4); border-radius:var(--dz-r-md); border:1px solid var(--_bd); background:var(--_bg); color:var(--_fg); font-family:var(--dz-font); font-size:var(--dz-fs-body); font-weight:var(--dz-fw-semi); line-height:1; letter-spacing:0; text-decoration:none; cursor:pointer; box-shadow:var(--dz-shadow-xs); transition:background var(--dz-dur) var(--dz-ease), border-color var(--dz-dur) var(--dz-ease), color var(--dz-dur) var(--dz-ease), transform .06s var(--dz-ease); } .dz-b:hover{ background:var(--dz-secondary-hover); border-color:var(--dz-border-strong) } .dz-b:active{ transform:translateY(1px) } .dz-b:focus-visible{ outline:none; box-shadow:var(--dz-ring) } .dz-b[disabled], .dz-b.is-disabled, .dz-b:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; pointer-events:none; } .dz-b--primary{ --_bg:var(--dz-primary); --_fg:var(--dz-on-primary); --_bd:var(--dz-primary) } .dz-b--primary:hover{ background:var(--dz-primary-hover); border-color:var(--dz-primary-hover) } .dz-b--gold{ --_bg:var(--dz-gold); --_fg:var(--dz-on-gold); --_bd:var(--dz-gold) } .dz-b--gold:hover{ background:var(--dz-gold-hover); border-color:var(--dz-gold-hover) } .dz-b--danger{ --_bg:transparent; --_fg:var(--dz-danger-soft); --_bd:rgba(224,75,84,.45) } .dz-b--danger:hover{ background:var(--dz-danger-wash); border-color:var(--dz-danger) } .dz-b--outline{ --_bg:transparent; --_fg:var(--dz-text); --_bd:var(--dz-border-strong) } .dz-b--outline:hover{ background:var(--dz-surface-3) } .dz-b--accent{ --_bg:transparent; --_fg:var(--dz-accent-soft); --_bd:rgba(47,166,184,.45) } .dz-b--accent:hover{ background:var(--dz-accent-wash); border-color:var(--dz-accent) } .dz-b--ghost{ --_bg:transparent; --_fg:var(--dz-text-2); --_bd:transparent; box-shadow:none } .dz-b--ghost:hover{ background:var(--dz-surface-3); color:var(--dz-text) } .dz-b--sm{ min-height:32px; padding:0 var(--dz-sp-3); font-size:var(--dz-fs-sm) } .dz-b--lg{ min-height:46px; padding:0 var(--dz-sp-6) } .dz-b--block{ width:100%; } /* --------------------------------------------------------------------------- 3. Cards / superficies ------------------------------------------------------------------------ */ .dz-surface{ background:var(--dz-surface); border:1px solid var(--dz-border); border-radius:var(--dz-r-xl); box-shadow:var(--dz-shadow-sm); } .dz-c{ background:var(--dz-surface); border:1px solid var(--dz-border); border-radius:var(--dz-r-xl); box-shadow:var(--dz-shadow-sm); padding:var(--dz-sp-5); } .dz-c--flat{ box-shadow:none } .dz-c--inset{ background:var(--dz-surface-2) } .dz-c--raised{ box-shadow:var(--dz-shadow-md) } .dz-c--interactive{ transition:border-color var(--dz-dur) var(--dz-ease), background var(--dz-dur) var(--dz-ease) } .dz-c--interactive:hover{ border-color:var(--dz-border-strong); background:var(--dz-surface-2) } .dz-c__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--dz-sp-3); margin-bottom:var(--dz-sp-4) } .dz-c__title{ font-size:var(--dz-fs-section); font-weight:var(--dz-fw-semi); margin:0; color:var(--dz-text) } /* --------------------------------------------------------------------------- 4. Inputs ------------------------------------------------------------------------ */ .dz-f{ width:100%; min-height:40px; padding:0 var(--dz-sp-3); background:var(--dz-surface-2); border:1px solid var(--dz-border); border-radius:var(--dz-r-md); color:var(--dz-text); font-family:var(--dz-font); font-size:var(--dz-fs-body); font-weight:var(--dz-fw-regular); outline:none; transition:border-color var(--dz-dur) var(--dz-ease), box-shadow var(--dz-dur) var(--dz-ease); } .dz-f::placeholder{ color:var(--dz-text-muted); font-weight:var(--dz-fw-regular) } .dz-f:focus{ border-color:var(--dz-primary); box-shadow:var(--dz-ring) } .dz-f[disabled]{ opacity:.5; cursor:not-allowed } .dz-f--invalid{ border-color:var(--dz-danger) } textarea.dz-f{ min-height:96px; padding:var(--dz-sp-3) } /* --------------------------------------------------------------------------- 5. Badges / pills semanticos ------------------------------------------------------------------------ */ .dz-badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .5rem; border-radius:var(--dz-r-sm); border:1px solid var(--dz-border); background:var(--dz-surface-2); color:var(--dz-text-2); font-size:var(--dz-fs-xs); font-weight:var(--dz-fw-semi); letter-spacing:var(--dz-ls-caps); text-transform:uppercase; line-height:1.4; } .dz-badge--success{ color:var(--dz-success-soft); border-color:rgba(47,191,113,.32); background:var(--dz-success-wash) } .dz-badge--danger { color:var(--dz-danger-soft); border-color:rgba(224,75,84,.32); background:var(--dz-danger-wash) } .dz-badge--warning{ color:var(--dz-warning-soft); border-color:rgba(221,163,43,.32); background:var(--dz-warning-wash) } .dz-badge--gold { color:var(--dz-gold-soft); border-color:rgba(216,163,43,.32); background:var(--dz-gold-wash) } .dz-badge--accent { color:var(--dz-accent-soft); border-color:rgba(47,166,184,.32); background:var(--dz-accent-wash) } /* --------------------------------------------------------------------------- 6. Normalizacao do legado Reduz "cartoon" nos componentes que ja existem, sem tocar no HTML/JS. ------------------------------------------------------------------------ */ /* 6.1 — nenhum glow colorido de marca sobra na interface. Filtros e sombras neon eram o principal responsavel pelo ar de jogo casual. */ #stars{ filter:none !important; opacity:.5 } /* 6.2 — botoes legados do header/modais */ .dz-btn{ border-radius:var(--dz-r-md); font-weight:var(--dz-fw-semi); font-size:var(--dz-fs-body); transition:background var(--dz-dur) var(--dz-ease), border-color var(--dz-dur) var(--dz-ease), color var(--dz-dur) var(--dz-ease); } .dz-btn:active{ transform:translateY(1px) } .dz-btn[disabled],.dz-btn:disabled{ opacity:.45; pointer-events:none } .dz-btn-ghost{ border:1px solid var(--dz-border-strong); color:var(--dz-text); background:transparent } .dz-btn-ghost:hover{ background:var(--dz-surface-3) } .dz-btn-cta{ background:var(--dz-gold); color:var(--dz-on-gold); border:1px solid var(--dz-gold); box-shadow:var(--dz-shadow-xs); } .dz-btn-cta:hover{ background:var(--dz-gold-hover); border-color:var(--dz-gold-hover) } .dz-btn-primary{ background:var(--dz-primary); color:var(--dz-on-primary); border:1px solid var(--dz-primary); border-radius:var(--dz-r-md); } .dz-btn-primary:hover{ background:var(--dz-primary-hover) } /* CTA global (Depositar no header) — acao financeira primaria = ouro chapado */ .dz-cta{ background:var(--dz-gold) !important; color:var(--dz-on-gold) !important; border:1px solid var(--dz-gold) !important; border-radius:var(--dz-r-md) !important; font-weight:var(--dz-fw-semi) !important; box-shadow:var(--dz-shadow-xs) !important; } .dz-cta:hover{ background:var(--dz-gold-hover) !important; border-color:var(--dz-gold-hover) !important } .dz-ghost{ border:1px solid var(--dz-border-strong); color:var(--dz-text-2); border-radius:var(--dz-r-md); font-weight:var(--dz-fw-semi); background:transparent; } .dz-ghost:hover{ background:var(--dz-surface-3); color:var(--dz-text) } /* 6.3 — inputs legados */ .dz-inp, .dz-inp-lg{ background:var(--dz-surface-2); border:1px solid var(--dz-border); border-radius:var(--dz-r-md); color:var(--dz-text); font-weight:var(--dz-fw-regular); } .dz-inp:focus, .dz-inp-lg:focus{ border-color:var(--dz-primary); box-shadow:var(--dz-ring) } /* 6.4 — cards/tiles legados: borda fina, sombra leve, raio moderado */ .dz-card, .dz-tile, .dz-pixCard, .dz-sb-glass{ background:var(--dz-surface); border:1px solid var(--dz-border); border-radius:var(--dz-r-xl); box-shadow:var(--dz-shadow-md); } /* 6.5 — icones: uma so linguagem visual. Boxicons regular (bx-*) em peso unico; sem drop-shadow colorido. */ .bx, [class^="bx-"], [class*=" bx-"]{ vertical-align:middle; filter:none; text-shadow:none; font-weight:400; } /* 6.6 — barras de rolagem sobrias */ ::-webkit-scrollbar-track{ background:var(--dz-surface-inset) } ::-webkit-scrollbar-thumb{ background:var(--dz-border-strong); border-radius:var(--dz-r-pill) } ::-webkit-scrollbar-thumb:hover{ background:#334157 } /* 6.7 — selecao de texto */ ::selection{ background:rgba(53,101,227,.30); color:var(--dz-text) } /* 6.8 — remove os "3D shadows" solidos (box-shadow:0 3px 0 cor) herdados do visual anterior de botao de jogo casual. */ .dz-btn-cta, .dz-qbtn, .filter-tab, .wallet-page{ text-shadow:none } /* 6.9 — classes utilitarias Tailwind com cor literal (arbitrary values). O bundle Tailwind e pre-compilado e nao pode ser regerado sem build, entao as quatro classes de cor legadas usadas no HTML sao remapeadas aqui. */ .bg-\[\#0b1426\]{ background-color:var(--dz-surface) } .bg-\[\#0e1a2e\]{ background-color:var(--dz-surface-2) } .border-\[\#1a2a42\]{ border-color:var(--dz-border) } .border-\[\#1a2a2e\]{ border-color:var(--dz-border) } /* 6.10 — foco acessivel padrao em qualquer elemento interativo */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:none; box-shadow:var(--dz-ring); border-radius:var(--dz-r-sm); } /* --------------------------------------------------------------------------- 7. Responsividade do sistema Os tokens de tipografia encolhem em telas menores para manter a MESMA hierarquia (titulo > secao > valor > label) em desktop, tablet e mobile. ------------------------------------------------------------------------ */ @media (max-width:1024px){ :root{ --dz-fs-section:1rem } } @media (max-width:767px){ :root{ --dz-fs-body:.875rem; --dz-fs-section:.9375rem; --dz-fs-sm:.78125rem; } .dz-c{ padding:var(--dz-sp-4) } .dz-b{ min-height:40px } } @media (max-width:400px){ .dz-b{ padding:0 var(--dz-sp-3) } } /* Respeita usuarios que pedem menos animacao. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }