/* ===================================================================== home-shark.css — layout da HOME no estilo da referência (vermelho/preto) Tudo escopado em body.sk para não alterar as outras páginas. A classe .sk é adicionada ao pela própria pages/home.php. ===================================================================== */ body.sk{ --sk-red:#e11d2a; --sk-red-2:#ff3b45; --sk-gold:#f5c542; --sk-bg:#0a0a0d; /* superfícies translúcidas: o degradê do fundo continua visível por trás dos cartões, em vez de virar um bloco cinza chapado */ --sk-surface:rgba(255,255,255,.045); --sk-surface-2:rgba(255,255,255,.075); --sk-line:rgba(255,255,255,.09); --sk-dim:rgba(255,255,255,.55); /* Fundo em degradê, não preto chapado: brilho quente no topo, escurece no miolo e volta a aquecer perto do rodapé. O background-attachment:fixed faz o brilho ficar parado enquanto a página rola, que é o efeito da referência. */ background: radial-gradient(125% 45% at 50% 0%, rgba(225,29,42,.22), transparent 62%), radial-gradient(100% 40% at 50% 100%, rgba(150,25,20,.18), transparent 65%), linear-gradient(180deg, #17090b 0%, #0f0b0e 22%, #0a0a0d 55%, #0c090c 100%); background-attachment:fixed; background-repeat:no-repeat; padding-top:52px; /* espaço da faixa de afiliado fixa */ padding-bottom:84px; } /* --------------------------------------------------------------- 1. FAIXA DE AFILIADO (topo, fixa) --------------------------------------------------------------- */ .sk-topbar{ position:fixed;top:0;left:0;right:0;z-index:90; height:52px;display:flex;align-items:center;justify-content:center;gap:10px; padding:0 10px;color:#fff;text-decoration:none; background: radial-gradient(120% 180% at 50% 50%, #ff2d1f 0%, #b31217 42%, #2a0708 78%, #140305 100%); box-shadow:0 2px 14px rgba(225,29,42,.35); } .sk-topbar-ico{ width:34px;height:34px;flex:none;border-radius:9px; display:grid;place-items:center;font-size:17px; border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.2); } .sk-topbar-txt{ font-size:.86rem;font-weight:700;line-height:1.15; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .sk-topbar-txt b{color:var(--sk-gold)} .sk-topbar-cta{ flex:none;background:#fff;color:#c1121f;font-weight:800;font-size:.75rem; letter-spacing:.04em;padding:9px 16px;border-radius:999px;white-space:nowrap; } .sk-topbar:active{filter:brightness(.95)} /* --------------------------------------------------------------- 2. CABEÇALHO (reaproveita o .hdr existente, só reveste) --------------------------------------------------------------- */ body.sk .hdr{ top:52px; /* fica logo abaixo da faixa */ /* translúcido + blur: o degradê quente do topo aparece por trás */ background:linear-gradient(180deg, rgba(30,10,12,.92), rgba(12,10,13,.92)); backdrop-filter:blur(14px); border-bottom:1px solid var(--sk-line); } body.sk .hdr-in{padding:10px 12px;gap:8px} body.sk .hdr .drawer-open, body.sk .hdr .lang-wrap, body.sk .hdr-nav{display:none} /* menu e idioma vivem no rodapé */ body.sk .brand img{height:34px} body.sk .brand-txt{color:#fff;font-size:1.15rem} body.sk .hdr-act{gap:9px} /* Botão REGISTRE-SE com selo de bônus */ body.sk .hdr-act .btn-primary{ position:relative;overflow:visible; background:linear-gradient(180deg,#ff3b45,#d61220); color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.02em; padding:12px 20px;border-radius:999px; box-shadow:0 0 18px rgba(225,29,42,.55), inset 0 1px 0 rgba(255,255,255,.25); } body.sk .hdr-act .btn-primary::after{ content:"🎁 100%"; position:absolute;top:-11px;right:-6px; background:linear-gradient(180deg,#ffe27a,#f0b429); color:#4a2c00;font-size:.6rem;font-weight:900; padding:3px 7px;border-radius:999px; border:1px solid rgba(0,0,0,.25); box-shadow:0 2px 6px rgba(0,0,0,.4); } /* Botão ENTRAR contornado */ body.sk .hdr-act .btn-ghost{ background:transparent;color:#fff;font-weight:800;font-size:.8rem; padding:12px 20px;border-radius:999px; border:1.5px solid var(--sk-red); } /* Pílula de saldo (usuário logado) */ body.sk .bal-pill{border-color:rgba(225,29,42,.5)} body.sk .bal-add{background:var(--sk-red);color:#fff} /* --------------------------------------------------------------- 3. CARROSSEL COM SETAS --------------------------------------------------------------- */ /* ALTURA DO CARROSSEL VEM DA PRÓPRIA ARTE. Histórico dos dois bugs já corrigidos aqui: 1. aspect-ratio no .slide (flex item) fazia o slide sair estreito; 2. aspect-ratio no .carousel + object-fit:cover cortava topo e base da arte quando o banner não era exatamente 3/1. Solução: o carrossel não tem altura fixa. A imagem do banner entra no fluxo normal (position:static) com height:auto, então a altura do slide é a altura real da arte — aparece inteira, sem corte e sem faixa preta, qualquer que seja a proporção que você subir. */ body.sk .carousel{ margin:12px;border-radius:14px;overflow:hidden; border:1px solid rgba(225,29,42,.35); box-shadow:0 0 24px rgba(225,29,42,.18); background:#07070a; } body.sk .carousel-track{width:100%;align-items:stretch} body.sk .slide, body.sk .slide-clean{ flex:0 0 100%;width:100%; min-height:0;height:auto;aspect-ratio:auto; /* anula o style.css */ background:#07070a; } /* Banner só-imagem: a arte define a altura. */ body.sk .slide-clean{display:block;position:relative} body.sk .slide-clean .slide-img{ position:static; width:100%;height:auto; object-fit:contain; opacity:1;display:block; } /* Banner COM texto: aí a arte fica de fundo e o texto por cima. */ body.sk .slide:not(.slide-clean){min-height:170px;position:relative} body.sk .slide:not(.slide-clean) .slide-img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:.45; } body.sk .slide-body{padding:18px 16px} body.sk .slide-body h1{font-size:1.2rem} body.sk .slide-kicker{ color:#ff6b73;background:rgba(225,29,42,.14);border-color:rgba(225,29,42,.4); } /* Bolinhas na cor do tema */ body.sk .dots{bottom:9px} body.sk .dot.on{background:var(--sk-red)} .sk-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:5; width:40px;height:40px;border-radius:50%; display:grid;place-items:center; background:rgba(18,18,22,.62);color:#fff; border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(4px);font-size:17px;line-height:1; } .sk-arrow:active{transform:translateY(-50%) scale(.92)} .sk-arrow.prev{left:6px} .sk-arrow.next{right:6px} /* --------------------------------------------------------------- 4. BUSCA — "ENCONTRE SEU JOGO" --------------------------------------------------------------- */ .sk-find{padding:18px 14px 0} .sk-find h2{ font-size:.9rem;font-weight:800;letter-spacing:.14em; color:var(--sk-gold);text-transform:uppercase;margin-bottom:12px; } .sk-search{ display:flex;align-items:center;gap:12px; background:var(--sk-surface);border:1px solid var(--sk-line); border-radius:14px;padding:14px 16px; } .sk-search .ico{width:20px;height:20px;color:var(--sk-red);flex:none} .sk-search input{ flex:1;min-width:0;background:none;border:0;outline:none; color:#fff;font-size:.95rem; } .sk-search input::placeholder{color:rgba(255,255,255,.35)} .sk-find-hint{margin:10px 2px 0;font-size:.84rem;color:var(--sk-dim)} /* Atalhos de categoria em cartões */ .sk-cats{ display:grid;grid-template-columns:repeat(4,1fr);gap:9px; margin-top:14px; } .sk-cat{ display:flex;flex-direction:column;align-items:center;gap:9px; padding:14px 4px 12px;border-radius:14px; background:var(--sk-surface);border:1px solid var(--sk-line); text-align:center; } .sk-cat:active{transform:scale(.97)} .sk-cat-ico{ width:46px;height:46px;border-radius:13px;display:grid;place-items:center; background:rgba(225,29,42,.12);border:1px solid rgba(225,29,42,.45); color:var(--sk-red-2); } .sk-cat-ico .ico{width:22px;height:22px} .sk-cat span{font-size:.72rem;font-weight:700;line-height:1.15} /* --------------------------------------------------------------- 5. TOP GANHOS --------------------------------------------------------------- */ .sk-wins{padding:22px 0 0} .sk-wins-tabs{ display:flex;align-items:center;gap:14px; padding:0 14px 12px;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none; } .sk-wins-tabs::-webkit-scrollbar{display:none} .sk-wins-tabs .lbl{ display:flex;align-items:center;gap:6px;flex:none; font-size:.85rem;font-weight:700;color:var(--sk-dim); } .sk-wins-tab{ flex:none;font-size:.88rem;font-weight:700;color:var(--sk-dim); padding:4px 2px;border-bottom:2px solid transparent;white-space:nowrap; } .sk-wins-tab.on{color:#fff;border-bottom-color:var(--sk-red)} .sk-wins-strip{position:relative;padding-left:14px} .sk-wins-trophy{ position:absolute;left:14px;top:0;z-index:4; width:96px;height:100%;border-radius:12px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; background:linear-gradient(180deg,#241a05,#120d02); border:1px solid rgba(245,197,66,.55); font-size:.63rem;font-weight:800;letter-spacing:.06em;color:var(--sk-gold); text-align:center;line-height:1.2; } .sk-wins-trophy .emo{font-size:24px} .sk-wins-track{ display:flex;gap:10px;overflow-x:auto;padding:0 14px 4px 106px; scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity; } .sk-wins-track::-webkit-scrollbar{display:none} .sk-win{ flex:0 0 76%;max-width:290px;scroll-snap-align:start; display:flex;align-items:center;gap:11px;padding:10px 12px; border-radius:12px;background:var(--sk-surface); border:1px solid rgba(245,197,66,.35); } .sk-win img{width:52px;height:52px;border-radius:9px;object-fit:cover;flex:none} .sk-win-info{min-width:0;flex:1} .sk-win-info strong{ display:block;font-size:.86rem;font-weight:700; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .sk-win-info em{ display:block;font-style:normal;font-size:.75rem;color:var(--sk-dim); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .sk-win-info b{display:block;font-size:1rem;color:var(--sk-gold);margin-top:2px} /* --------------------------------------------------------------- 6. VITRINES (linhas de jogos) --------------------------------------------------------------- */ .sk-row{padding:22px 0 0} .sk-row-hd{ display:flex;align-items:center;gap:10px; padding:0 14px 12px; } .sk-row-hd h2{ display:flex;align-items:center;gap:8px; font-size:1.12rem;font-weight:800;line-height:1.1; padding-left:10px;border-left:4px solid var(--sk-red); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .sk-nav{display:flex;gap:6px;flex:none} .sk-nav button{ width:38px;height:34px;border-radius:999px; display:grid;place-items:center;font-size:15px;line-height:1; background:var(--sk-surface);border:1px solid var(--sk-line);color:#fff; } .sk-nav button:active{background:var(--sk-surface-2)} .sk-all{ margin-left:auto;flex:none; padding:10px 18px;border-radius:999px; font-size:.75rem;font-weight:800;letter-spacing:.05em; background:var(--sk-surface);border:1px solid var(--sk-line);color:#fff; } /* Faixa destacada (ex.: +Jogados da semana) */ .sk-row.boxed{ margin:22px 12px 0;padding:16px 0 14px;border-radius:16px; background:linear-gradient(180deg,rgba(225,29,42,.09),rgba(225,29,42,.02)); border:1px solid rgba(225,29,42,.35); } .sk-row.boxed .sk-row-hd{padding:0 14px 12px;border-bottom:1px solid var(--sk-line);margin-bottom:12px} /* Trilho e cards */ .sk-track{ display:flex;gap:11px;overflow-x:auto;padding:0 14px 4px; scroll-snap-type:x proximity;scroll-behavior:smooth; scrollbar-width:none;-ms-overflow-style:none; } .sk-track::-webkit-scrollbar{display:none} .sk-card{ position:relative;flex:0 0 47%;max-width:210px;scroll-snap-align:start; border-radius:13px;overflow:hidden;aspect-ratio:1/1.02; background:var(--sk-surface-2);border:1px solid var(--sk-line); display:block; } .sk-card img{width:100%;height:100%;object-fit:cover} .sk-card::after{ /* gradiente para o nome ficar legível */ content:"";position:absolute;left:0;right:0;bottom:0;height:52%; background:linear-gradient(to top,rgba(0,0,0,.85),transparent); } .sk-card-badge{ position:absolute;top:9px;left:9px;z-index:2; background:var(--sk-red);color:#fff; font-size:.6rem;font-weight:800;letter-spacing:.06em; padding:5px 10px;border-radius:999px; } .sk-card-name{ position:absolute;left:11px;right:52px;bottom:11px;z-index:2; font-size:.82rem;font-weight:700;line-height:1.2; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .sk-card-play{ position:absolute;right:10px;bottom:10px;z-index:2; width:38px;height:38px;border-radius:50%; display:grid;place-items:center; background:var(--sk-red);color:#fff; box-shadow:0 3px 12px rgba(225,29,42,.5); } .sk-card-play .ico{width:17px;height:17px} .sk-card:active{transform:scale(.98)} /* --------------------------------------------------------------- 7. RODAPÉ --------------------------------------------------------------- */ /* O rodapé tem um brilho quente próprio no topo (igual à referência), que se dissolve no fundo da página. */ body.sk .ftr{ border-top:1px solid var(--sk-line);margin-top:26px; background:linear-gradient(180deg, rgba(120,28,20,.42) 0%, rgba(60,16,14,.22) 30%, transparent 65%); } .sk-ftr{padding:26px 16px 20px} .sk-ftr-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px} .sk-ftr-brand img{height:38px} .sk-ftr-brand span{font-size:1.3rem;font-weight:800} .sk-ftr-tag{font-size:.95rem;color:var(--sk-dim);line-height:1.5;margin-bottom:26px} .sk-ftr-lbl{ font-size:.78rem;font-weight:800;letter-spacing:.14em; color:var(--sk-gold);text-transform:uppercase;margin:24px 0 12px; } .sk-ftr-links{display:flex;flex-direction:column;gap:12px} .sk-ftr-links a{font-size:.95rem;color:var(--sk-dim)} .sk-ftr-links a:active{color:#fff} .sk-pix{margin:18px 0 4px;height:34px;width:auto;opacity:.9} .sk-ftr-sep{border:0;border-top:1px solid var(--sk-line);margin:22px 0} .sk-ftr-cards{display:flex;flex-direction:column;gap:12px} .sk-ftr-card{ padding:16px;border-radius:13px; background:var(--sk-surface);border:1px solid var(--sk-line); } .sk-ftr-card strong{display:block;font-size:.95rem;margin-bottom:6px} .sk-ftr-card span{font-size:.88rem;color:var(--sk-dim);line-height:1.45} .sk-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px} .sk-chip{ padding:13px 20px;border-radius:999px; font-size:.88rem;font-weight:700; background:var(--sk-surface);border:1px solid var(--sk-line); } .sk-about{font-size:.92rem;color:var(--sk-dim);line-height:1.62} .sk-about.clamped{ display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden; } .sk-more{ display:block;width:100%;text-align:center;margin-top:14px; font-size:.92rem;font-weight:700;color:#fff; } .sk-made{text-align:center;font-size:.95rem;margin:18px 0 4px} .sk-seals{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px;opacity:.85} .sk-seals img{height:34px;width:auto} .sk-seal-18{ width:44px;height:44px;border-radius:50%;border:2px solid #fff; display:grid;place-items:center;font-weight:800;font-size:.85rem; } .sk-ftr-title{font-size:.95rem;font-weight:700;margin-top:6px} .sk-lang{ display:flex;align-items:center;justify-content:center;gap:10px; margin:22px auto 0;padding:14px 22px;border-radius:12px; background:var(--sk-surface);border:1px solid var(--sk-line); font-size:.95rem;font-weight:600;width:max-content; } /* Botão "De volta ao topo" */ .sk-top{ position:fixed;left:50%;transform:translateX(-50%); bottom:calc(78px + env(safe-area-inset-bottom));z-index:75; display:flex;align-items:center;gap:9px; padding:12px 22px;border-radius:999px; background:rgba(26,26,33,.94);color:#fff; border:1px solid rgba(255,255,255,.14); font-size:.9rem;font-weight:700;backdrop-filter:blur(8px); opacity:0;pointer-events:none;transition:opacity .25s; } .sk-top.on{opacity:1;pointer-events:auto} /* --------------------------------------------------------------- 8. BARRA INFERIOR com botão central de depósito --------------------------------------------------------------- */ body.sk .btm-nav{ background:linear-gradient(180deg, rgba(20,10,12,.96), rgba(9,9,12,.99)); backdrop-filter:blur(14px); border-top:1px solid var(--sk-line); /* Espaço em cima para a bolha se projetar, e alinhamento pela BASE: assim todos os rótulos ficam na mesma linha, com ou sem bolha. */ padding:10px 0 max(9px, env(safe-area-inset-bottom)); align-items:flex-end; overflow:visible; } body.sk .btm-item{ position:relative; justify-content:flex-end;gap:4px; padding-bottom:2px; font-size:.66rem;color:var(--sk-dim); } body.sk .btm-item .ico{width:22px;height:22px} body.sk .btm-item.on{color:#fff} /* Item central que vira o botão flutuante. ERA O BUG DA BARRA: a bolha estava com position:absolute e o rótulo ganhava margin-top:26px para "desviar" dela. Só que essa margem empurrava o texto para fora da barra e o "Depósito" sumia. Agora a bolha fica no fluxo normal e sobe por margem negativa — ela se projeta para cima e o rótulo continua dentro da barra. */ body.sk .btm-item.sk-fab{color:#fff;font-weight:700} body.sk .btm-item.sk-fab .sk-fab-circle{ position:static; margin:-32px 0 3px; width:60px;height:60px;border-radius:50%; display:grid;place-items:center; font-size:31px;line-height:1;font-weight:400; background:linear-gradient(180deg,#ff3b45,#d61220);color:#fff; border:4px solid #0b090c; box-shadow:0 0 22px rgba(225,29,42,.6); } body.sk .btm-item.sk-fab span{margin-top:0} /* ponto de "ao vivo" */ body.sk .btm-item .sk-live-dot{ position:absolute;top:-2px;right:calc(50% - 16px); width:7px;height:7px;border-radius:50%;background:var(--sk-red); } /* --------------------------------------------------------------- 9. Telas maiores — mantém a coluna do app centralizada --------------------------------------------------------------- */ @media(min-width:900px){ .sk-topbar{ left:50%;transform:translateX(-50%); width:var(--app,460px);border-radius:0 0 4px 4px; } .sk-card{flex:0 0 168px} .sk-win{flex:0 0 260px} } /* ===================================================================== 10. TEMA GLOBAL O header.php carrega este arquivo em TODAS as páginas e põe class="sk" no . As regras abaixo tiram o verde herdado do style.css e deixam o site inteiro no vermelho da referência. ===================================================================== */ /* Cores base: sobrepõem o :root que o header monta a partir do admin. Se você quiser voltar a mandar pela tela de Aparência do admin, é só apagar este bloco. */ body.sk{ --primary:var(--sk-red); --accent:var(--sk-gold); --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.075); --line:rgba(255,255,255,.09); } body.sk .btn-primary{ background:linear-gradient(180deg,#ff3b45,#d61220);color:#fff; box-shadow:0 4px 16px rgba(225,29,42,.35); } body.sk .btn-ghost{background:var(--sk-surface-2);border:1px solid var(--sk-line);color:#fff} body.sk .link-all:hover, body.sk .drawer-links .ico{color:var(--sk-red-2)} /* ===================================================================== 11. MENU LATERAL (drawer) ===================================================================== */ .sk-drawer{ background:linear-gradient(180deg,#141014,#0b0a0d 40%); width:min(88vw,380px); padding-bottom:100px;overflow-y:auto; } .sk-dr-hd{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:18px 16px 6px; } .sk-dr-brand{display:flex;align-items:center;gap:10px;min-width:0} .sk-dr-brand img{height:34px;width:auto} .sk-dr-brand span{font-size:1.05rem;font-weight:800;letter-spacing:-.01em} .sk-dr-x{ width:52px;height:52px;flex:none;border-radius:50%; display:grid;place-items:center; background:var(--sk-surface-2);border:1px solid var(--sk-line);color:#fff; } .sk-dr-x .ico{width:24px;height:24px} /* cartões coloridos */ .sk-dr-cards{display:flex;flex-direction:column;gap:11px;padding:14px 16px 4px} .sk-dr-card{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 18px;border-radius:13px;color:#fff; } .sk-dr-card:active{transform:scale(.985)} .sk-dr-card .txt{display:flex;flex-direction:column;min-width:0} .sk-dr-card em{font-style:normal;font-size:.85rem;opacity:.85;line-height:1.2} .sk-dr-card strong{font-size:1.08rem;font-weight:800;line-height:1.25} .sk-dr-card .emo{font-size:26px;flex:none} .sk-dr-card.verde {background:linear-gradient(100deg,#2fa36a,#3cbf7d)} .sk-dr-card.laranja{background:linear-gradient(100deg,#e8820f,#f59b1e)} .sk-dr-card.roxo {background:linear-gradient(100deg,#6d28d9,#7c3aed)} /* bloco do usuário / botões de entrar */ .sk-dr-user{ display:flex;align-items:center;gap:11px; margin:16px;padding:13px 14px;border-radius:13px; background:var(--sk-surface);border:1px solid var(--sk-line); } .sk-dr-user .ico{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--sk-surface-2);flex:none} .sk-dr-user div{flex:1;min-width:0} .sk-dr-user strong{display:block;font-size:.92rem} .sk-dr-user span{font-size:.8rem;color:var(--sk-gold);font-weight:700} .sk-dr-dep{ flex:none;padding:9px 15px;border-radius:999px; font-size:.78rem;font-weight:800;color:#fff; background:linear-gradient(180deg,#ff3b45,#d61220); } .sk-dr-auth{display:grid;gap:9px;padding:16px} /* rótulos e lista de links */ .sk-dr-lbl{ padding:22px 18px 10px; font-size:.74rem;font-weight:800;letter-spacing:.18em; text-transform:uppercase;color:rgba(255,255,255,.42); } .sk-dr-nav{display:flex;flex-direction:column;padding:0 10px} .sk-dr-nav a{ position:relative; display:flex;align-items:center;gap:16px; padding:15px 12px;border-radius:12px; font-size:1rem;font-weight:600;color:rgba(255,255,255,.72); } .sk-dr-nav a .ico{width:23px;height:23px;flex:none;color:rgba(255,255,255,.6)} .sk-dr-nav a:active, .sk-dr-nav a.on{background:var(--sk-surface-2);color:#fff} .sk-dr-nav a.on .ico{color:#fff} .sk-dr-nav a.dourado, .sk-dr-nav a.dourado .ico{color:var(--sk-gold)} /* pontinho vermelho de "ao vivo" / pendência */ .sk-dr-nav a.tem-dot::before{ content:"";position:absolute;left:26px;top:11px; width:8px;height:8px;border-radius:50%;background:var(--sk-red); } .sk-dr-fim{height:20px} /* ===================================================================== 12. LOGIN E REGISTRO ===================================================================== */ body.sk .auth-page, body.sk .auth-page-premium{background:transparent;padding:22px 14px 30px} body.sk .auth-card, body.sk .auth-card-premium{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid var(--sk-line); border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.5); } body.sk .auth-card h1, body.sk .auth-card-premium .auth-heading h1{color:#fff} body.sk .auth-kicker{color:var(--sk-red-2)} /* campos */ body.sk .auth-card input, body.sk .auth-input-wrap{ background:rgba(255,255,255,.04); border:1px solid var(--sk-line); border-radius:12px;color:#fff; } body.sk .auth-card input:focus{ outline:none;border-color:var(--sk-red); box-shadow:0 0 0 3px rgba(225,29,42,.16); } body.sk .auth-input-wrap:focus-within{ border-color:var(--sk-red); box-shadow:0 0 0 3px rgba(225,29,42,.16); } body.sk .auth-input-wrap:focus-within .ico{color:var(--sk-red-2)} /* botão principal com o brilho vermelho da referência */ body.sk .auth-card .btn-primary, body.sk .auth-card-premium .btn-primary{ background:linear-gradient(180deg,#ff3b45,#e01523); color:#fff;border-radius:12px;padding:16px; font-size:1rem;font-weight:800; box-shadow:0 0 26px rgba(225,29,42,.45); } body.sk .auth-card a{color:var(--sk-red-2)} /* abas Entrar / Registre-se do modal */ body.sk .tabs{ display:flex;gap:6px;padding:5px;margin-bottom:16px; background:rgba(255,255,255,.04); border:1px solid var(--sk-line);border-radius:13px; } body.sk .tab{ flex:1;padding:13px 8px;border-radius:10px; font-size:.95rem;font-weight:700;color:var(--sk-dim); background:transparent;border:0; } body.sk .tab.on{ background:linear-gradient(180deg,#ff3b45,#d61220);color:#fff; box-shadow:0 3px 14px rgba(225,29,42,.4); } body.sk .modal-box{ background:linear-gradient(180deg,#171214,#0d0b0e); border:1px solid var(--sk-line); } /* ===================================================================== 13. MODAL "ESPERE, VOCÊ AINDA NÃO TERMINOU" ===================================================================== */ .sk-exit{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:16px} .sk-exit[hidden]{display:none} .sk-exit-bg{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)} .sk-exit-box{ position:relative;width:100%;max-width:420px; max-height:92vh;overflow-y:auto; padding:26px 22px 24px;border-radius:20px;text-align:center; background:linear-gradient(180deg,#1c1416,#100c0f); border:1px solid rgba(225,29,42,.35); box-shadow:0 24px 70px rgba(0,0,0,.7); } .sk-exit-x{ position:absolute;top:16px;right:16px; width:52px;height:52px;border-radius:50%; display:grid;place-items:center; background:rgba(255,255,255,.07);border:1px solid var(--sk-line);color:#fff; } .sk-exit-x .ico{width:24px;height:24px} .sk-exit-ico{ width:96px;height:96px;margin:6px auto 20px;border-radius:22px; display:grid;place-items:center;font-size:44px; background:radial-gradient(circle at 50% 40%, rgba(245,197,66,.2), rgba(120,40,10,.25)); border:1px solid rgba(245,197,66,.55); box-shadow:0 0 28px rgba(245,158,11,.28); } .sk-exit-box h2{font-size:1.5rem;font-weight:800;line-height:1.22;margin-bottom:12px} .sk-exit-sub{font-size:1rem;color:var(--sk-dim);line-height:1.45;margin-bottom:22px} .sk-exit-list{display:flex;flex-direction:column;gap:11px;margin-bottom:22px} .sk-exit-item{ display:flex;align-items:center;gap:14px; padding:14px 16px;border-radius:13px;text-align:left; font-size:1rem;font-weight:700; background:rgba(255,255,255,.035);border:1px solid var(--sk-line); } .sk-exit-item .ic{ width:44px;height:44px;flex:none;border-radius:11px; display:grid;place-items:center;font-size:21px; background:rgba(245,197,66,.12);border:1px solid rgba(245,197,66,.3); } .sk-exit-nota{font-size:1rem;font-weight:700;color:var(--sk-gold);margin-bottom:20px} .sk-exit-cta{ width:100%;padding:18px;border-radius:13px; font-size:1rem;font-weight:800;letter-spacing:.03em;color:#fff; background:linear-gradient(180deg,#ff3b45,#e01523); box-shadow:0 0 30px rgba(225,29,42,.5); } .sk-exit-cta:active{transform:scale(.985)} /* ===================================================================== 14. CAMPOS DE CPF E TELEFONE COM DDI ===================================================================== */ body.sk .fld-ddi{ display:flex;align-items:stretch;gap:8px; } body.sk .fld-ddi .ddi{ flex:none;display:flex;align-items:center;gap:6px; padding:0 14px;border-radius:12px; font-size:.92rem;font-weight:700;white-space:nowrap; background:rgba(255,255,255,.04); border:1px solid var(--sk-line); } body.sk .fld-ddi input{flex:1;min-width:0;margin:0} /* linha de termos, igual à referência */ body.sk .modal-termos{ font-size:.88rem;line-height:1.5;text-align:center; color:var(--sk-dim);margin:6px 0 16px; } body.sk .modal-termos a{color:var(--sk-red-2);font-weight:700} /* rótulo "(opcional)" discreto */ body.sk .opt{font-style:normal;font-weight:500;color:var(--sk-dim)} /* ===================================================================== 15. CAMPOS NO ESTILO DA REFERÊNCIA Rótulo DENTRO da caixa, no topo à esquerda; a caixa inteira acende em vermelho quando o campo está em foco. Vale para o modal (.fld) e para as páginas /login e /registro (.auth-card label). ===================================================================== */ body.sk .fld, body.sk .auth-card label, body.sk .auth-form-premium label{ display:block;position:relative; margin-bottom:14px;padding:11px 16px 9px; border-radius:13px; background:rgba(255,255,255,.035); border:1.5px solid var(--sk-line); transition:border-color .16s, box-shadow .16s, background .16s; } body.sk .fld:focus-within, body.sk .auth-card label:focus-within, body.sk .auth-form-premium label:focus-within{ border-color:var(--sk-red); background:rgba(225,29,42,.05); box-shadow:0 0 0 3px rgba(225,29,42,.14); } /* o rótulo vira legenda interna */ body.sk .fld>span, body.sk .auth-card label{font-size:.8rem;font-weight:600;color:var(--sk-dim)} body.sk .fld>span{margin-bottom:2px} /* campo sem moldura própria: a moldura agora é a do rótulo */ body.sk .fld input, body.sk .auth-card label input, body.sk .auth-form-premium label input{ width:100%;margin:2px 0 0;padding:5px 0 2px; background:none;border:0;border-radius:0; font-size:1.02rem;font-weight:600;color:#fff; } body.sk .fld input:focus, body.sk .auth-card label input:focus, body.sk .auth-form-premium label input:focus{ outline:none;border:0;box-shadow:none; } body.sk .fld input::placeholder, body.sk .auth-card input::placeholder{color:rgba(255,255,255,.28);font-weight:500} /* asterisco vermelho de obrigatório */ body.sk .fld>span .req, body.sk .auth-card label .req{color:var(--sk-red-2);font-weight:800} /* linha com dois campos (Senha / Confirmar) */ body.sk .fld-row{display:grid;grid-template-columns:1fr 1fr;gap:11px} /* DDI do telefone dentro da mesma caixa */ body.sk .fld-ddi{display:flex;align-items:center;gap:10px;margin:0} body.sk .fld-ddi .ddi{ flex:none;padding:0;border:0;background:none; font-size:1rem;font-weight:700;color:#fff; } body.sk .fld-ddi input{flex:1;min-width:0} /* olho de mostrar/ocultar senha */ body.sk .fld-olho{ position:absolute;right:12px;top:50%;transform:translateY(-50%); width:38px;height:38px;border-radius:50%; display:grid;place-items:center;font-size:17px;line-height:1; color:var(--sk-dim);background:none;border:0; } body.sk .fld-olho:active{background:rgba(255,255,255,.06)} body.sk .fld:has(.fld-olho) input, body.sk .auth-card label:has(.fld-olho) input{padding-right:40px} /* botão X do modal, maior e redondo como na referência */ body.sk .modal-x{ width:52px;height:52px;border-radius:50%;top:14px;right:14px; background:rgba(255,255,255,.07);border:1px solid var(--sk-line);color:#fff; } body.sk .modal-x .ico{width:24px;height:24px} body.sk .modal-box{padding-top:26px} /* marca do modal centralizada */ body.sk .modal-brand{ display:flex;align-items:center;justify-content:center;gap:12px; margin:6px 0 18px;text-align:left; } body.sk .modal-brand img{height:42px;width:auto} body.sk .modal-title{font-size:1.25rem;font-weight:800} body.sk .modal-brand p{font-size:.88rem;color:var(--sk-dim)} /* ===================================================================== 16. BARRA DO USUÁRIO LOGADO Depositar (com selo Pix) · saldo com atualizar · foto que abre o menu ===================================================================== */ body.sk .hdr-act{gap:8px} /* botão Depositar */ .sk-dep{ position:relative;flex:none; padding:13px 22px;border-radius:999px; font-size:.95rem;font-weight:800;color:#fff;white-space:nowrap; background:linear-gradient(180deg,#ff3b45,#d61220); box-shadow:0 0 20px rgba(225,29,42,.55), inset 0 1px 0 rgba(255,255,255,.22); } .sk-dep:active{transform:scale(.97)} .sk-dep-pix{ position:absolute;top:-10px;right:-8px; padding:3px 9px 3px 20px;border-radius:999px; font-size:.62rem;font-weight:900;letter-spacing:.04em;color:#0a3b3a; background:#f5c542;border:1px solid rgba(0,0,0,.25); box-shadow:0 2px 6px rgba(0,0,0,.4); } /* losango do Pix desenhado em CSS, sem depender de imagem */ .sk-dep-pix::before{ content:"";position:absolute;left:5px;top:50%; width:11px;height:11px;margin-top:-5.5px; background:#32bcad;border-radius:2px;transform:rotate(45deg); } /* pílula de saldo */ .sk-saldo{ display:flex;align-items:center;gap:9px;flex:none; padding:12px 18px;border-radius:999px; font-size:.95rem;font-weight:700;color:#fff;white-space:nowrap; background:rgba(255,255,255,.05);border:1px solid var(--sk-line); } .sk-saldo-ico{font-size:1.05rem;line-height:1;color:var(--sk-dim);display:inline-block} .sk-saldo.girando .sk-saldo-ico{animation:skGira .8s linear infinite} @keyframes skGira{to{transform:rotate(360deg)}} /* foto / inicial do usuário */ .sk-perfil{position:relative;flex:none} .sk-perfil-btn{ width:46px;height:46px;border-radius:50%; display:grid;place-items:center; font-size:1.15rem;font-weight:800;color:#04220f; background:linear-gradient(150deg,#3ddc84,#16a34a); border:2px solid rgba(255,255,255,.18); } .sk-perfil.on .sk-perfil-btn{box-shadow:0 0 0 3px rgba(61,220,132,.25)} /* ---------- menu que abre ao clicar na foto ---------- */ .sk-perfil-menu{ position:absolute;top:calc(100% + 12px);right:-6px;z-index:120; width:min(88vw,340px); border-radius:16px;overflow:hidden; background:#15131a; border:1px solid var(--sk-line); box-shadow:0 22px 60px rgba(0,0,0,.66); } .sk-perfil-menu[hidden]{display:none} .sk-perfil-topo{padding:14px;background:rgba(255,255,255,.04)} .sk-perfil-nome{ display:flex;align-items:center;justify-content:center;gap:10px; margin-bottom:12px; } .sk-perfil-nome strong{ font-size:1.02rem;font-weight:800;letter-spacing:.02em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .sk-perfil-nome a{font-size:1.1rem;color:var(--sk-red-2);flex:none} .sk-perfil-linha{display:flex;align-items:stretch;gap:12px} .sk-perfil-foto{ width:92px;height:92px;flex:none;border-radius:50%; display:grid;place-items:center; font-size:2.1rem;font-weight:800;color:#04220f; background:linear-gradient(150deg,#3ddc84,#16a34a); border:3px solid var(--sk-red); } .sk-perfil-nivel{ flex:1;min-width:0; display:flex;flex-direction:column;justify-content:center;gap:6px; padding:10px 12px;border-radius:11px; background:rgba(255,255,255,.05); } .sk-perfil-nivel em{font-style:normal;font-size:.8rem;color:var(--sk-dim);text-align:center} .sk-perfil-nivel strong{ display:flex;align-items:center;justify-content:center;gap:7px; font-size:1.05rem;font-weight:800; } .sk-perfil-nivel strong small{font-size:.78rem;font-weight:600;color:var(--sk-dim)} .sk-nivel-selo{ width:15px;height:15px;flex:none;border-radius:3px;transform:rotate(45deg); border:1px solid rgba(0,0,0,.35); } .sk-nivel-barra{ display:block;height:5px;border-radius:99px;overflow:hidden; background:rgba(255,255,255,.1); } .sk-nivel-barra span{ display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,#f5c542,#ff8a00); } .sk-nivel-btn{ display:block;text-align:center;margin-top:2px; padding:8px;border-radius:9px; font-size:.86rem;font-weight:700;color:#fff; background:rgba(255,255,255,.07);border:1px solid var(--sk-line); } .sk-perfil-criada{ margin-top:10px;padding:9px;border-radius:9px;text-align:center; font-size:.85rem;color:var(--sk-dim); background:rgba(255,255,255,.04); } .sk-perfil-nav{display:flex;flex-direction:column;padding:6px} .sk-perfil-nav a{ display:flex;align-items:center;gap:14px; padding:14px 12px;border-radius:10px; font-size:.98rem;font-weight:600;color:rgba(255,255,255,.85); } .sk-perfil-nav a .ico{width:21px;height:21px;flex:none;color:var(--sk-dim)} .sk-perfil-nav a:active{background:rgba(255,255,255,.06)} .sk-perfil-nav a.sair, .sk-perfil-nav a.sair .ico{color:var(--sk-red-2)} /* telas estreitas: encolhe o que dá para tudo caber numa linha */ @media(max-width:400px){ .sk-dep{padding:12px 15px;font-size:.86rem} .sk-saldo{padding:11px 12px;font-size:.86rem;gap:6px} .sk-perfil-btn{width:42px;height:42px} body.sk .brand img{height:28px} }