/* Cores do Layout */ :root { --bs-body-font-family: Verdana, Geneva, sans-serif; --color-primary: #0189c7; --color-secondary: #08CCD0; --color-tertiary: #08ced5; --color-dark-green: #003041; --color-dark-main: #003260; --color-accent-cyan: #6adaff; --color-accent-gold: #ffff73; --color-white: #fff; --color-sky: #81d2ff; --color-light-text: rgba(255, 255, 255, 0.75); --color-dark-text: rgba(0, 0, 0, 0.75); --color-emerald-blue: #00bcd4; --border-radius-main: 12px; --border-radius-small: 8px; } /* Definindo o cursor personalizado */ * { cursor: url('../cursor/frame_0000.png'), auto; /* Exibe a primeira imagem como cursor */ } /* Animação de transição entre os frames */ @keyframes cursorAnimacao { 0% { cursor: url('../cursor/frame_0001.png'), auto; } 5% { cursor: url('../cursor/frame_0002.png'), auto; } 10% { cursor: url('../cursor/frame_0003.png'), auto; } 15% { cursor: url('../cursor/frame_0004.png'), auto; } 20% { cursor: url('../cursor/frame_0005.png'), auto; } 25% { cursor: url('../cursor/frame_0006.png'), auto; } 30% { cursor: url('../cursor/frame_0007.png'), auto; } 35% { cursor: url('../cursor/frame_0008.png'), auto; } 40% { cursor: url('../cursor/frame_0009.png'), auto; } 45% { cursor: url('../cursor/frame_0010.png'), auto; } 50% { cursor: url('../cursor/frame_0011.png'), auto; } 60% { cursor: url('../cursor/frame_0012.png'), auto; } 70% { cursor: url('../cursor/frame_0013.png'), auto; } 80% { cursor: url('../cursor/frame_0014.png'), auto; } 90% { cursor: url('../cursor/frame_0015.png'), auto; } 100% { cursor: url('../cursor/frame_0016.png'), auto; } } /* Aplica a animação ao cursor */ * { animation: cursorAnimacao 0.7s steps(16) infinite; } html, body { height: 100%; } body { background-color: #0a0e1b; background-image: url('../images/background-min.png'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; background-size: cover; font-family: 'Archivo Narrow', sans-serif; color: #d1d5db; display: flex; flex-direction: column; } /* ===== CONTROLE DA GALERIA===== */ #gb-legacy-gallery { display: none; } /* Mostre a galeria APENAS QUANDO a tag tiver a classe 'is-home' */ body.is-home #gb-legacy-gallery { display: block; } /* ===== FIM CONTROLE DA GALERIA===== */ /* ===== MENU ESTILO FLASH COM DROPDOWN ===== */ .flash-nav { display: flex; list-style: none; padding: 0; margin: 0; height: 60px; } ul.flash-nav .leftmenu { border-top-left-radius: 8px; border-bottom-left-radius: 8px; border-left: 5px solid #D1DABB; } ul.flash-nav .rightmenu { border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-right: 5px solid #D1DABB; } .flash-nav li { position: relative; } .flash-nav li:first-child { margin-left: 0; } .flash-nav>li>a { display: flex; align-items: center; justify-content: center; width: 130px; height: 100%; color: #fff; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; /* transform: skewX(-25deg);*/ background: linear-gradient(to bottom, #71CAD8, #6cc1ce); border-top: 5px solid #D1DABB; border-bottom: 5px solid #D1DABB; transition: all 0.3s ease; position: relative; overflow: hidden; } .flash-nav a .menu-text { /*transform: skewX(25deg);*/ position: relative; z-index: 2; display: flex; align-items: center; } .flash-nav li.active a { color: #fffb00; } /* ===== FAIXA DE BRILHO (EFEITO DE LUZ PASSANDO) ===== */ .flash-nav>li>a::after { content: ""; position: absolute; top: 0; left: -100%; /* começa fora da esquerda */ width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-25deg); transition: left 0.4s ease; z-index: 1; /* fica entre o fundo e o texto */ pointer-events: none; /* não bloqueia o clique */ } /* ao passar o mouse, a faixa desliza */ .flash-nav a:hover::after { left: 100%; /* move pro outro lado */ } ul:not(.dropdown-menu).flash-nav>li>a:hover, .flash-nav li.has-dropdown:hover>a { color: #ffc; font-size: 1.0rem; } /* faixa do menu */ ul:not(.dropdown-menu).flash-nav>li::before { content: ""; position: absolute; top: 10px; /* recuo do topo (ajusta a altura dessa luz) */ left: 0; width: 100%; /* cobre toda a largura do botão */ height: 25px; /* altura fixa da faixa */ /*background: rgba(255, 255, 255, 0.267);*/ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.473), transparent); /* opacidade leve (pode ajustar) */ pointer-events: none; /* evita interferir com cliques */ z-index: 1; /* fica acima do gradiente base, mas abaixo do texto */ } ul.flash-nav>li:first-child::before { border-top-left-radius: 12px; border-bottom-left-radius: 12px; } ul.flash-nav>li:last-child::before { border-top-right-radius: 12px; border-bottom-right-radius: 12px; } .dropdown-menu { display: flex; /* os itens agora ficam lado a lado */ flex-direction: row; /* em linha, não em coluna */ list-style: none; gap: 2px; /* espaço entre cada item (opcional) */ padding: 10px 15px; margin: 0; height: 80%; position: absolute; top: 100%; /* alinha ao topo do item pai */ /* abre à direita do botão pai */ z-index: 1000; background-color: rgba(12, 23, 44, 0.95); border: 3px solid #FFF; border-radius: 6px 0 6px 0; opacity: 0; visibility: hidden; box-shadow: 0 0 12px rgba(90, 198, 255, 0.35); /* brilho difuso inicial */ transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.4s ease; } .dropdown-menu.drop-menu-ranking { background-color: #DB6767 !important; } ul.dropdown-menu>li>a { display: flex; align-items: center; justify-content: center; width: 110%; height: 100%; color: #fff; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 0.8rem; /* transform: skewX(-25deg);*/ background: none; transition: all 0.3s ease; position: relative; overflow: hidden; } ul.dropdown-menu>li>a:hover { color: #fff; /* cor do texto ao hover */ text-decoration: none; text-shadow: 0 0 6px rgba(255, 255, 255, 0.75); /* brilho suave branco */ } .flash-nav li.has-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; } .dropdown-menu li a { display: block; padding: 8px 14px; background: none; color: #fff; border-radius: 2px; border: none; text-decoration: none; white-space: nowrap; /* evita quebra de linha */ } /* ===== FIM DO MENU ===== */ .main-content { flex: 1; } /* Estrutura Principal */ .header-bg { /*background-color: rgba(10, 14, 27, 0.7);*/ backdrop-filter: blur(8px); z-index: 1010; } .footer-bg { background-color: var(--color-primary); backdrop-filter: blur(8px); position: relative; /* mantém o ::before posicionado corretamente */ margin: 0 auto; /* centraliza horizontalmente */ /* max-width: 1400px; define a largura máxima do footer */ width: 100%; /* ocupa 100% até atingir o limite */ border-radius: 12px; padding-left: 2%; padding-right: 2%; } .footer-bg>.container { background-color: var(--color-dark-green) !important; position: relative; /* pra comportar o pseudo-elemento */ margin-top: 2%; margin-bottom: 2%; border-radius: 12px; border: solid 1px var(--color-accent-cyan); } /* borda listrada */ .footer-bg::before { content: ""; position: absolute; inset: 0; padding: 12px; border-radius: 12px; /* espessura da borda */ background: repeating-linear-gradient(45deg, #004838, /* azul-claro */ #004838 6px, #F8D000 6px, #F8D000 12px); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 1; pointer-events: none; /* pra não atrapalhar interações */ } .navbar-brand img { filter: drop-shadow(0 0 5px #fff); } .navbar-dark .nav-link { color: rgba(255, 255, 255, .8); font-weight: 700; text-transform: uppercase; } .navbar-dark .nav-link:hover, .navbar-dark .nav-link.active { color: #fff; } /* Painel de Conteúdo (que fica por baixo) */ .content-panel-3d { background-color: var(--color-primary); border: 3px solid #000; box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6); border-radius: 6px; box-shadow: inset 1px 1px 0px rgb(172, 214, 238), inset 2px 2px 0px rgb(82, 174, 222), inset -1px -1px 0px rgb(0, 44, 156), inset -2px -2px 0px rgb(0, 101, 180); /* Padding para não ser cortado pelo header e barra */ padding-top: 50px; /* Espaço para o header */ padding-bottom: 50px; /* Espaço para a barra */ } /* Estilo Painel 3D */ .panel-3d { background-color: var(--color-primary); border: 2px solid #000; box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6); margin-bottom: 24px; border-radius: 6px; position: relative; box-shadow: inset 1px 1px 0px rgb(172, 214, 238), inset 2px 2px 0px rgb(82, 174, 222), inset -1px -1px 0px rgb(0, 44, 156), inset -2px -2px 0px rgb(0, 101, 180); } /* Container Principal (Coluna da Direita) */ .main-container-wrapper { position: relative; padding: 0; margin-bottom: 24px; z-index: 10; /* Coloca o conteúdo abaixo do header */ } .main-container { background-color: var(--color-primary); padding: 2px; } .panel-header { position: relative; height: 50px; background-color: var(--color-secondary); border: 3px solid #000; border-bottom: 3px solid var(--color-dark-green); border-top-left-radius: var(--border-radius-small); border-top-right-radius: var(--border-radius-small); padding-left: 1%; padding-right: 1%; color: var(--color-dark-green); font-weight: 600; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4); font-size: 1.2rem; z-index: 1; margin-bottom: -2%; } .panel-header.left-side { align-content: center; } .panel-header.left-side>i { margin-left: 10px; } @media (max-width: 767.98px) { /* tira o bem vindo do display */ .panel-header > span { display: none; } } .panel-body { padding: 20px; background-color: var(--color-dark-green); border: 10px; border-color: var(--color-primary); } .panel-body-styled { border-radius: 5px; margin-left: 5px; margin-right: 5px; background-color: var(--color-dark-green); border: 10px; border: solid 1px var(--color-accent-cyan); margin: 4% } .panel-body-login { padding: 20px; border: 10px; border-color: var(--color-primary); } /* Barra Decorativa */ .barra { border: 3px solid #000; box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6); border-radius: 6px; box-shadow: inset 1px 1px 0px rgb(172, 214, 238), inset 2px 2px 0px rgb(82, 174, 222), inset -1px -1px 0px rgb(0, 44, 156), inset -2px -2px 0px rgb(0, 101, 180); height: 30px; background-color: var(--color-secondary); border-top: 2px solid #3a5a7e; overflow: hidden; border-radius: 0 0 4px 4px; z-index: 1; margin-top: -1%; } .listras { height: 100%; background: repeating-linear-gradient(-45deg, var(--color-dark-green), var(--color-dark-green) 10px, transparent 10px, transparent 20px); } /* Botão Customizado */ .btn-custom-styled { --grad-main: linear-gradient(135deg, #d4efff, #8ccfef); --grad-frame: linear-gradient(135deg, #88dfff, #0087ef); --grad-frame-active: linear-gradient(135deg, #79d8fa, #007ee0); --grad-inner-bg: linear-gradient(135deg, #d4efff 0%, #b0dff7 15%, #b0dff7 85%, #8ccfef 100%); --grad-connector-left: linear-gradient(135deg, #cae9fd, #b5dff8); --grad-connector-right: linear-gradient(135deg, #a9d9f5, #9dd3f2); --text-color: #005a9c; --shadow-color: rgba(0, 58, 95, 0.8); --shadow-hover-color: rgba(0, 58, 95, 0.9); --transition-speed: 0.3s; --transition-speed-active: 0.1s; position: relative; display: inline-block; text-decoration: none; padding: 2px; border-radius: var(--border-radius-main); background: var(--grad-main); box-shadow: 1px 1px 3px var(--shadow-color); transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease; cursor: pointer; font-family: inherit; text-align: center; } .btn-custom-styled::before { content: ''; position: absolute; inset: 2px; border-radius: var(--border-radius-main); background: var(--grad-frame); z-index: 0; transition: background var(--transition-speed) ease; } .btn-custom-styled .btn-inner { font-family: Tahoma; position: relative; display: block; margin: 4px 8px; padding: 5px 25px; background: var(--grad-inner-bg); border-radius: 8px; z-index: 2; color: #6cc8cd; font-weight: bolder; font-size: 15px; text-shadow: -2px -2px 0 #0d3261, 2px -2px 0 #003041, -2px 2px 0 #003041, 2px 2px 0 #003041, 0px -2px 0 #003041, 0px 2px 0 #003041, -2px 0px 0 #003041, 2px 0px 0 #003041; white-space: nowrap; } .btn-custom-styled .btn-inner::before, .btn-custom-styled .btn-inner::after { content: ''; position: absolute; width: 8px; height: 6px; top: 70%; transform: translateY(-50%); z-index: 1; } .btn-custom-styled .btn-inner::before { left: -8px; background: var(--grad-connector-left); } .btn-custom-styled .btn-inner::after { right: -8px; background: var(--grad-connector-right); } .btn-custom-styled:hover { opacity: 0.95; box-shadow: 1px 2px 3px var(--shadow-hover-color); } .btn-custom-styled:active { transform: translateY(1px); box-shadow: 1px 1px 2px var(--shadow-color); transition-duration: var(--transition-speed-active); } .btn-custom-styled:active::before { background: var(--grad-frame-active); } .btn-custom-styled:hover .btn-inner { color: #F8F870 !important; } /* Inputs e Links */ .login-input { background-color: var(--color-dark-green); border: 1px solid var(--color-accent-cyan); color: #fff; } .login-lbl { background-color: #FFFC; border: 1px solid var(--color-accent-cyan); color: var(--color-dark-green); font: bolder; letter-spacing: 1px; text-transform: uppercase; } .login-input:focus { background-color: var(--color-dark-green); border-color: var(--color-accent-cyan); box-shadow: 0 0 5px #5ac6ff; color: #fff; } a { color: #ffc107; text-decoration: none; } a:hover { color: #fff; text-decoration: none; } .col-widget { background: var(--color-dark-green); border: solid 1px var(--color-accent-cyan); border-radius: 5px; margin-left: 5px; margin-right: 5px; } /* Widgets (Notícias, Ranking) */ .table-widget { position: relative; /* cria o contexto */ overflow: hidden; /* impede vazamento */ background-color: var(--color-dark-green); padding: .75rem 0; z-index: 0; } .table-widget .list-group-item { background-color: transparent; border-color: rgba(58, 90, 126, 0.4); color: #d1d5db; padding: .75rem 0; } .table-widget .list-group-item:first-child { border-top: none; } .post-title-link { font-weight: 700; font-size: 1.1rem; } /* Footer */ .footer a { color: #ffc107; } .social-icons a { color: #fff; background-color: #1c2b4a; border: 1px solid #3a5a7e; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; margin: 0 4px; transition: all 0.2s; } .social-icons a:hover { background-color: #5ac6ff; color: #0a0e1b; border-color: #5ac6ff; } /*slide CSS main*/ .slide-items { width: 90%; margin: 0px auto; margin-top: 100px; } .slick-slide { margin: 10px; } .slick-slide img { width: 100%; border: 0px solid #fff; } /*slider da home */ .thumb { width: 150px; /* tamanho fixo das miniaturas */ height: auto; object-fit: cover; transition: transform 0.3s ease; } .thumb:hover { transform: scale(1.1); cursor: pointer; } /* Opcional: ajusta os controles pra ficarem visíveis sobre bg escuro */ .carousel-control-prev-icon, .carousel-control-next-icon { filter: invert(1) brightness(2); } .carousel-inner { overflow: hidden; /* impede o vazamento visual */ position: relative; } .carousel-track { display: flex; width: 200%; will-change: transform; backface-visibility: hidden; animation: scroll 30s linear infinite; } .carousel-track:hover { animation-play-state: paused; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } /* move só o track, não o container */ } @media (max-width: 992px) { .thumb { width: 120px; } } @media (max-width: 576px) { .thumb { width: 90px; } } /*FIM slider da home */ /*modal lightbox da home */ /* Garantir contexto e camada correta */ .modal-content { position: relative; /* base para o button */ overflow: visible; /* previne imagem de tampar o botão */ } /* imagem */ #modalImage { position: relative; z-index: 1; /* deixa a imagem atrás do botão */ } /* botão do X */ .btn-close { z-index: 2; /* fica acima da imagem */ filter: invert(1); opacity: 0.8; transition: transform 0.25s, opacity 0.25s; } .btn-close:hover { opacity: 1; transform: scale(1.3); } /* fundo bonito */ .modal-backdrop.show { background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(6px); } /*---------------Overlay para carregar pagina---------------*/ .loader { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 50, 66, 0.911); z-index: 9998; justify-content: center; align-items: center; } .loader.active { display: flex; } .spinner { /* 1. Defina o tamanho de UM ÚNICO frame */ width: 236px; /* (Use a largura de 1 das suas imagens) */ height: 110px; /* (Use a altura de 1 das suas imagens) */ /* 2. Carregue a sua imagem de sprite inteira */ background-image: url('../images/wait/waiting.png'); /* <-- Altere o caminho/nome se necessário */ background-repeat: no-repeat; /* 3. A MÁGICA: Animação "steps(4)" Isto diz ao CSS para "cortar" a animação em 4 passos (frames) */ animation: play-sprite 0.6s steps(4) infinite; /* 0.6s = duração, 4 = frames */ /* (Opcional) Para pixel art não ficar "borrado" */ image-rendering: pixelated; image-rendering: -moz-crisp-edges; } @keyframes play-sprite { from { /* Inicia na Posição 0 (Frame 1) */ background-position: 0px 0px; } to { /* Termina na Posição -240px (Frame 4) */ /* (Use a largura TOTAL da sua sprite sheet, ex: 4 * 60px = 240px) */ background-position: -944px 0px; } } /*---------------FIM Overlay para carregar pagina---------------*/