/* * Quantum Compass — companion site * -------------------------------- * Layout is authored at the Figma canvas size (2227.5 x 3960, a 9:16 portrait * touchscreen) and scaled to fit whatever display it lands on. Every dimension * below is therefore a literal Figma pixel value: what you read here is what * you can measure in the design file, which keeps the two in sync. * * app.js sets --scale on to min(vw / 2227.5, vh / 3960). */ /* ------------------------------------------------------------------ */ /* Fonts */ /* ------------------------------------------------------------------ */ /* * The design specifies Obvia Narrow (Light / Book) with TT Modernoir for * display use. Both are commercial. See README.md — an Adobe Fonts web * project needs a live internet connection, which an offline kiosk will not * have. Drop self-hostable .woff2 files into /fonts and these rules pick * them up; until then the fallback stack below is used. */ @font-face { font-family: 'Obvia Narrow'; src: url('../fonts/ObviaNarrow-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Obvia Narrow'; src: url('../fonts/ObviaNarrow-Book.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* Palette — from the "Manual de estilo" page of the Figma file. */ --c-black: #000000; --c-white: #ffffff; --c-paper: #e5e5e3; --c-grey: #b5b4bc; --c-stone: #504b45; --c-inactive: #808080; /* language switcher, unselected */ --c-gold: #efac37; --c-gold-pale: #fdeb6f; --c-orange: #fe9132; --c-rust: #9f291b; /* Type */ --font-body: 'Obvia Narrow', 'Barlow Semi Condensed', 'Roboto Condensed', 'HelveticaNeue-CondensedLight', 'Arial Narrow', system-ui, sans-serif; --fs-title: 48px; --fs-body: 30px; --fs-label: 24px; /* * 30px, not a looser guess: Figma sets every text style to the font's * intrinsic line height, which for Obvia Narrow is a 1.0 ratio. Using 36px * made every paragraph 20% taller than the design and pushed slide 1's body * into the illustration. */ --lh-body: 30px; /* Canvas */ --canvas-w: 2227.5px; --canvas-h: 3960px; /* Shared geometry, measured from the Figma frames */ --margin-x: 311px; /* left text margin on slides */ --header-y: 453px; /* logo top edge */ } /* ------------------------------------------------------------------ */ /* Reset / kiosk hardening */ /* ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--c-black); overflow: hidden; } body { font-family: var(--font-body); font-weight: 300; color: var(--c-white); /* An unattended touchscreen should not behave like a browser: no text selection, no long-press callout, no double-tap zoom, no blue tap flash. */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* Hide the cursor on the kiosk itself. app.js removes this class when a real mouse moves, so the site stays usable on a laptop for review. */ body.kiosk-cursor-hidden * { cursor: none !important; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* ------------------------------------------------------------------ */ /* Stage — the fixed design canvas, scaled to the viewport */ /* ------------------------------------------------------------------ */ .viewport { position: fixed; inset: 0; background: var(--c-black); overflow: hidden; } /* * The stage is taken out of flow and centred with translate(-50%, -50%) rather * than by a flex/grid parent. Its unscaled box is 2227.5 x 3960 — far larger * than any viewport — and a grid track sized to that content cannot centre it. * Translating from the midpoint sidesteps the layout box entirely, so only the * transformed result is ever positioned. */ .stage { position: absolute; left: 50%; top: 50%; width: var(--canvas-w); height: var(--canvas-h); background: var(--c-black); transform: translate(-50%, -50%) scale(var(--scale, 1)); transform-origin: center center; } /* * Every screen stacks in the same place; only one is visible at a time. * The fade is an animation rather than a transition: a transition needs the * element to exist for a frame in its start state, which meant waiting for * requestAnimationFrame — and that does not fire in a background tab. */ .screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; } .screen.is-active { opacity: 1; visibility: visible; animation: qc-screen-fade 320ms ease both; } @keyframes qc-screen-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .screen.is-active { animation: none; } } /* ------------------------------------------------------------------ */ /* Header — logo + language switcher */ /* ------------------------------------------------------------------ */ /* Also the home button — see buildHeader() in app.js. */ .logo { position: absolute; left: 209.5px; top: var(--header-y); width: 122.84px; height: 122.84px; padding: 0; transition: opacity 160ms ease; } .logo img { width: 100%; height: 100%; } .logo:active { opacity: 0.5; } .langbar { position: absolute; left: 1332.5px; top: 481px; display: flex; gap: 16px; } .lang { width: 206.64px; height: 65.11px; border: 2px solid transparent; border-radius: 999px; font-size: var(--fs-body); line-height: 1; text-transform: uppercase; color: var(--c-inactive); display: grid; place-items: center; transition: color 160ms ease, border-color 160ms ease; } /* Unselected languages keep a hairline outline; the active one is solid white with white text, matching the pills in the design. */ .lang:not(.is-active) { border-color: rgba(255, 255, 255, 0.45); } .lang.is-active { color: var(--c-white); border-color: var(--c-white); font-weight: 400; } /* ------------------------------------------------------------------ */ /* Slide screens */ /* ------------------------------------------------------------------ */ .slide__title { position: absolute; left: var(--margin-x); top: 774px; width: 1400px; font-size: var(--fs-title); font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; } .slide__body { position: absolute; left: var(--margin-x); top: 856px; /* 620px on every slide but the first, which the design sets wider. */ width: 620px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-white); } .slide__body p + p { margin-top: var(--lh-body); } /* * Copy carries deliberate hard breaks from the design, stored as "\a" in * content.js. pre-line honours those while leaving normal wrapping intact — * so a break the designer put in survives, and everything else still reflows. */ .slide__title, .slide__body p, .home__block h2, .home__block p, .about__section h2, .about__section p, .home__video-placeholder { white-space: pre-line; } /* The illustration sits in the same place on every slide. */ .slide__figure { position: absolute; left: 358px; top: 1362px; width: 1626.2px; height: 1500.1px; } /* Slide 1 carries the longest copy and is given a wider column for it. */ .slide--1 .slide__body { width: 680px; } /* Three slides sit slightly off the common position in the design. */ .slide--1 .slide__figure { left: 361.6px; top: 1355.9px; } .slide--words .slide__figure { left: 355.6px; top: 1344.9px; } .slide--6 .slide__figure { left: 362px; top: 1377px; } .slide__figure img { width: 100%; height: 100%; } /* * Callout labels and the cat now live INSIDE .slide__figure and are positioned * by percentage (set in app.js), so the whole scene scales as one unit. The * percentages were derived from the design coordinates, so the kiosk renders * exactly as before. */ .scene-label { position: absolute; font-size: var(--fs-label); font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; color: var(--c-white); } /* Numbered markers are a small-screen affordance; the kiosk shows the words. */ .scene-label__marker { display: none; } /* The legend that decodes those markers is likewise small-screen only. */ .scene-legend { display: none; } /* 109.4 x 83.8 design px expressed against the 1626.2 x 1500.1 scene. */ .slide__cat { position: absolute; width: 6.73%; height: 5.59%; } .slide__cat img { width: 100%; height: 100%; } /* ------------------------------------------------------------------ */ /* Prev / next chevrons */ /* ------------------------------------------------------------------ */ .nav-arrow { position: absolute; top: 3113px; width: 146.43px; height: 282.29px; display: grid; place-items: center; transition: opacity 160ms ease; } .nav-arrow img { width: 100%; height: 100%; } .nav-arrow--next { left: 1844px; } .nav-arrow--prev { left: 235px; transform: scaleX(-1); } .nav-arrow[hidden] { display: none; } .nav-arrow:active { opacity: 0.5; } /* ------------------------------------------------------------------ */ /* Home screen */ /* ------------------------------------------------------------------ */ .home__block { position: absolute; width: 850px; } /* Left column, upper text block. */ .home__block--one { left: 241px; top: 785px; } /* Right column, lower text block. */ .home__block--two { left: 1141px; top: 2317px; } .home__block h2 { font-size: var(--fs-title); font-weight: 400; line-height: 1; text-transform: uppercase; margin-bottom: 64px; } .home__block p { font-size: var(--fs-body); line-height: var(--lh-body); } .home__block p + p { margin-top: var(--lh-body); } .home__video { position: absolute; top: 1543px; width: 850px; height: 412px; border-radius: 8px; overflow: hidden; background: #0d0d0d; border: 1px solid rgba(255, 255, 255, 0.18); display: grid; place-items: center; } .home__video--left { left: 241px; } .home__video--right { left: 1138px; } .home__video video { width: 100%; height: 100%; object-fit: cover; } /* Shown until the real .mp4 files are dropped in; see README. */ .home__video-placeholder { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-grey); text-align: center; } .home__prompt { position: absolute; left: 0; right: 0; top: 3052px; text-align: center; font-size: var(--fs-body); line-height: 1; } .home__actions { position: absolute; left: 587px; top: 3203px; display: flex; gap: 54px; } .btn { width: 500px; height: 100px; border-radius: 999px; font-size: var(--fs-body); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; display: grid; place-items: center; transition: background-color 160ms ease, color 160ms ease; } .btn--solid { background: var(--c-white); color: var(--c-black); font-weight: 400; } .btn--outline { border: 2px solid var(--c-white); color: var(--c-white); } .btn:active { opacity: 0.7; } /* ------------------------------------------------------------------ */ /* About screen */ /* ------------------------------------------------------------------ */ /* * Each section is pinned to the top edge its title has in Figma rather than * flowed one after another. The gaps between them are uneven in the design * (the credits block sits far below the rest), so stacking with margins would * drift; absolute tops stay exact no matter how the copy reflows above them. */ .about__section { position: absolute; left: 585px; width: 1000px; } .about__section:nth-of-type(1) { top: 785px; } .about__section:nth-of-type(2) { top: 1401px; } .about__section:nth-of-type(3) { top: 1919px; } .about__credits { top: 3034px; } .about__section h2 { font-size: var(--fs-title); font-weight: 400; line-height: 1.08; text-transform: uppercase; margin-bottom: 68px; } .about__section p { font-size: var(--fs-body); line-height: var(--lh-body); } .about__section p + p { margin-top: var(--lh-body); } /* * The cat crosses a strip as wide as the text column, so it enters and exits at * the same margins the reading sits between. The clip is 800 x 286, black * background, white outline — `screen` blending drops the black out entirely, * which is robust to the slightly-lifted blacks that limited-range video * decoding can produce. */ .about__mark { position: absolute; left: 585px; top: 2560px; width: 1000px; aspect-ratio: 800 / 286; height: auto; } .about__cat { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: screen; } /* Shown only if the clip cannot play. */ .about__mark-still { width: 103.25px; height: 83.75px; margin: 0 auto; } .about__footer { position: absolute; left: 740px; top: 3563px; width: 768px; height: 185.74px; } /* ------------------------------------------------------------------ */ /* Screensaver / attract loop */ /* ------------------------------------------------------------------ */ /* * Sits above the stage rather than inside it. The stage is letterboxed to * preserve the 9:16 design, but the attract loop is a full-bleed video with * only a logo lockup on it — nothing that can be mis-proportioned — so it * covers the whole panel instead, and looks intentional on any display. */ .screensaver { position: fixed; inset: 0; z-index: 10; background: var(--c-black); opacity: 0; transition: opacity 600ms ease; } .screensaver.is-active { opacity: 1; } .screensaver__video { width: 100%; height: 100%; object-fit: cover; display: block; } /* * With no video file present the