/* ======================= */ /* VelhaPix — Purple & Black */ /* ======================= */ :root{ --bg:#0B0B0D; --surface:#121214; --card:#16161A; --border:#242429; /* Paleta roxa (mantém os nomes) */ --gold:#A855F7; /* Roxo principal (purple-500) */ --gold-hover:#9333EA; /* Hover (purple-600) */ --gold-bright:#C084FC; /* Brilho/realce (violet-400) */ --gold-grad: linear-gradient(135deg,#E9D5FF 0%,#C084FC 35%,#A855F7 65%,#7E22CE 100%); --text:#Fff; --text-2:#B3B3B3; --muted:#8A8A8A; --success:#25D366; --danger:#FF4D4D; --info:#4DA3FF; --glow: 0 0 18px rgba(168,85,247,.25); } /* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; } /* Header Styles */ .header{ background: rgba(10,10,10,.95); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(168,85,247,.18); position: fixed; top:0; left:0; right:0; z-index:1000; padding: 1rem 0; } .header-container{ max-width:1400px; margin:0 auto; padding:0 2rem; display:flex; align-items:center; justify-content:space-between; } .logo{ display:flex; align-items:center; gap:.5rem; font-size:1.5rem; font-weight:800; color: var(--gold); text-decoration:none; text-shadow: 0 0 12px rgba(168,85,247,.25); } /* suporte pra imagem de logo */ .logo-image{ height:60px; width:auto; max-width:400px; object-fit:contain; display:block; } .logo-icon{ width:32px; height:32px; border-radius:8px; background: var(--gold-grad); display:flex; align-items:center; justify-content:center; color:#0B0B0D; font-weight:bold; font-size:1.2rem; box-shadow: var(--glow); border:1px solid rgba(168,85,247,.35); } .nav-menu{ display:flex; align-items:center; gap:2rem; list-style:none; } .nav-menu a{ color:#e5e7eb; text-decoration:none; font-weight:500; transition:all .3s ease; position:relative; } .nav-menu a:hover{ color: var(--gold); } .nav-menu a::after{ content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background: var(--gold); transition: width .3s ease; } .nav-menu a:hover::after{ width:100%; } .header-actions{ display:flex; align-items:center; gap:1rem; } .btn-login{ color:#e5e7eb; text-decoration:none; font-weight:500; transition:color .3s ease; } .btn-login:hover{ color: var(--gold); } .btn-register{ background: var(--gold-grad); color:#0B0B0D; text-decoration:none; padding:.75rem 1.5rem; border-radius:12px; font-weight:600; transition: all .3s ease; box-shadow: var(--glow); display:flex; align-items:center; gap:.5rem; border:1px solid rgba(168,85,247,.35); } .btn-register:hover{ transform: translateY(-2px); box-shadow: 0 8px 30px rgba(168,85,247,.35); } /* Hero Section (banner/carrossel de topo) */ .hero-section{ margin-top:80px; padding:4rem 0; background: var(--bg); position:relative; overflow:hidden; } .hero-container{ max-width:1400px; margin:0 auto; padding:0 2rem; } .hero-banner{ border-radius:24px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; } /* granulado leve */ .hero-banner::before{ content:''; position:absolute; inset:0; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.08"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>'); opacity:.3; } .hero-content{ position:relative; z-index:2; } .hero-title{ font-size:4rem; font-weight:900; color:var(--text); text-shadow:2px 2px 4px rgba(0,0,0,.3); margin-bottom:.5rem; line-height:1.1; } .hero-subtitle{ font-size:3.5rem; font-weight:900; color: var(--gold); text-shadow: 0 0 24px rgba(168,85,247,.25); margin-bottom:2rem; line-height:1.1; } .hero-cta{ background: rgba(255,255,255,.06); backdrop-filter: blur(10px); border:1px solid rgba(168,85,247,.28); color: var(--text); padding:1rem 2rem; border-radius:16px; font-weight:700; font-size:1.1rem; text-decoration:none; display:inline-block; transition: all .3s ease; box-shadow: 0 8px 24px rgba(0,0,0,.2); } .hero-cta:hover{ transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,.3); background: rgba(192,132,252,.12); border-color: rgba(168,85,247,.45); } .hero-visuals{ position:relative; z-index:2; display:flex; align-items:center; gap:2rem; } /* ilustração com matiz roxa */ .money-stack{ width:200px; height:120px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120"><rect x="10" y="20" width="180" height="80" rx="8" fill="%23252525" stroke="%23A855F7" stroke-width="2"/><text x="100" y="70" text-anchor="middle" fill="%23A855F7" font-family="Arial" font-size="24" font-weight="bold">100</text><text x="100" y="45" text-anchor="middle" fill="%23B3B3B3" font-family="Arial" font-size="10">VELHAPIX</text></svg>'); background-size:contain; background-repeat:no-repeat; border-radius:8px; position:relative; transform: rotate(-5deg); box-shadow: var(--glow); } .money-stack::after{ content:''; position:absolute; top:-10px; left:-10px; width:100%; height:100%; background: inherit; opacity:.6; z-index:-1; } /* Steps Section */ .steps-section{ padding:4rem 2rem; background: radial-gradient(circle at 20% 50%, rgba(168,85,247,.06) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(192,132,252,.05) 0%, transparent 50%); } .steps-container{ max-width:1200px; margin:0 auto; } .steps-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; position:relative; } /* Connecting Lines */ .steps-grid::before{ content:''; position:absolute; top:50px; left:12.5%; right:12.5%; height:2px; background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 33%, rgba(168,85,247,.28) 33%, rgba(168,85,247,.28) 66%, rgba(168,85,247,.28) 66%, rgba(168,85,247,.28) 100%); z-index:1; } .step-item{ text-align:center; position:relative; z-index:2; transition: all .3s ease; } .step-item:hover{ transform: translateY(-8px); } .step-icon{ width:100px; height:100px; margin:0 auto 1.5rem; background: linear-gradient(145deg, rgba(20,20,20,.8) 0%, rgba(10,10,10,.9) 100%); border:2px solid rgba(168,85,247,.35); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.5rem; color:#9aa0a6; transition: all .4s ease; backdrop-filter: blur(20px); position:relative; overflow:hidden; box-shadow: var(--glow); } .step-icon::before{ content:''; position:absolute; inset:0; background: radial-gradient(circle at center, rgba(192,132,252,.16) 0%, transparent 70%); opacity:0; transition: opacity .3s ease; } .step-icon:hover::before, .step-icon.active::before{ opacity:1; } .step-icon.active{ border-color: var(--gold); color: var(--gold); box-shadow: 0 0 30px rgba(168,85,247,.28), 0 0 60px rgba(168,85,247,.12); background: linear-gradient(145deg, rgba(192,132,252,.08) 0%, rgba(168,85,247,.06) 100%); } .step-icon:hover{ border-color: rgba(168,85,247,.6); color: var(--gold); transform: scale(1.05); } .step-title{ font-size:1.25rem; font-weight:700; color: var(--text); margin-bottom:.75rem; transition: color .3s ease; } .step-title.active{ color: var(--gold); } .step-item:hover .step-title{ color: var(--gold); } .step-description{ font-size:.95rem; color: var(--text-2); line-height:1.5; transition: color .3s ease; } .step-item:hover .step-description{ color:#e5e7eb; } /* Games Section */ .games-section{ padding:4rem 2rem; background: radial-gradient(circle at 20% 80%, rgba(168,85,247,.05) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(192,132,252,.06) 0%, transparent 50%); } .games-container{ max-width:1200px; margin:0 auto; } .games-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(400px,1fr)); gap:2rem; } .game-category{ background: linear-gradient(145deg, rgba(20,20,20,.82) 0%, rgba(10,10,10,.92) 100%); border:1px solid rgba(168,85,247,.28); border-radius:24px; padding:3rem 2rem; text-align:center; position:relative; overflow:hidden; transition: all .4s ease; backdrop-filter: blur(20px); } .game-category::before{ content:''; position:absolute; inset:0; background: radial-gradient(circle at 20% 20%, rgba(192,132,252,.14) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(168,85,247,.1) 0%, transparent 50%); opacity:0; transition: opacity .4s ease; pointer-events:none; } .game-category:hover::before{ opacity:1; } .game-category:hover{ transform: translateY(-8px); border-color: rgba(168,85,247,.45); box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 0 40px rgba(168,85,247,.12); } .game-icon{ width:120px; height:120px; margin:0 auto 2rem; background: linear-gradient(135deg, rgba(192,132,252,.16) 0%, rgba(168,85,247,.1) 100%); border:3px solid rgba(168,85,247,.35); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:3rem; color: var(--gold); transition: all .4s ease; position:relative; z-index:2; } .game-category:hover .game-icon{ border-color: var(--gold); background: linear-gradient(135deg, rgba(192,132,252,.22) 0%, rgba(168,85,247,.16) 100%); box-shadow: 0 0 40px rgba(168,85,247,.28), 0 0 80px rgba(168,85,247,.12); transform: scale(1.05); } .game-title{ font-size:2rem; font-weight:800; color: var(--text); margin-bottom:1rem; letter-spacing:1px; position:relative; z-index:2; transition: color .3s ease; } .game-category:hover .game-title{ color: var(--gold); } .game-description{ font-size:1rem; color: var(--text-2); margin-bottom:2rem; line-height:1.6; position:relative; z-index:2; transition: color .3s ease; } .game-category:hover .game-description{ color:#e5e7eb; } .game-btn{ background: var(--gold-grad); color:#0B0B0D; border:none; padding:1rem 2rem; border-radius:50px; font-size:1rem; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:.75rem; transition: all .3s ease; position:relative; z-index:2; box-shadow: var(--glow); text-transform:uppercase; letter-spacing:.5px; border:1px solid rgba(168,85,247,.35); } .game-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 30px rgba(168,85,247,.35); filter: brightness(1.03); } .game-btn i{ font-size:1.1rem; transition: transform .3s ease; } .game-btn:hover i{ transform: translateX(4px); } /* ==== Ajustes do carrossel de vencedores (ganhos.php) ==== */ .ttt-wins__track{ animation:none !important; transform: translate3d(0,0,0); will-change: transform; margin:0; padding:.9rem; list-style:none; display:flex; gap:.9rem; width:max-content; user-select:none; cursor:grab; } .ttt-wins__viewport.is-dragging .ttt-wins__track{ cursor:grabbing; } /* Mobile Responsive (sections) */ @media (max-width:768px){ .nav-menu{ display:none; } .hero-banner{ flex-direction:column; text-align:center; gap:2rem; } .hero-title{ font-size:2.5rem; } .hero-subtitle{ font-size:2rem; } /* Banner/hero (imagens de fundo): manter ~80% sem corte */ .carousel-container{ width:80%; max-width:80%; margin:0 auto !important; height:auto; } .hero-slide{ position:relative; background-size:contain !important; background-position:center !important; background-repeat:no-repeat !important; min-height:200px; } .logo-image{ height:44px; max-width:260px; } .steps-section,.games-section{ padding:3rem 1rem; } .steps-grid{ grid-template-columns:repeat(2,1fr); gap:1.5rem; } .steps-grid::before{ display:none; } .step-icon{ width:80px; height:80px; font-size:2rem; margin-bottom:1rem; } .step-title{ font-size:1.1rem; margin-bottom:.5rem; } .step-description{ font-size:.9rem; } .games-grid{ grid-template-columns:1fr; gap:1.5rem; } .game-category{ padding:2rem 1.5rem; border-radius:20px; } .game-icon{ width:100px; height:100px; font-size:2.5rem; margin-bottom:1.5rem; } .game-title{ font-size:1.6rem; margin-bottom:.75rem; } .game-description{ font-size:.9rem; margin-bottom:1.5rem; } .game-btn{ padding:.875rem 1.75rem; font-size:.9rem; } } @media (max-width:480px){ .steps-grid{ grid-template-columns:1fr; } .hero-title{ font-size:2rem; } .hero-subtitle{ font-size:1.5rem; } /* Banner ainda mais compacto */ .hero-slide{ min-height:180px; } .logo-image{ height:40px; max-width:220px; } } /* Animation on scroll */ .step-item, .game-category{ opacity:0; transform: translateY(30px); transition: all .6s ease; } .step-item.animate-fade-in-up, .game-category.animate-fade-in-up{ opacity:1; transform: translateY(0); } .step-item:nth-child(1){ transition-delay:.1s; } .step-item:nth-child(2){ transition-delay:.2s; } .step-item:nth-child(3){ transition-delay:.3s; } .step-item:nth-child(4){ transition-delay:.4s; } .game-category:nth-child(1){ transition-delay:.1s; } .game-category:nth-child(2){ transition-delay:.3s; } /* Prize Carousel (se usar este carrossel separado) */ .prize-carousel{ padding:2rem 0; background: var(--bg); overflow:hidden; } .prize-track{ display:flex; gap:1.5rem; animation: scroll 30s linear infinite; padding:1rem 0; } .prize-item{ min-width:200px; background: linear-gradient(135deg, rgba(192,132,252,.12), rgba(168,85,247,.07)); border:1px solid rgba(168,85,247,.28); border-radius:16px; padding:1.5rem; text-align:center; position:relative; white-space:nowrap; box-shadow: var(--glow); } .prize-icon{ width:60px; height:60px; margin:0 auto 1rem; background: var(--gold-grad); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#0B0B0D; font-size:1.5rem; border:1px solid rgba(168,85,247,.35); } .prize-name{ font-size:.9rem; font-weight:600; color: var(--text); margin-bottom:.5rem; } .prize-value{ font-size:1.1rem; font-weight:800; color: var(--gold); } @keyframes scroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } /* Footer */ .footer{ background:#0f0f0f; border-top:1px solid rgba(168,85,247,.18); padding:3rem 0 2rem; } .footer-container{ max-width:1400px; margin:0 auto; padding:0 2rem; } .footer-content{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:3rem; margin-bottom:2rem; } .footer-brand{ display:flex; align-items:center; gap:.5rem; font-size:1.5rem; font-weight:800; color: var(--gold); margin-bottom:1rem; text-shadow: 0 0 12px rgba(168,85,247,.25); } .footer-description{ color: var(--text-2); line-height:1.6; margin-bottom:1rem; } .footer-section h3{ color: var(--text); font-weight:700; margin-bottom:1rem; } .footer-links{ list-style:none; } .footer-links li{ margin-bottom:.5rem; } .footer-links a{ color: var(--text-2); text-decoration:none; transition: color .3s ease; } .footer-links a:hover{ color: var(--gold); } .footer-bottom{ border-top:1px solid rgba(168,85,247,.18); padding-top:2rem; text-align:center; color:#6b7280; font-size:.9rem; } /* Scrollbar (Purple) */ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background: transparent !important; } ::-webkit-scrollbar-thumb{ background: var(--gold); border-radius:6px; } ::-webkit-scrollbar-thumb:hover{ background: var(--gold-hover); }