/* ============================================================ ChutaAê — Shared design tokens + components Importado por todas as páginas (login, register, deposit, etc.) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); *{margin:0;padding:0;box-sizing:border-box} :root{ --ca-bg-base:#09090B; --ca-bg-raised:#18181B; --ca-bg-elevated:#1F1F23; --ca-bg-overlay:#27272A; --ca-bg-subtle:#303033; --ca-border:#27272A; --ca-border-s:#1F1F23; --ca-border-h:#3F3F46; --ca-border-focus:#22c55e; --ca-text:#FAFAFA; --ca-text-2:#A1A1AA; --ca-text-3:#71717A; --ca-text-4:#52525B; /* DOURADO — mapeado nos mesmos nomes "green" pra não quebrar referências existentes */ --ca-gold:#22c55e; --ca-gold-h:#16a34a; --ca-gold-light:#4ade80; --ca-gold-muted:rgba(124,58,237,0.15); --ca-green:#22c55e; --ca-green-h:#16a34a; --ca-green-muted:rgba(34,197,94,0.15); --ca-red:#EF4444; --ca-red-h:#DC2626; --ca-red-muted:rgba(239,68,68,0.15); --ca-amber:#F59E0B; --ca-amber-muted:rgba(245,158,11,0.12); --ca-blue:#3B82F6; --ca-purple:#8B5CF6; } /* ── LIGHT MODE (toggle via data-theme="light" no ) ── */ html[data-theme="light"]{ --ca-bg-base:#FAFAFA; --ca-bg-raised:#FFFFFF; --ca-bg-elevated:#F4F4F5; --ca-bg-overlay:#E4E4E7; --ca-bg-subtle:#D4D4D8; --ca-border:#E4E4E7; --ca-border-s:#F4F4F5; --ca-border-h:#D4D4D8; --ca-border-focus:#22c55e; --ca-text:#09090B; --ca-text-2:#3F3F46; --ca-text-3:#71717A; --ca-text-4:#A1A1AA; } html[data-theme="light"] body{background:var(--ca-bg-base);color:var(--ca-text)} html,body{ background:var(--ca-bg-base); color:var(--ca-text); font-family:'Poppins',-apple-system,sans-serif; min-height:100vh; -webkit-font-smoothing:antialiased; } /* ── NAVBAR compartilhada ── */ .navbar{position:sticky;top:0;z-index:100;background:var(--ca-bg-base);height:68px;display:flex;align-items:center;padding:0 24px;gap:16px} .nav-inner{max-width:1280px;width:100%;margin:0 auto;display:flex;align-items:center;gap:16px} .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ca-text);flex-shrink:0;font-weight:700;font-size:20px} .nav-logo-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 12px rgba(124,58,237,.45))} .nav-logo-icon svg{width:38px;height:38px} .nav-logo-text{background:linear-gradient(90deg,#fff 0%,#fff 30%,var(--ca-gold-light) 70%,var(--ca-gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.3px;font-weight:800} .nav-search{flex:1;max-width:540px;position:relative} .nav-search input{width:100%;background:var(--ca-bg-raised);border:1px solid var(--ca-border);border-radius:14px;padding:11px 16px 11px 42px;color:var(--ca-text);font-size:14px;font-family:inherit;outline:none;transition:border-color .2s,background .2s} .nav-search input:focus{border-color:var(--ca-border-focus);background:var(--ca-bg-elevated)} .nav-search input::placeholder{color:var(--ca-text-3)} .nav-search .si{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ca-text-3)} .nav-como{display:flex;align-items:center;gap:6px;color:var(--ca-green);font-size:13px;font-weight:500;padding:6px 10px;text-decoration:none;border-radius:8px;transition:background .15s} .nav-como:hover{background:var(--ca-green-muted)} .nav-como-dot{width:6px;height:6px;border-radius:50%;background:var(--ca-green);animation:ca-pulse 1.5s infinite} @keyframes ca-pulse{0%,100%{opacity:1}50%{opacity:.4}} .nav-right{margin-left:auto;display:flex;align-items:center;gap:10px} /* ── BOTÕES ── */ .ca-btn{border:none;border-radius:10px;padding:9px 22px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,filter .15s} .ca-btn-primary{background:linear-gradient(135deg,var(--ca-gold-h) 0%,var(--ca-gold) 100%);color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(124,58,237,.35)} .ca-btn-primary:hover{filter:brightness(1.08);background:linear-gradient(135deg,var(--ca-gold-h) 0%,var(--ca-gold) 100%)} .ca-btn-primary:disabled{background:var(--ca-bg-overlay);color:var(--ca-text-3);cursor:not-allowed} .ca-btn-secondary{background:var(--ca-bg-raised);color:var(--ca-text);border:1px solid var(--ca-border)} .ca-btn-secondary:hover{background:var(--ca-bg-elevated);border-color:var(--ca-border-h)} .ca-btn-ghost{background:transparent;color:var(--ca-text-2);border:1px solid var(--ca-border)} .ca-btn-ghost:hover{color:var(--ca-text);border-color:var(--ca-border-h)} .ca-btn-block{width:100%;display:block} /* navbar versions */ .btn-entrar{background:var(--ca-bg-raised);color:var(--ca-text);border:1px solid var(--ca-border);border-radius:10px;padding:9px 20px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s} .btn-entrar:hover{background:var(--ca-bg-elevated);border-color:var(--ca-border-h)} .btn-cadastrar{position:relative;background:linear-gradient(135deg,var(--ca-gold-h) 0%,var(--ca-gold) 100%);color:#fff;border:none;border-radius:10px;padding:9px 22px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:filter .15s;box-shadow:0 2px 8px rgba(124,58,237,.35)} .btn-cadastrar:hover{filter:brightness(1.08)} /* Badge PIX (teal) no canto superior do Depositar — bounce + pulse */ .pix-badge{position:absolute;top:-8px;right:-8px;min-width:28px;height:18px;padding:0 6px;border-radius:9px;background:#32BCAD;border:2px solid var(--ca-bg-base);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-family:inherit;font-size:9.5px;font-weight:900;letter-spacing:.6px;line-height:1;box-shadow:0 0 0 0 rgba(50,188,173,.7);animation:pixPulseBounce 2s cubic-bezier(.4,0,.6,1) infinite;pointer-events:none;z-index:2} @keyframes pixPulseBounce{ 0%,100%{transform:translateY(0) rotate(0);box-shadow:0 0 0 0 rgba(50,188,173,.6)} 15%{transform:translateY(-3px) rotate(-8deg)} 30%{transform:translateY(0) rotate(0)} 45%{transform:translateY(-2px) rotate(6deg)} 60%{transform:translateY(0) rotate(0);box-shadow:0 0 0 8px rgba(50,188,173,0)} } /* ── INPUTS ── */ .ca-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .ca-field label{font-size:13px;font-weight:500;color:var(--ca-text-2)} .ca-input{background:var(--ca-bg-raised);border:1px solid var(--ca-border);border-radius:10px;padding:12px 14px;color:var(--ca-text);font-size:14px;font-family:inherit;outline:none;transition:border-color .15s,background .15s;width:100%} .ca-input:focus{border-color:var(--ca-border-focus);background:var(--ca-bg-elevated)} .ca-input::placeholder{color:var(--ca-text-3)} /* ── CARD ── */ .ca-card{background:var(--ca-bg-raised);border:1px solid var(--ca-border);border-radius:14px;padding:24px} .ca-card-title{font-size:18px;font-weight:700;color:var(--ca-text);margin-bottom:4px} .ca-card-sub{font-size:13px;color:var(--ca-text-3);margin-bottom:20px} /* ── NAVBAR DROPDOWN (avatar/help) ── */ .avatar-wrap{position:relative} .avatar{position:relative;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--ca-gold-h) 0%,var(--ca-gold) 100%);color:#fff;border:none;font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;box-shadow:0 2px 8px rgba(124,58,237,.35)} /* Badge de tier no canto superior direito do avatar (compartilhado entre paginas) */ .avatar-tier-badge{position:absolute;top:-7px;right:-14px;font-size:8px;font-weight:800;padding:2px 5px;border-radius:4px;letter-spacing:.4px;line-height:1;border:2px solid var(--ca-bg-base);text-transform:uppercase;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.4);z-index:1} .avatar-tier-badge.bronze {background:linear-gradient(135deg,#CD7F32,#A0522D);color:#fff} .avatar-tier-badge.silver {background:linear-gradient(135deg,#E8E8E8,#A8A8A8);color:#000} .avatar-tier-badge.gold {background:linear-gradient(135deg,#FFD700,#D4A017);color:#000} .avatar-tier-badge.diamond{background:linear-gradient(135deg,#B9F2FF,#5DADE2);color:#000} .avatar-menu{display:none;position:absolute;top:46px;right:0;background:var(--ca-bg-raised);border:1px solid var(--ca-border);border-radius:12px;min-width:240px;padding:8px;z-index:300;box-shadow:0 12px 32px rgba(0,0,0,.55)} .avatar-menu.open{display:flex;flex-direction:column;gap:2px} .avatar-menu .user-info{padding:10px 12px;border-bottom:1px solid var(--ca-border);margin-bottom:6px} .avatar-menu .user-name{font-size:13px;font-weight:600;color:var(--ca-text)} .avatar-menu .user-email{font-size:11px;color:var(--ca-text-3);margin-top:2px} .menu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:13px;color:var(--ca-text);text-decoration:none;border-radius:8px;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:inherit;font-weight:500} .menu-item:hover{background:var(--ca-bg-elevated)} .menu-item svg{color:var(--ca-text-3);flex-shrink:0} /* navbar balance (logged in) */ .nav-balance{display:flex;flex-direction:column;align-items:flex-end;margin-right:6px;line-height:1.1} .nav-balance-label{font-size:10px;color:var(--ca-text-3);font-weight:500;text-transform:uppercase;letter-spacing:.4px} .nav-balance-val{font-size:14px;font-weight:700;color:var(--ca-text);font-variant-numeric:tabular-nums} /* ── TOAST ── */ .ca-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 22px;border-radius:10px;font-size:14px;font-weight:600;z-index:400;box-shadow:0 8px 24px rgba(0,0,0,.55);display:none} .ca-toast.ok{background:var(--ca-green-muted);color:var(--ca-green);border:1px solid var(--ca-green)} .ca-toast.err{background:var(--ca-red-muted);color:#fca5a5;border:1px solid var(--ca-red)} /* ── FOOTER ── */ footer.ca-footer{background:var(--ca-bg-base);border-top:1px solid var(--ca-border)} .ft-inner{max-width:1280px;margin:0 auto;padding:32px 24px 16px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--ca-text-3)} .ft-links{display:flex;gap:16px;flex-wrap:wrap} .ft-links a{color:var(--ca-text-3);text-decoration:none} .ft-links a:hover{color:var(--ca-text)} .ft-support{color:var(--ca-green)} /* ═══════════════════════════════════════════════════════════ ANIMATIONS & MICROINTERACTIONS ═══════════════════════════════════════════════════════════ */ /* Skeleton shimmer */ .skel{position:relative;overflow:hidden;background:var(--ca-bg-elevated);border-radius:8px} .skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(124,58,237,.1) 40%,rgba(124,58,237,.16) 50%,rgba(124,58,237,.1) 60%,transparent 100%);animation:skelShimmer 1.6s infinite} @keyframes skelShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} /* Fade in up (staggered) */ .anim-fadein-up{animation:fadeinUp .55s cubic-bezier(.2,.7,.3,1) both} @keyframes fadeinUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} .anim-delay-1{animation-delay:.06s} .anim-delay-2{animation-delay:.12s} .anim-delay-3{animation-delay:.18s} .anim-delay-4{animation-delay:.24s} .anim-delay-5{animation-delay:.30s} .anim-delay-6{animation-delay:.36s} .anim-delay-7{animation-delay:.42s} .anim-delay-8{animation-delay:.48s} /* Pop animation (badge, value updates) */ .anim-pop{animation:pop .4s ease} @keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}} /* Toast slide (override the basic one) */ .ca-toast{transform:translate(-50%,120%);transition:transform .35s cubic-bezier(.2,.7,.3,1),opacity .25s;opacity:0} .ca-toast.show{display:block;transform:translate(-50%,0);opacity:1} /* Ripple click effect */ .ripple{position:relative;overflow:hidden;isolation:isolate} .ripple::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,currentColor 0%,transparent 70%);opacity:0;transform:scale(0);transition:transform .6s,opacity .6s;pointer-events:none} .ripple:active::after{opacity:.25;transform:scale(2);transition:0s} /* Number counter transition */ .num-anim{font-variant-numeric:tabular-nums;transition:color .3s} /* Coin drop (bet confirmation) */ .coin-drop{position:fixed;top:-60px;left:50%;width:54px;height:54px;z-index:9999;pointer-events:none;animation:coinDrop 1.4s cubic-bezier(.3,.8,.5,1) forwards} @keyframes coinDrop{ 0%{top:-60px;transform:translateX(-50%) rotate(0deg) scale(.6);opacity:0} 15%{opacity:1} 60%{top:45%;transform:translateX(-50%) rotate(720deg) scale(1.2)} 75%{top:55%;transform:translateX(-50%) rotate(900deg) scale(1);opacity:1} 100%{top:58%;transform:translateX(-50%) rotate(1080deg) scale(.2);opacity:0} } /* Empty state illustration */ .empty-ill{display:flex;flex-direction:column;align-items:center;gap:14px;padding:56px 24px;text-align:center} .empty-ill-icon{width:72px;height:72px;border-radius:50%;background:var(--ca-bg-elevated);display:flex;align-items:center;justify-content:center;color:var(--ca-text-3)} .empty-ill h4{font-size:16px;font-weight:700;color:var(--ca-text);margin-bottom:4px} .empty-ill p{font-size:13px;color:var(--ca-text-3);max-width:280px;line-height:1.5;margin-bottom:6px} /* Reduced motion preference */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }