/* ------------------------------------------------------------------ destinoideal.pt — ecrã de espera / redirecionamento public/css/destinoideal.css Cores retiradas do logótipo: laranja #F45B00, azul #00A8F0 / #0060B4 ------------------------------------------------------------------ */ /* Paleta do tema (site_pages.tema = 'destino' -> ) */ .tema-destino { --oc-cor: #00A8F0; /* azul de marca (claro) */ --oc-banda: #0060B4; /* azul de marca (escuro) */ --oc-titulo: #FFFFFF; --oc-destaque: #F45B00; /* laranja de marca */ --oc-texto: rgba(255, 255, 255, .92); --oc-tenue: rgba(255, 255, 255, .70); } /* ------------------------------ base ------------------------------ */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; } body.tema-destino { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 6vh 1.5rem; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--oc-texto); text-align: center; background: var(--oc-banda); background-image: radial-gradient(ellipse at 50% -10%, #7FD4FF 0%, rgba(127, 212, 255, 0) 55%), linear-gradient(170deg, var(--oc-cor) 0%, var(--oc-banda) 78%); background-attachment: fixed; } /* ---------------------------- estrutura --------------------------- */ .di-espera { width: 100%; max-width: 34rem; margin: 0 auto; } .di-logo { display: block; width: min(78vw, 22rem); height: auto; margin: 0 auto 2.25rem; filter: drop-shadow(0 .5rem 1.5rem rgba(0, 32, 64, .28)); } .di-mensagem { margin: 0 0 1.5rem; font-size: clamp(1rem, 3.4vw, 1.2rem); font-weight: 500; line-height: 1.5; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0, 32, 64, .25); } /* ------------------------- barra de espera ------------------------ */ /* A barra é decorativa e só existe com JS: sem JS não há temporizador nenhum a acompanhar, e uma barra parada seria uma mentira visual. */ .di-barra { display: none; } html.js .di-barra { display: block; width: min(100%, 15rem); height: .3rem; margin: 0 auto 1.75rem; overflow: hidden; background: rgba(255, 255, 255, .28); border-radius: 999px; } html.js .di-barra > i { display: block; width: 0; height: 100%; background: var(--oc-destaque); border-radius: inherit; /* A duração é injetada pelo JS a partir do mesmo valor que controla o redirecionamento — barra e temporizador nunca ficam dessincronizados. */ animation: di-progresso var(--di-espera, 1.5s) linear forwards; } @keyframes di-progresso { from { width: 0; } to { width: 100%; } } /* --------------------------- alternativa -------------------------- */ /* Visível sempre, em qualquer cenário: se o JS falhar e o meta refresh for bloqueado, esta é a única saída do visitante. */ .di-alternativa { margin: 0; font-size: .95rem; color: var(--oc-tenue); } .di-alternativa a { color: #FFFFFF; font-weight: 600; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: .08em; } .di-alternativa a:hover, .di-alternativa a:focus-visible { color: var(--oc-destaque); } .di-alternativa a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: .25rem; border-radius: .15rem; } /* --------------------------- animações ---------------------------- */ /* Só entram depois de o script pôr a classe 'js' no . Sem JS o conteúdo aparece de imediato, sem estados escondidos. */ html.js .di-logo, html.js .di-mensagem { opacity: 0; animation: di-entrada .5s ease-out forwards; } html.js .di-mensagem { animation-delay: .12s; } @keyframes di-entrada { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html.js .di-logo, html.js .di-mensagem { opacity: 1; animation: none; } html.js .di-barra > i { width: 100%; animation: none; } }