/* * Paleta Mais Franquias para os quadros de ranking do login e da tela inicial. * Gerado a partir da variante da Ecospeed: as duas cores de marca viram o azul * #0b87fb e o laranja #fca01f do logo, e os demais tons sao os mesmos da origem * com a MATIZ trocada, preservando saturacao e luminosidade — assim os * contrastes (texto branco sobre fundo escuro, AA) continuam valendo. * * Seletores comecam com "body" DE PROPOSITO, no lugar do .ranking-ecospeed da * origem. A variante da Ecospeed vence a regra base por ESPECIFICIDADE, gracas * a classe que os fragmentos XHTML dela aplicam; o Mais Franquias usa o * fragmento PADRAO, sem classe. Um seletor igual ao base empataria — e perderia * na tela inicial, porque o JSF realoca os h:outputStylesheet para o topo do * , antes do simples do cssRankingInicial.css. O "body" resolve * com +1 de especificidade de elemento, sem duplicar fragmento nem !important. */ /* Cabeçalho: chapa azul->laranja, textura radial do bloco original e filete da marca no topo */ body .titulo-bloco, body .leaderboard .header { background-color: #1f5180; background-image: linear-gradient(90deg, #0b87fb 0%, #fca01f 100%), repeating-radial-gradient(circle at 15%, transparent 0%, transparent 10%, rgba(255, 255, 255, 0.08) 10%, rgba(255, 255, 255, 0.08) 17%), linear-gradient(105deg, #1f5180 0%, #265c8f 45%, #7d5c2e 100%); background-size: 100% 3px, auto, auto; background-repeat: no-repeat, repeat, no-repeat; background-position: top left, 0 0, 0 0; } body .leaderboard .header { border-top-color: #1f5180; border-left-color: #cfdbe6; border-right-color: #cfdbe6; } /* Quadro único no login: acompanha a largura do cartão de login, sem o recuo e o teto de altura que existem para acomodar os dois quadros lado a lado da Muniz */ body .col-md-7 { padding-left: 0; padding-right: 0; } body .boxRanktwo { padding-left: 0; padding-right: 0; max-height: none; } /* Filho único acumula as margens de :first-child e :last-child, que existem para separar os dois quadros */ body .boxRanktwoItem:first-child, body .boxRanktwoItem:last-child { margin: 0; } /* Superfícies dos cartões */ body .boxRanktwoItem { background-color: #fbfcfd; border-color: #cfdbe6; } body .leaderboard-profiles { background-color: #fbfcfd; border-bottom-color: #cfdbe6; border-left-color: #cfdbe6; border-right-color: #cfdbe6; } /* Nomes de loja e vendedor: o vermelho herdado da Muniz sai e o texto passa a ter contraste real */ body .bloco-item-loja-conteudo, body .bloco-nome-localizacao, body .leaderboard-name { color: #333f4a; } body .leaderboard-filial, body .titulo-loja-ouro { color: #1f5180; } body .leaderboard-filial { border-top-color: #d8e1e9; } /* Nomes longos quebram entre palavras, não no meio delas */ body .leaderboard-name, body .leaderboard-filial, body .titulo-loja-ouro, body .bloco-nome-localizacao div:first-child { word-break: normal; overflow-wrap: anywhere; } /* Ícones de loja/vendedor no azul da marca */ body .icone-build-primero, body .titulo-loja-ouro:before, body .bloco-nome-localizacao div:before, body .leaderboard-name:before, body .leaderboard-filial:before { color: #276198; } /* Linhas do 2º ao 10º: a faixa rosada do tema Muniz vira um tom frio da marca */ body .cor-fundo-outros { background-color: #f2f5f8; border-color: #d8e1e9; box-shadow: 0 2px 6px -2px rgba(31, 81, 128, 0.28); color: #7d90a1; } body .bloco-item-loja, body .leaderboard-profile { border-color: #dbe3ea; box-shadow: 0 2px 6px -2px rgba(31, 81, 128, 0.28); } body .cor-fundo-prata { box-shadow: 0 2px 6px -2px rgba(31, 81, 128, 0.22); } body .cor-fundo-bronze { box-shadow: 0 2px 6px -2px rgba(160, 120, 70, 0.3); } /* Líder da tela inicial: realce da marca em vez de peso extra de sombra */ body .leaderboard-profile:first-child { background-color: #f4f8fb; border-color: #bcd0e3; } /* O quadro da Muniz vive em coluna de 33%, e suas medidas são percentuais. Com um quadro único ocupando a largura toda, elas esticam: a linha ganha ~45px de respiro, a medalha reserva ~228px de coluna e o hover cresce ~57px para cada lado, passando por baixo do menu. Aqui as três viram medidas fixas. */ body .leaderboard-profile { grid-template-columns: 60px 1fr; column-gap: 12px; margin-bottom: 10px; padding: 8px 12px; } body .leaderboard-profile:hover { transform: translateY(-2px); border-color: #9fbbd6; box-shadow: 0 6px 14px -6px rgba(31, 81, 128, 0.45); } /* Medalhas 1º/2º/3º seguem como estão; a roseta vermelha do 4º em diante vira azul */ body .icone-loja-outros, body .icone-medalha-outros-posicao { filter: hue-rotate(195deg) saturate(0.85); } /* Posições legíveis tanto sobre a medalha quanto sobre o cartão claro */ body .numero-posicao, body .numero-posicao-loja-ouro, body .numero-posicao-loja-prata, body .numero-posicao-loja-bronze, body .numero-posicao-loja-outros { font-variant-numeric: tabular-nums; } body .numero-posicao-loja-ouro { color: #7a5a1f; text-shadow: none; } body .numero-posicao-loja-prata { color: #5c6166; } body .numero-posicao-loja-bronze { color: #7a5230; } body .numero-posicao-loja-outros { color: #1f5180; } /* Estado vazio: mesma mensagem do restante do sistema, sem parecer erro */ body h5 { margin: 0; padding: 18px 12px; font-family: 'Source Sans Pro', sans-serif; font-size: 13px; font-weight: 400; text-align: center; color: #5f6c78; } body ::selection { background-color: #0b87fb; color: #ffffff; }