/* ===================================================================== base.css - camada visual nova do Lotecando --------------------------------------------------------------------- Arquivo NOVO e aditivo. Nao substitui index.css nem abas.css: as paginas antigas continuam so com aqueles dois, e cada pagina migrada passa a linkar este aqui no lugar deles. Nada aqui usa tabela para layout. As cores por loteria sao as mesmas que ja estavam espalhadas em barraesq.asp, agora em um lugar so. ===================================================================== */ :root{ --verde-900:#04291B; --verde-700:#005634; --cor-credito:#005634; --verde:#007143; --verde-claro:#18964C; --amarelo:#FFC916; --amarelo-escuro:#C99500; --sobre-verde:#FFFFFF; --papel:#F4F7F4; --superficie:#FFFFFF; --superficie-2:#EDF2EE; --linha:#D8E1DA; --linha-forte:#B9C7BE; --tinta:#15211B; --tinta-media:#4E5D55; --tinta-fraca:#71817A; --alerta:#B3261E; --alerta-fundo:#FCEDEC; --azul-atraso:#1E5FA8; --sombra:0 1px 2px rgba(4,41,27,.06), 0 6px 18px -8px rgba(4,41,27,.18); --sombra-alta:0 2px 4px rgba(4,41,27,.08), 0 14px 34px -12px rgba(4,41,27,.28); --raio:10px; --largura:1180px; --menu:224px; /* cores por loteria - iguais as de barraesq.asp */ --lot-6:#F63437; /* Loteca */ --lot-1:#18964C; /* Mega-Sena */ --lot-4:#1E0B79; /* Quina */ --lot-8:#A1508D; /* Lotofacil */ --lot-9:#B9A200; /* Timemania */ --lot-2:#A41128; /* Dupla Sena */ --lot-3:#FF6F04; /* Lotomania */ --lot-20:#F63437; /* Quiniela */ --lot-0:#5C6A62; /* fallback */ /* variantes das cores acima com contraste AA como TEXTO sobre branco. A cor cheia continua valendo para bolinha, faixa e anel. */ --lot-6-txt:#C8262A; /* Loteca 3.5:1 -> 4.8:1 */ --lot-1-txt:#10703A; /* Mega-Sena 3.6:1 -> 5.2:1 */ --lot-4-txt:#1E0B79; /* Quina ja passava */ --lot-8-txt:#8A3F77; /* Lotofacil 5.4:1 -> 6.6:1 */ --lot-9-txt:#7E6D00; /* Timemania 2.6:1 -> 5.5:1 */ --lot-2-txt:#A41128; /* Dupla Sena ja passava */ --lot-3-txt:#B24B00; /* Lotomania 2.8:1 -> 5.1:1 */ --lot-20-txt:#C8262A; /* Quiniela igual a Loteca */ --lot-0-txt:#4E5D55; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--papel); color:var(--tinta); font-family:"Segoe UI",Tahoma,Verdana,system-ui,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } a{color:var(--verde-700); text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%; height:auto} :focus-visible{outline:2px solid var(--amarelo-escuro); outline-offset:2px; border-radius:4px} @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} } .pagina{max-width:var(--largura); margin:0 auto; background:var(--superficie); box-shadow:var(--sombra); min-height:100vh} /* ---------- barra de sessao (topo preto-verde) ---------- */ .sessao{ background:var(--verde-900); color:#D6E5DC; padding:9px 20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13.5px; } .sessao form{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0} .sessao input{ font:400 14px inherit; font-family:inherit; padding:7px 10px; width:180px; border:1px solid rgba(255,255,255,.22); border-radius:7px; background:rgba(255,255,255,.08); color:#fff; } .sessao input::placeholder{color:#8CA598} .sessao input:focus{background:rgba(255,255,255,.14); border-color:var(--amarelo)} .sessao a{color:#A8C0B4} .sessao a:hover{color:#fff} .sessao b{color:#fff} .sessao .dir{margin-left:auto; display:flex; gap:16px; align-items:center; flex-wrap:wrap} .btn-entrar{ font:700 13.5px inherit; font-family:inherit; padding:8px 18px; cursor:pointer; background:var(--amarelo); color:#2B2100; border:0; border-radius:7px; } .btn-entrar:hover{background:#FFD745} .erro-login{ background:var(--alerta-fundo); color:var(--alerta); border-bottom:1px solid var(--linha); padding:10px 20px; font-size:14px; font-weight:600; } /*--Cadastro incompleto (padrao/topo.asp): a mesma tarja, com o link para o formulario. Fica em toda pagina ate o usuario completar os dados. */ .aviso-cadastro{ background:var(--alerta-fundo); color:var(--alerta); border-bottom:1px solid var(--linha); padding:10px 20px; font-size:14px; font-weight:600; } .aviso-cadastro a{color:var(--alerta); text-decoration:underline; margin-left:6px; white-space:nowrap} /*--Confirmacao de e-mail pendente (padrao/verificaemail.asp): a mesma tarja, com o campo do e-mail e os dois botoes. A linha quebra sozinha conforme a largura, e os dois botoes ficam num .acoes para descerem juntos - senao o "Alterar e-mail" cai sozinho numa segunda linha vazia. */ .aviso-email{ background:var(--alerta-fundo); color:var(--alerta); border-bottom:1px solid var(--linha); padding:10px 20px; font-size:14px; } .aviso-email form{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0} .aviso-email b{font-weight:700} .aviso-email label{font-weight:600} .aviso-email input[type=email]{ font-family:inherit; font-size:14.5px; padding:8px 11px; border-radius:8px; border:1px solid var(--linha-forte); background:var(--superficie); color:var(--tinta); flex:1 1 240px; min-width:0; max-width:360px; } .aviso-email input[type=email]:focus{ border-color:var(--verde); outline:2px solid rgba(0,113,67,.18); outline-offset:0} /* o grupo pode encolher: no celular ele cai para a linha de baixo e ai os dois botoes se empilham, em vez de furar a largura da tela */ .aviso-email .acoes{flex:0 1 auto; max-width:100%} .aviso-email .btn-perigo, .aviso-email .btn-2{padding:8px 16px; font-size:14px} /* ---------- cabecalho ---------- O 21px da esquerda nao e arbitrario: poe o logo na mesma linha vertical do texto dos itens do menu, que cai em 18px de padding + 3px da borda que vira o traco do item ativo. Mexer aqui sem mexer em .menu h2 desalinha a coluna. */ .cabecalho{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:16px 20px 16px 21px; border-bottom:1px solid var(--linha); background:var(--superficie); } .cabecalho .logo img{display:block; height:44px; width:auto} /* A caixa do logo tem largura fixa para a divisoria da assinatura cair EM CIMA da borda direita do menu, e as duas virarem uma linha so descendo a pagina: 21 do padding do cabecalho + 184 + 18 do gap = 223, que e onde comeca o 1px de borda da coluna de 224 (box-sizing:border-box). Se mudar o padding ou o gap de .cabecalho, esta conta muda junto. */ .cabecalho .logo{width:calc(var(--menu) - 21px - 18px - 1px)} .assinatura{ font-size:13.5px; color:var(--tinta-media); margin:0; border-left:1px solid var(--linha); padding-left:18px; max-width:34ch; } .assinatura b{color:var(--verde-700); font-weight:600} .saldo{ margin-left:auto; display:flex; align-items:baseline; gap:9px; background:var(--superficie-2); border:1px solid var(--linha); border-radius:var(--raio); padding:9px 16px; } .saldo .rot{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-fraca)} .saldo .val{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--verde-700)} /* menu sanfonado no celular: puro CSS, sem JS */ .troca-menu{position:absolute; opacity:0; width:0; height:0} .hamburguer{ display:none; align-items:center; gap:8px; cursor:pointer; font-size:14px; font-weight:600; background:var(--superficie-2); color:var(--tinta); border:1px solid var(--linha); border-radius:8px; padding:9px 14px; } .hamburguer:hover{border-color:var(--linha-forte)} .troca-menu:focus-visible + .cabecalho .hamburguer{outline:2px solid var(--amarelo-escuro); outline-offset:2px} /* ---------- corpo: menu lateral + conteudo ---------- */ .corpo{display:grid; grid-template-columns:var(--menu) minmax(0,1fr); align-items:start} .menu{border-right:1px solid var(--linha); background:var(--superficie-2); padding:14px 0 30px; align-self:stretch} .menu h2{font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--verde-700); margin:20px 0 7px; padding:0 18px 0 21px} /* 21 = 18 + a borda de .menu a */ .menu h2:first-child{margin-top:4px} .menu a{display:block; padding:7px 18px; font-size:14px; color:var(--tinta-media); border-left:3px solid transparent} .menu a:hover{background:var(--superficie); color:var(--tinta); text-decoration:none; border-left-color:var(--linha-forte)} .menu a[aria-current]{color:var(--verde-700); font-weight:600; background:var(--superficie); border-left-color:var(--verde)} .menu .pt{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:8px; vertical-align:middle} .menu .acao{display:block; margin:12px 14px 4px; padding:10px 14px; text-align:center; background:var(--amarelo); color:#2B2100; border-radius:8px; font-size:14px; font-weight:700; border-left:0} .menu .acao:hover{background:#FFD745; color:#2B2100; text-decoration:none; border-left:0} /* ---------- niveis do menu lateral: secao > grupo > item ---------- Nasceu no /adminml em 03/09/2026 e desceu para ca em 10/09/2026, quando o menu do site ganhou os mesmos tres niveis (padrao/menu.asp). O adminml/admin.css NAO repete estas regras: as duas telas leem daqui, e o /adminml so troca as cores, pelo tema.css. Antes das duas mudancas o menu era uma escada de titulos iguais: o titulo era 10,5px em caixa alta, ou seja, MAIS FRACO que o item de 14px que ele deveria comandar. Agora cada nivel tem forma propria: secao - faixa preenchida atravessando a coluna inteira; grupo - texto escuro de 12,5px, sem caixa alta, com os itens recuados sob um fio vertical (o "trilho" do .grupo abaixo); item - o de sempre, recuado sob o trilho. O trilho e o que faz o grupo ter comeco E fim visiveis; so o titulo marcaria o comeco, e num menu longo o item solto le como se fosse do grupo de cima. */ .menu h2.secao{ font-size:11px; letter-spacing:.16em; color:var(--tinta); background:var(--linha); margin:26px 0 0; padding:6px 18px 6px 21px; border-top:1px solid var(--linha-forte); border-bottom:1px solid var(--linha-forte); } .menu h2.secao:first-child{margin-top:0} /*--No site a primeira coisa do menu e o botao Cadastre-se, e nao a faixa. */ .menu .acao + h2.secao{margin-top:16px} .menu h2.secao + a, .menu h2.secao + .grupo{margin-top:10px} .menu h2.secao + h2{margin-top:14px} /* titulo de grupo: vira texto de comando, mais forte que o item */ .menu h2:not(.secao){ font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--tinta); margin:18px 0 4px; } /* trilho: liga os itens ao titulo que os comanda. Quem monta o menu envolve os itens de cada grupo em
. A pagina atual acende o pedaco do trilho que lhe cabe, no lugar da borda esquerda que este arquivo desenha nos itens fora de grupo. */ .menu .grupo{position:relative; margin-left:24px; padding-left:12px} .menu .grupo::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:2px; border-radius:2px; background:var(--linha-forte)} .menu .grupo a{position:relative; padding:6px 18px 6px 8px; border-left:0} .menu .grupo a[aria-current]{background:transparent} .menu .grupo a[aria-current]::before{content:""; position:absolute; left:-12px; top:0; bottom:0; width:2px; background:var(--verde); border-radius:2px} .conteudo{padding:24px 26px 40px; min-width:0; display:flex; flex-direction:column; gap:30px} /* ---------- cabecalho de secao ---------- */ .secao-topo{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:14px} .secao-topo h1, .secao-topo h2{ font-size:22px; font-weight:700; line-height:1.2; margin:0; color:var(--tinta); text-wrap:balance; letter-spacing:-.015em; } .secao-topo .sub{font-size:14px; color:var(--tinta-fraca)} .secao-topo .todos{margin-left:auto; font-size:14px; font-weight:600} /* ---------- cards de bolao ---------- */ .boloes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none} .bolao{ position:relative; display:flex; flex-direction:column; gap:11px; background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio); padding:15px 16px 16px; box-shadow:var(--sombra); overflow:hidden; transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease; } .bolao::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--cor,var(--lot-0))} .bolao:hover{box-shadow:var(--sombra-alta); border-color:var(--linha-forte); transform:translateY(-2px)} .bolao .loteria{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--cor-txt,var(--lot-0-txt)); } .bolao .concurso{margin-left:auto; font-size:12px; font-weight:500; color:var(--tinta-fraca); font-variant-numeric:tabular-nums; text-transform:none; letter-spacing:0} .valor .rot{display:block; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-fraca); margin-bottom:1px} .valor .val{font-size:29px; font-weight:800; line-height:1.05; font-variant-numeric:tabular-nums; letter-spacing:-.025em; color:var(--tinta)} .valor .val small{font-size:16px; font-weight:600; color:var(--tinta-media); margin-right:3px} .bolao .estimativa .val{font-size:20px; color:var(--cor-txt,var(--lot-0-txt)); overflow-wrap:anywhere} /* barra de quanto do jogo ja foi inscrito */ .barra{height:7px; border-radius:99px; background:var(--superficie-2); border:1px solid var(--linha); overflow:hidden} .barra span{display:block; height:100%; background:var(--cor,var(--verde)); border-radius:99px} .barra-leg{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--tinta-media); font-variant-numeric:tabular-nums} .barra-leg b{color:var(--tinta); font-weight:600} .linhas{display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; font-size:13.5px; border-top:1px solid var(--linha); padding-top:11px} .linhas div{display:flex; flex-direction:column} .linhas .rot{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-fraca)} .linhas .dado{font-weight:600; color:var(--tinta); font-variant-numeric:tabular-nums} .prazo{display:flex; align-items:center; gap:8px; margin-top:auto} .pill{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 11px; font-size:12px; font-weight:600; white-space:nowrap} .pill.calmo{background:var(--superficie-2); color:var(--tinta-media); border:1px solid var(--linha)} .pill.urgente{background:var(--alerta-fundo); color:var(--alerta); border:1px solid rgba(179,38,30,.35); font-weight:700} .pill .bolinha{width:6px; height:6px; border-radius:50%; background:currentColor} .pill.urgente .bolinha{animation:pulsa 1.6s ease-in-out infinite} @keyframes pulsa{0%,100%{opacity:1} 50%{opacity:.25}} .btn-participar{ display:block; text-align:center; padding:10px; border-radius:8px; background:var(--verde); color:var(--sobre-verde); font-size:14.5px; font-weight:700; } .btn-participar:hover{filter:brightness(1.09); text-decoration:none; color:var(--sobre-verde)} .btn-participar:disabled{font-family:inherit; line-height:inherit; border:0; background:var(--linha); color:var(--tinta-media); cursor:not-allowed; filter:none} .vazio{padding:22px; border:1px dashed var(--linha-forte); border-radius:var(--raio); color:var(--tinta-media); font-size:15px; text-align:center; background:var(--superficie-2)} /* tira compacta de bolo~es abertos - o que as telas internas mostram */ .tira{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--superficie-2); border:1px solid var(--linha); border-radius:var(--raio); padding:11px 14px} .tira .rot{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-fraca); white-space:nowrap} .tira .atalhos{margin:0} .atalho small{color:var(--tinta-fraca); font-weight:500; font-size:12px} .atalho:hover small{color:inherit} span.atalho{cursor:default} /* atalhos que nao sao bolao (Seco, Ranking) */ .atalhos{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; padding:0; list-style:none} .atalhos li{display:contents} .atalho{display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border:1px solid var(--linha); border-radius:999px; background:var(--superficie); font-size:13.5px; font-weight:600; color:var(--tinta-media)} .atalho:hover{border-color:var(--cor,var(--verde)); color:var(--cor-txt,var(--verde-700)); text-decoration:none} .atalho .pt{width:8px; height:8px; border-radius:50%; background:var(--cor,var(--verde))} /* ---------- cabecalho de pagina interna ---------- Substitui a "aba" de tres GIFs (aba_sel_esq/meio/dir.gif) que nomeava cada tela. Era uma aba so, sempre selecionada, sem nenhuma irma ao lado: um titulo desenhado como se fosse navegacao. */ .titulo-pagina{border-bottom:1px solid var(--linha); padding-bottom:14px} .titulo-pagina h1{font-size:24px; font-weight:700; line-height:1.2; margin:0; letter-spacing:-.015em; text-wrap:balance} .titulo-pagina .sub{margin:5px 0 0; font-size:14.5px; color:var(--tinta-fraca); max-width:70ch} /* ---------- passos do caixa ---------- Substitui a regua de abas em GIF (aba_formadepagamento, aba_confirmacaodosdados e aba_finalizacaodacompra) que marcava as tres etapas da compra. */ .passos{display:flex; flex-wrap:wrap; gap:6px 22px; margin:0; padding:0; list-style:none; counter-reset:passo; font-size:13.5px} .passos li{display:inline-flex; align-items:center; gap:8px; color:var(--tinta-fraca); counter-increment:passo; white-space:nowrap} .passos li::before{content:counter(passo); display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:12px; font-weight:700; background:var(--superficie-2); border:1px solid var(--linha-forte); color:var(--tinta-media)} .passos li[aria-current]{color:var(--verde-700); font-weight:700} .passos li[aria-current]::before{background:var(--verde); border-color:var(--verde); color:var(--sobre-verde)} .passos li.feito::before{content:"\2713"; background:var(--verde-900); border-color:var(--verde-900); color:#fff} /* ---------- texto corrido ---------- */ .prosa{font-size:15.5px; color:var(--tinta-media); max-width:68ch} /* A regra de margem zero precisa ser tao especifica quanto a de espacamento e vir antes dela. Como ".prosa p" (0,1,1) e mais especifica que ".prosa > * + *" (0,1,0), o margin:0 vencia e nenhuma pagina migrada tinha respiro entre paragrafos. */ .prosa > *{margin:0} .prosa > * + *{margin-top:14px} .prosa b, .prosa strong{color:var(--tinta); font-weight:600} .prosa img{border-radius:6px; border:1px solid var(--linha)} .prosa ol, .prosa ul{margin:0; padding-left:22px} .prosa li + li{margin-top:6px} /* ---------- card com titulo ---------- Substitui o par .BordasCinzas + .TituloAreaCinza +
das telas antigas. */ .cartao{background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio); padding:18px 20px; box-shadow:var(--sombra)} .cartao > h2{font-size:16px; font-weight:700; margin:0 0 12px; color:var(--verde-700); padding-bottom:10px; border-bottom:1px solid var(--linha)} /* Titulo de cartao com uma acao a direita, na mesma linha. A acao e um form proprio ou um .dir com botao de um form de fora. A divisoria sai do h2 e passa para o cabecalho, para continuar atravessando o cartao inteiro por baixo dos dois. Abaixo de 560px a acao desce e ocupa a largura toda, igual ao .secao-topo .todos. */ .cartao > .titulo-cartao{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--linha)} .cartao > .titulo-cartao > h2{font-size:16px; font-weight:700; margin:0; color:var(--verde-700); padding:0; border:0} .cartao > .titulo-cartao > form, .cartao > .titulo-cartao > .dir{margin:0 0 0 auto} .cartoes{display:flex; flex-direction:column; gap:16px} /* ---------- abas dentro de um cartao ---------- Um cartao com duas ou mais faces que se excluem (meusjogos: marcar as dezenas OU colar cartoes prontos). A regua toma o lugar do h2: fica na mesma posicao, com a mesma divisoria atravessando o cartao, e a aba aberta faz as vezes de titulo. Marcacao: um [role=tablist] com