/* ===== Pagina /fnrh — check-in online (Fnrh eSolution) ===== O sistema de check-in e de terceiro e vem num iframe. A pagina existe so para emoldura-lo: cabecalho do hotel em cima, iframe ocupando o resto da tela. Carregada por inc/fnrh.php, apenas nas paginas com o template template-fnrh.php. Sem rodape e sem scroll na pagina: o formulario do sistema ja rola por dentro do iframe, e duas barras de rolagem confundem quem esta preenchendo. */ /* O #header do tema e fixo (70 px; 65 px abaixo de 800 px) e o body precisa reservar essa faixa. O tema ja fazia isso, mas o global-styles do WordPress entra depois no e zera o padding do body — por isso a regra volta aqui, agora com a classe da pagina, que ganha por especificidade. Padding no body, e nao margem no #fnrh: como o body tem height: 100% e box-sizing: border-box, o padding cabe dentro da janela e nao sobra scroll. */ body.fnrh-tela { padding: 70px 0 0; overflow: hidden; } body.fnrh-tela #footer, body.fnrh-tela #bottom { display: none; } .fnrh { position: relative; display: block; width: 100%; height: calc(100vh - 70px); height: calc(100dvh - 70px); /* dvh: a barra de endereco do celular nao corta o rodape do formulario */ overflow: hidden; background-color: #f8fafc; /* mesmo cinza claro do sistema, para nao piscar branco */ } .fnrh [hidden] { display: none !important; } .fnrh-frame { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; } /* fica atras do iframe: some sozinho quando o sistema pinta por cima, e por isso nao depende de JS para sumir */ .fnrh-carregando { position: absolute; z-index: 0; top: 50%; left: 0; width: 100%; transform: translateY(-50%); color: #64748b; font-size: 14px; line-height: 1.4; text-align: center; } .fnrh-giro { display: inline-block; width: 16px; height: 16px; margin-right: 8px; border: 2px solid #cbd5e1; border-top-color: #64748b; border-radius: 50%; vertical-align: -3px; animation: fnrh-giro 1s linear infinite; } @keyframes fnrh-giro { to { transform: rotate(360deg); } } /* saida de emergencia, so quando o iframe nao carrega */ .fnrh-falhou { position: absolute; z-index: 2; top: 0; left: 0; display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px; background-color: #f8fafc; text-align: center; } .fnrh-falhou p { margin-bottom: 20px; color: #1e293b; font-size: 16px; line-height: 1.5; } .fnrh-botao { display: inline-block; padding: 12px 24px; border-radius: 100px; background-color: var(--blue); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; } .fnrh-botao:hover { opacity: .9; } /* titulo so para leitor de tela e busca */ .fnrh-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } @media (max-width: 800px) { body.fnrh-tela { padding-top: 65px; } .fnrh { height: calc(100vh - 65px); height: calc(100dvh - 65px); } }