@font-face { font-display: swap; font-family: "MetaPro"; font-style: normal; font-weight: 400; src: url(https://cdn.egger.com/fonts/MetaPro.woff2) format("woff2"); } @font-face { font-display: swap; font-family: "MetaPro"; font-style: normal; font-weight: 500; src: url(https://cdn.egger.com/fonts/MetaPro-Medium.woff2) format("woff2"); } @font-face { font-display: swap; font-family: "MetaPro"; font-style: normal; font-weight: 700; src: url(https://cdn.egger.com/fonts/MetaPro-Bold.woff2) format("woff2"); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --egger-red: #e31937; --egger-red-hover: #d4082c; --bg: #ffffff; --bg-surface: #f5f5f5; --text: #101010; --text-muted: #666666; --border: #ddd; /* Shallower than the 1.43x that "start 70% zoomed in" implies, because the source is 1920 wide and a 43% upscale is visibly soft at the start of the pull. Raise this if the designer re-exports at 2880 or wider. */ --slide-zoom-from: 1.18; /* Longer than a typical load, so the pull never finishes and sits still. */ --slide-zoom-duration: 22s; --slide-fade: 700ms; } html, body { height: 100%; overflow: hidden; } body { font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; background: var(--bg); color: var(--text); } /* --- Landing State --- */ #landing { display: flex; flex-direction: column; align-items: center; justify-content: center; /* The terms block makes this page tall enough to overflow a short laptop viewport, which would put Start out of reach. `safe center` keeps the centring but stops it clipping the top once it scrolls; browsers without it fall back to the plain `center` above. */ justify-content: safe center; height: 100%; overflow-y: auto; padding: 2rem 1.5rem; gap: 2rem; } #landing .logo { width: 200px; margin-left: 44px; } #landing .landing-heading { text-align: center; } #landing h1 { font-size: 2rem; line-height: 1.25; font-weight: 500; letter-spacing: 0.05em; } /* --- Demo title --- */ /* Names the configuration this tab is running (?title=Windows Gen6n_pro), so several demos open side by side stay tellable apart. */ .demo-title { font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); } #landing .demo-title { margin-top: 0.875rem; } .stream-header .demo-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 1rem; } #landing .controls { display: flex; flex-direction: column; align-items: center; gap: 2rem; margin-top: 4rem; } /* Only while the terms are on screen — once accepted, the landing page keeps its original airier spacing. */ #disclaimer:not([hidden]) ~ .controls { margin-top: 2rem; } /* --- Terms disclaimer --- */ /* Body copy inherits Arial Black from , which is unreadable at paragraph length, so this block opts into the regular-weight brand face. */ .disclaimer { max-width: 34rem; font-family: "MetaPro", Arial, Helvetica, sans-serif; font-weight: 400; text-align: left; } .disclaimer-accept { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.5rem; font-size: 1rem; cursor: pointer; } .disclaimer-accept input { flex-shrink: 0; width: 1.125rem; height: 1.125rem; accent-color: var(--egger-red); cursor: pointer; } .disclaimer h2 { margin-bottom: 1rem; font-size: 1rem; font-weight: 700; line-height: 1.4; } .disclaimer p { font-size: 0.9375rem; line-height: 1.55; } /* --- Buttons --- */ .btn-primary { background: var(--egger-red); color: #fff; border: none; padding: 0.75rem 2rem; font-family: inherit; font-size: 1rem; font-weight: 500; text-transform: uppercase; border-radius: 4px; cursor: pointer; transition: background 0.15s; } .btn-primary:hover { background: var(--egger-red-hover); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } /* --- Streaming State --- */ #streaming { display: none; flex-direction: column; height: 100%; } #streaming.active { display: flex; } #landing.hidden { display: none; } .stream-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: var(--bg-surface); border-bottom: 1px solid var(--border); flex-shrink: 0; } .stream-header .logo { height: 28px; } .stream-actions { display: flex; align-items: center; gap: 0.5rem; } .btn-end { background: var(--egger-red); color: #fff; border: none; padding: 0.4rem 1rem; font-family: inherit; font-size: 0.8rem; text-transform: uppercase; border-radius: 4px; cursor: pointer; transition: background 0.15s; } .btn-end:hover { background: var(--egger-red-hover); } .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); padding: 0.4rem 1rem; font-family: inherit; font-size: 0.8rem; text-transform: uppercase; border-radius: 4px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .btn-secondary:hover { background: var(--bg); border-color: var(--text-muted); } #stream-container { flex: 1; position: relative; background: #000; overflow: hidden; } #stream-container video { width: 100%; height: 100%; object-fit: contain; } /* --- Loading Overlay --- */ #loading { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 100; } #loading.active { display: block; } /* Fades out to reveal the stream underneath, which is already live and composited by this point. */ #loading.is-dismissing { opacity: 0; transition: opacity 400ms ease-out; } /* Clips the zoom. Has to be a separate element from the scaled wrapper — scaling the clipper would scale the clip along with it. */ #loading-stage { position: absolute; inset: 0; overflow: hidden; } /* One continuous pull-back across the whole build-up, on the wrapper rather than on individual slides, so swapping slides never interrupts the camera move. The room assembles itself as the camera draws back. */ #loading-slides { position: absolute; inset: 0; transform: scale(var(--slide-zoom-from)); } #loading-slides.is-running { animation: slide-zoom-out var(--slide-zoom-duration) ease-out forwards; } @keyframes slide-zoom-out { to { transform: scale(1); } } .loading-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--slide-fade) ease-in-out; } /* Slides are opaque and stack in document order, so a slide fading in simply covers the one before it. Nothing is ever faded back out, which means there is no window where two half-transparent slides show the background through them. */ .loading-slide.is-active { opacity: 1; } @media (prefers-reduced-motion: reduce) { #loading-slides, #loading-slides.is-running { animation: none; transform: none; } .loading-slide { transition-duration: 200ms; } } /* --- Error Message --- */ #error-message { color: var(--egger-red); font-size: 0.875rem; min-height: 1.25rem; }