@font-face { font-family: "Neue Haas Grotesk"; src: url("./assets/NeueHaasGroteskDisplay-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; } :root { --bg: #e8e9ef; --ink: #2a2b29; --blue: #4040f2; --ease-quint: cubic-bezier(0.22, 1, 0.36, 1); /* easeOutQuint */ } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } #scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: grab; touch-action: none; } #scene:active { cursor: grabbing; } /* ---- Loader ---- */ #loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--bg); transition: opacity 0.8s var(--ease-quint); } #loader span { font-size: clamp(28px, 7vw, 64px); letter-spacing: 0.02em; font-weight: 700; opacity: 0.15; animation: pulse 1.4s ease-in-out infinite; } #loader.hide { opacity: 0; pointer-events: none; } @keyframes pulse { 0%,100% { opacity: 0.12; } 50% { opacity: 0.35; } } /* ---- HUD ---- * Each element is centred with a transform; the entrance adds a small * offset + fade that resolves when gets .revealed (easeOutQuint). */ /* "Soon." — left edge, 50px in, vertically centred (Figma 1:30) */ .soon { position: fixed; left: 50px; top: 50%; transform: translateY(-50%) translateX(-20px); opacity: 0; z-index: 10; color: var(--ink); font-family: "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif; font-weight: 400; /* Figma uses 55 Roman (regular) */ font-size: clamp(40px, 11vw, 92.75px); line-height: 1; letter-spacing: -0.025em; /* Illustrator tracking -25 */ pointer-events: none; mix-blend-mode: multiply; transition: opacity 1.5s var(--ease-quint), transform 1.5s var(--ease-quint); } /* FREITAG logo — right edge, 50px in, vertically centred (Figma 1:18, 375px wide) */ .logo { position: fixed; right: 50px; top: 50%; transform: translateY(-50%) translateX(20px); opacity: 0; width: min(375px, 40vw); height: auto; z-index: 10; pointer-events: none; transition: opacity 1.5s var(--ease-quint), transform 1.5s var(--ease-quint); transition-delay: 0.35s; } /* ---- Ticker pill — bottom centre, 50px from bottom (Figma 1:64) ---- */ .ticker-pill { position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%) translateY(16px); opacity: 0; z-index: 10; width: 220px; background: var(--blue); border-radius: 0; padding: 8px; overflow: hidden; display: flex; align-items: center; pointer-events: none; transition: opacity 1.5s var(--ease-quint), transform 1.5s var(--ease-quint); transition-delay: 0.7s; } /* entrance resolved */ body.revealed .soon { opacity: 1; transform: translateY(-50%) translateX(0); } body.revealed .logo { opacity: 1; transform: translateY(-50%) translateX(0); } body.revealed .ticker-pill { opacity: 1; transform: translateX(-50%) translateY(0); } .ticker-track { display: flex; flex: 0 0 auto; /* never let the pill's flexbox shrink the track */ flex-wrap: nowrap; width: max-content; /* always size to the (duplicated) content */ white-space: nowrap; will-change: transform; animation: marquee 18s linear infinite; } .ticker-track span { display: inline-block; padding: 0 18px; color: var(--bg); font-family: "Helvetica Neue Condensed", "Arial Narrow", "Neue Haas Grotesk", sans-serif; font-stretch: condensed; font-weight: 600; font-size: 17px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 760px) { /* hug the edges (~10px), shrink the lateral elements ~30%, drop the ticker */ .soon { left: 10px; font-size: clamp(26px, 7.7vw, 65px); } .logo { right: 10px; width: min(262px, 32vw); } .ticker-pill { display: none; } } /* respect reduced-motion: show the HUD immediately, no slide */ @media (prefers-reduced-motion: reduce) { .soon, .logo, .ticker-pill { transition: none; opacity: 1; } body.revealed .soon { transform: translateY(-50%); } body.revealed .logo { transform: translateY(-50%); } body.revealed .ticker-pill { transform: translateX(-50%); } .soon { transform: translateY(-50%); } .logo { transform: translateY(-50%); } .ticker-pill { transform: translateX(-50%); } }