/* --------------------------------------------------------------------------- The travel-guide reader — one flipbook viewer for the whole site. Used by the public guide directory, the homepage carousel and the partner editor, which are three different asset bundles with three different icon fonts and colour scales. So this file leans on nothing: fixed colours, inline SVG icons, and a selector root of its own. A host can retint it by setting --gqr-accent, but nothing here breaks if it does not. Deliberately not scoped to .gqv2 or .gq-body — the panel is appended to , which on some pages sits outside either. --------------------------------------------------------------------------- */ .gqr { --gqr-accent: #FFD98A; --gqr-panel: #10192a; position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 40px; font-family: inherit; } /* Belt and braces: some bundles set a display on everything, which outranks the user-agent rule for [hidden]. */ .gqr[hidden] { display: none; } .gqr-backdrop { position: absolute; inset: 0; background: rgba(9, 18, 31, .74); backdrop-filter: blur(3px); cursor: pointer; } .gqr-panel { position: relative; z-index: 2; display: flex; flex-direction: column; /* Wide enough for the two-page spread Heyzine lays out; the cap stops it stretching into a letterbox on an ultrawide screen. */ width: min(1180px, 100%); height: 100%; max-height: 860px; overflow: hidden; border-radius: 14px; background: var(--gqr-panel); box-shadow: 0 24px 70px rgba(0, 0, 0, .45); } .gqr-bar { display: flex; align-items: center; gap: 14px; padding: 11px 14px; color: #fff; } .gqr-meta { flex: 1; min-width: 0; } .gqr-loc { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gqr-accent); } .gqr-meta h3 { margin: 2px 0 0; font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gqr-meta:not(.has-loc) h3 { margin-top: 0; } .gqr-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .gqr-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; background: transparent; color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background .18s ease; } .gqr-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; } .gqr-btn svg { width: 14px; height: 14px; flex: 0 0 auto; fill: currentColor; } .gqr-stage { position: relative; flex: 1; min-height: 0; margin: 0 14px 14px; border-radius: 10px; overflow: hidden; background: #fff; } .gqr-stage iframe { position: relative; z-index: 2; display: block; width: 100%; height: 100%; border: 0; } /* Under the frame, so it is covered the moment the guide paints — no load event needed, and none arrives reliably from a cross-origin frame. */ .gqr-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .gqr-wait span { width: 34px; height: 34px; border: 3px solid rgba(16, 25, 42, .18); border-top-color: var(--gqr-panel); border-radius: 50%; animation: gqr-spin .8s linear infinite; } @keyframes gqr-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .gqr-wait span { animation-duration: 2.4s; } } /* Fill window: the inset and the caps go, the shell stays. */ .gqr.is-wide { padding: 0; } .gqr.is-wide .gqr-panel { width: 100%; max-height: none; border-radius: 0; } /* Full screen. The panel is the fullscreen element so its bar comes along, which means it paints its own background — the backdrop is no longer drawn. */ .gqr-panel:fullscreen { width: 100%; max-height: none; border-radius: 0; background: var(--gqr-panel); } @media (max-width: 900px) { /* Keep the inset on a small screen, just less of it. */ .gqr { padding: 14px; } .gqr-stage { margin: 0 10px 10px; } /* Labels go, icons stay: four buttons will not fit spelled out. */ .gqr-btn span { display: none; } .gqr-btn { padding: 8px; } } @media (max-width: 560px) { .gqr { padding: 0; } .gqr-panel { max-height: none; border-radius: 0; } /* Filling the window is what it already does here. */ .gqr-btn[data-gqr-wide] { display: none; } }