/* ============================================================ MARTEC — Sistema de Loading Screen Arquivo: styles/martec_loading.css Inclua este CSS em todas as páginas que tiverem ============================================================ */ /* Oculta o conteúdo da página enquanto carrega */ body.martec-loading > *:not(#martec-loader) { visibility: hidden; pointer-events: none; } /* ── Overlay de fundo ── */ #martec-loader { position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; /* Gradiente igual ao topbar do Martec */ background: linear-gradient(-175deg, #009a9d 0%, #001919 100%); /* Transição de saída suave */ opacity: 1; transition: opacity 0.55s ease, visibility 0.55s ease; } /* Estado "saindo" — acionado via JS quando tudo carregou */ #martec-loader.martec-loader-hide { opacity: 0; visibility: hidden; pointer-events: none; } /* ── Logo / nome do site ── */ #martec-loader .ml-brand { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: ml-fadein 0.6s ease both; } #martec-loader .ml-brand-name { font-family: 'maximize', 'Anton', Arial, sans-serif; font-size: 2.4em; font-weight: bold; letter-spacing: .12em; color: #ffffff; text-shadow: 0 2px 12px rgba(0,0,0,.35); } #martec-loader .ml-brand-slogan { font-family: 'opensans', Arial, sans-serif; font-size: .85em; letter-spacing: .08em; color: rgba(255,255,255,.7); } /* ── Área da barra de progresso ── */ #martec-loader .ml-bar-wrapper { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(340px, 80vw); animation: ml-fadein 0.7s ease 0.1s both; } /* Trilha da barra */ #martec-loader .ml-track { width: 100%; height: 5px; background: rgba(255,255,255,.18); border-radius: 99px; overflow: hidden; position: relative; } /* Barra de progresso animada (indeterminada) */ #martec-loader .ml-bar { position: absolute; top: 0; left: -60%; width: 55%; height: 100%; border-radius: 99px; /* Gradiente nas cores claras do site */ background: linear-gradient(90deg, rgba(188,215,215,0) 0%, #bcd7d7 40%, #ffffff 60%, rgba(188,215,215,0) 100% ); box-shadow: 0 0 12px rgba(188,215,215,.6); animation: ml-slide 1.6s ease-in-out infinite; } /* Texto de status abaixo da barra */ #martec-loader .ml-status { font-family: 'opensans', Arial, sans-serif; font-size: .78em; letter-spacing: .06em; color: rgba(255,255,255,.55); text-transform: uppercase; height: 1.2em; transition: opacity 0.3s; } /* ── Três pontinhos pulsantes ── */ #martec-loader .ml-dots { display: flex; gap: 8px; animation: ml-fadein 0.8s ease 0.2s both; } #martec-loader .ml-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); animation: ml-pulse 1.4s ease-in-out infinite; } #martec-loader .ml-dots span:nth-child(2) { animation-delay: .2s; } #martec-loader .ml-dots span:nth-child(3) { animation-delay: .4s; } /* ── Animações ── */ @keyframes ml-slide { 0% { left: -60%; } 100% { left: 110%; } } @keyframes ml-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } } @keyframes ml-fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }