/* =============================================================================
THE JAZZEEXSCAPES TERMINAL — v0.1 STYLES
=============================================================================
This file is organized top to bottom in the order things appear on screen:
1. Global page reset – basic browser cleanup
2. Stage & background – the full-screen photo and its scaling frame
3. Hotspots – the invisible glowing areas over each object
4. Tooltip – the floating gold label shown on hover
5. Modal – the placeholder popup shown on click
6. Intro boarding overlay – the one-time welcome splash screen
7. Departures Board close-up – the zoom-in + interactive board panel
8. Luxury Discovery Lights – the pulsing gold reflections on select objects
9. Member Access modal – the Benefit Butler card's dedicated popup
10. Concierge + Boarding Updates modals – the Concierge Bell's and
Branded Pen's dedicated popups
11. Passport page-turn modal – the Passport's animated opening sequence
12. Long-message modals – shared scroll boundary for the Welcome modal
13. Handwritten Note – the Coffee Mug's "Meet Jania" note, redesigned
Search for the ALL CAPS section headers below to jump to a section.
============================================================================= */
/* -----------------------------------------------------------------------------
1. GLOBAL PAGE RESET
-----------------------------------------------------------------------------
Small housekeeping rules so the page behaves predictably before we start
styling anything specific. */
* {
/* Makes width/height calculations include padding and border, so sizing
stays predictable everywhere else in this file. */
box-sizing: border-box;
}
html, body {
height: 100%; /* let our full-screen layout below use 100% height */
margin: 0; /* remove the browser's default page margin */
background: #05040a; /* near-black, shows as "letterbox" bars on odd screen shapes */
font-family: 'Georgia', 'Times New Roman', serif; /* elegant serif to match the luxury brand */
overflow: hidden; /* prevents scrollbars from appearing */
/* MOBILE FIX (2026-07-26): plain "overflow: hidden" above is NOT
enough on real mobile Safari/Chrome to stop the WHOLE PAGE from
bouncing/scrolling vertically — a live device test showed the Intro,
the Terminal, and modal content all behaving like one long scrolling
page instead of three separate fixed-viewport layers. "position:
fixed" here removes the page itself from the OS/WebView's native
scroll entirely (the standard fix for this class of iOS Safari bug),
and "overscroll-behavior: none" is the modern equivalent that also
stops rubber-band/scroll-chaining on browsers that support it.
Together they guarantee itself can never move, no matter what
a visitor's finger does — only ".stage-wrapper" below is ever
allowed to scroll (and only horizontally), never the page. */
position: fixed;
inset: 0;
width: 100%;
overscroll-behavior: none;
}
/* -----------------------------------------------------------------------------
2. STAGE & BACKGROUND
-----------------------------------------------------------------------------
".stage" holds the lobby photo and every hotspot.
CROP-AWARE HOTSPOT MIGRATION (2026-07-17): this used to lock .stage to
the background photo's own 3:2 shape (1536 x 1024, matching the old
lobby-background3.png) so hotspots could stay aligned with simple
percentages — but that's also what caused black letterbox bars on any
screen whose own shape didn't match the photo's. .stage now simply
fills the viewport completely (100vw x 100vh, no locked ratio), and
".stage .bg" below uses "object-fit: cover" — the same full-bleed,
crop-to-fill technique validated in terminal-remastered-preview.html —
so the background always fills edge-to-edge with no bars, on any
screen shape. Hotspots are no longer positioned with CSS percentages at
all: js/script.js now computes each one's on-screen position in real
pixels from the artwork's own fixed coordinate space, recalculated on
every resize using the same scale/crop math "cover" itself uses (see
"COVER-FILL / CROP-AWARE POSITIONING ENGINE" in js/script.js, right
above its Section 3) — that's what keeps every hotspot correctly
attached to its object despite this crop. */
.stage-wrapper {
/* A full-screen flex box holding .stage. Since .stage now always fills
it completely (100vw x 100vh, see below), there's no letterboxing
left for this to center — kept only because removing it would be an
unrelated structural change (see index.html), not because it still
does any centering work. */
width: 100vw;
height: 100vh;
/* "dvh" (dynamic viewport height) accounts for mobile browser chrome
(the address bar) showing/hiding as a visitor scrolls — falls back
silently to the plain "vh" value above on browsers that don't
support it. Matters most for the pannable mode below: getting the
available height right is what "an appropriate height for a phone
screen" (no cropping, no wasted letterbox space) actually depends on. */
height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
}
.stage {
position: relative; /* lets hotspots inside be positioned relative to this box */
/* Fills the viewport completely — no locked aspect ratio, no
letterboxing. ".stage .bg" below is what actually crops the
background photo to match this shape via "object-fit: cover". */
width: 100vw;
height: 100vh;
height: 100dvh;
overflow: hidden; /* keeps everything inside neatly clipped to this box */
/* Powers the Departures Board's "walk up and read it" zoom (see
style.css Section 7 and js/script.js Section 4). script.js sets
transform-origin dynamically (in real pixels, converted from the
board's fixed artwork-space position via the same cover transform
used for hotspots), then toggles the ".board-zoomed" class below to
animate the zoom. */
transition: transform 1s cubic-bezier(0.45, 0, 0.2, 1);
}
.stage.board-zoomed {
/* This value is duplicated as BOARD_ZOOM_SCALE in js/script.js — if you
change one, change the other so the zoom amount stays in sync. */
transform: scale(2.4);
}
.stage .bg {
/* Fill .stage (now the full viewport) completely, cropping whichever
axis of the photo overflows rather than stretching or distorting it —
the standard "background-size: cover" crop-to-fill technique, applied
here via object-fit since this is a real rather than a CSS
background-image. This is the change that eliminates the letterbox
bars the old 3:2-locked .stage used to show. */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
/* Small polish: stop visitors from accidentally selecting/dragging the
background image like a normal picture. */
user-select: none;
-webkit-user-drag: none;
}
/* -----------------------------------------------------------------------------
2B. MOBILE PANNABLE MODE
-----------------------------------------------------------------------------
On a portrait phone/tablet, "cover" (above) has to crop so much off the
sides that most of the scene — everything except a narrow center strip —
becomes impossible to see OR reach, since a hotspot that's been cropped
out of the viewport can never be hovered or tapped. That's not something
any background-position tweak can fix; the fundamental problem is that a
portrait screen is far narrower, relative to its height, than this
artwork's own wide 1672:941 shape.
This mode takes the opposite approach: instead of cropping the artwork
to fill the screen, it shows the ENTIRE artwork at whatever size exactly
fills the viewport on ONE axis — uncropped, undistorted — and lets it
overflow on the OTHER axis inside a native, pannable scroll container.
Real device testing found this same problem also affects mobile
LANDSCAPE: on a very wide phone screen (e.g. an iPhone in landscape),
"cover" fills the width exactly but still has to crop the artwork's
own height, cutting off the lower tabletop objects (Boarding Pass, Pen,
Benefits Butler Card) with no way to reach them. So js/script.js now
recognizes THREE display modes (see "MOBILE PANNABLE MODE" in
js/script.js, right after the cover-transform engine):
- portrait (".mode-portrait") — horizontal-only panning
- mobile landscape (".mode-landscape-pannable") — panning in whichever
axis(es) actually overflow
- cover (neither class) — desktop/laptop, completely
unchanged from production
Both pannable sub-modes share the ".mode-pannable" class for the rules
below; only "touch-action" (further down) differs between them, since
portrait is deliberately horizontal-only per the approved brief while
landscape needs both directions.
THE KEY INSIGHT that keeps this simple: the SAME cover-transform engine
that positions hotspots in "cover" mode (computeCoverTransform) needs
ZERO logic changes to also work here — it already implements the exact
"cover" math (scale = the LARGER of the two axis ratios), which
guarantees one axis exactly fills the available space and the other
meets-or-exceeds it. In "cover" mode that "exceeding" axis gets visually
cropped; in pannable mode, js/script.js instead sets ".stage" (below)
to that same exact natural size via inline styles and lets whichever
axis exceeds the viewport become scrollable — the artwork itself is
never cropped or distorted in either case, only the TREATMENT of the
overflow differs. Hotspots, Discovery Lights, and the tooltip all keep
working completely unchanged, since they're positioned from the same
coverTransform regardless of which mode is active. */
.mode-pannable .stage-wrapper {
/* No longer centers a fixed-size stage — instead becomes the native
pannable viewport. "-webkit-overflow-scrolling: touch" gives real
momentum/inertia scrolling on iOS Safari; this is a plain native
scroll container, not a custom drag/swipe implementation, so it
inherits each platform's own scroll physics and accessibility for
free (keyboard arrow keys, trackpad, mouse-wheel-shift, etc. all
already work on a scrollable element with no extra code). Both axes
are "auto" unconditionally, in BOTH pannable sub-modes — "auto" is a
no-op on whichever axis doesn't actually overflow (no scrollbar, no
pan capability, completely inert there), so one shared rule correctly
handles portrait (only ever overflows horizontally), landscape (may
overflow horizontally, vertically, or in rare cases both, depending
on how a given device's own ratio compares to the artwork's), without
needing separate rules per sub-mode. */
justify-content: flex-start;
align-items: flex-start;
overflow-x: auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox: hide the scrollbar for a cleaner look */
}
.mode-pannable .stage-wrapper::-webkit-scrollbar {
display: none; /* Chrome/Safari: hide the scrollbar */
}
/* MOBILE FIX (2026-07-26, refined 2026-07-30): without this, a real
finger-swipe could be interpreted by the browser as an attempt to
scroll/bounce the PAGE instead of panning this element — which is
exactly what produced the "long scrolling webpage" symptom found in
live device testing. Portrait stays horizontal-only ("pan-x") per the
approved brief; landscape allows both directions ("pan-x pan-y") since
either axis (or both) may need panning there depending on the device's
own ratio. (Paired with "position: fixed" on / above, which
removes the page's own ability to scroll at all, as a second layer of
the same fix.) */
.mode-portrait .stage-wrapper {
touch-action: pan-x;
}
.mode-landscape-pannable .stage-wrapper {
touch-action: pan-x pan-y;
}
.mode-pannable .stage {
/* No longer locked to the viewport size — js/script.js sets this
element's width/height directly (inline styles) to the artwork's
exact natural size at the current cover-scale, which is what makes
it larger than the viewport on whichever axis needs panning. See
applyPannableStageSize() in js/script.js. ".stage .bg" needs no
override here at all — it's always sized (by js/script.js) to
precisely the image's own aspect ratio in this mode, so the base
".stage .bg" rule above (object-fit: cover) already renders it with
zero cropping and zero distortion; a separate rule would just
duplicate it. */
position: relative;
flex-shrink: 0; /* never let the flex wrapper squeeze this narrower than its content */
overflow: visible; /* nothing needs clipping — the whole image is shown, never cropped */
}
/* -----------------------------------------------------------------------------
2C. MOBILE SWIPE HINT
-----------------------------------------------------------------------------
A small, temporary "Swipe to explore the Terminal" pill — shown ONLY the
first time the Terminal enters pannable mode each browser session (see
js/script.js), and only ever in pannable mode; never shown in "cover"
mode (desktop/landscape), so it can never appear where there's nothing
to swipe. Fades in, holds briefly, then fades out and removes itself —
js/script.js handles the timing; this just defines the two visual
states. */
.mobile-swipe-hint {
position: fixed;
left: 50%;
bottom: 28px;
transform: translateX(-50%);
z-index: 150; /* above hotspots/tooltip, below every modal */
padding: 10px 20px;
background: rgba(10, 8, 6, 0.85);
border: 1px solid rgba(212, 175, 90, 0.55);
border-radius: 20px;
color: #f3e2b3;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 13px;
letter-spacing: 0.04em;
white-space: nowrap;
pointer-events: none; /* purely informational — never blocks a swipe or tap underneath it */
opacity: 0;
transition: opacity 0.6s ease;
}
.mobile-swipe-hint.visible {
opacity: 1;
}
/* -----------------------------------------------------------------------------
3. HOTSPOTS
-----------------------------------------------------------------------------
Hotspots are invisible
elements that script.js creates and places
on top of the background image (one per object, like the globe, the
passport, the VIP Lounge door, etc). They're invisible until you hover
over them, at which point they glow gold. See js/script.js for the list
of hotspots and exactly where each one is positioned. */
.hotspot {
position: absolute; /* positioned using left/top/width/height set by script.js */
border-radius: 14%; /* soft, rounded-oval shape instead of a harsh rectangle */
outline: none; /* remove the browser's default focus rectangle (we add our own glow instead) */
background: transparent; /* invisible until hovered */
transition: box-shadow 0.35s ease, background 0.35s ease; /* smooth fade-in for the glow */
}
/* "interactive" hotspots open a popup when clicked, so show a pointing-hand cursor. */
.hotspot.interactive {
cursor: pointer;
}
/* "ambient" hotspots don't do anything on click, so keep the normal cursor. */
.hotspot.ambient {
cursor: default;
}
/* THE GOLD GLOW EFFECT
Triggered by mouse hover OR keyboard focus (so keyboard-only visitors get
the same visual feedback as mouse users). Combines a soft gold radial
"wash" of color with an outer glow and a subtle inner glow. */
.hotspot:hover,
.hotspot:focus-visible {
background: radial-gradient(
ellipse at center,
rgba(212, 175, 90, 0.20) 0%, /* warm gold, stronger in the middle */
rgba(212, 175, 90, 0.08) 55%, /* fading outward */
rgba(212, 175, 90, 0) 75% /* fully transparent at the edges */
);
box-shadow:
0 0 18px 4px rgba(212, 175, 90, 0.55), /* soft outer glow */
inset 0 0 24px 2px rgba(255, 221, 150, 0.35); /* soft inner glow */
}
/* Every tabletop object (Globe, Passport, Boarding Pass, Concierge Bell,
Coffee Mug, Branded Pen, "Benefit Butler Member Access" Card, Rolling
Luggage, Luxury Travel Bag) has its own permanent "Luxury Discovery
Light" — a warm reflection of golden-hour light — instead of this
rectangle glow (see Section 8). script.js tags their hotspot
s
with this extra class, and this rule simply cancels the glow above
for them. Everything else — including the Luxury Speaker / music
control, VIP Lounge door, private jet, lounge seating, lounge table,
and chandelier — keeps the rectangle glow exactly as-is; this rule
intentionally does NOT touch it. */
.hotspot.discovery-light-object:hover,
.hotspot.discovery-light-object:focus-visible {
background: none;
box-shadow: none;
}
/* A couple of ambient, pure-atmosphere objects (Orchid Arrangement, Coffee
Mug) get NO hover glow at all — not the rectangle, not a Discovery
Light. They should only ever reveal their tooltip label, never look
clickable. */
.hotspot.no-hover-glow:hover,
.hotspot.no-hover-glow:focus-visible {
background: none;
box-shadow: none;
}
/* DEBUG MODE
Adding a "debug" class to .stage (e.g. via the browser console:
`stage.classList.add("debug")`) makes these rules draw a permanent,
visible outline around every hotspot (even without hovering), which
makes it easy to check that hotspots are correctly lined up with the
artwork. There's no on-page button for this anymore (removed for
launch) — it's a console-only developer tool now, switched off by
default for real visitors. */
.stage.debug .hotspot {
background: rgba(212, 175, 90, 0.10);
box-shadow: inset 0 0 0 1px rgba(212, 175, 90, 0.65); /* gold outline = interactive */
}
.stage.debug .hotspot.ambient {
box-shadow: inset 0 0 0 1px rgba(150, 190, 212, 0.55); /* blue outline = ambient (easy to tell apart) */
}
/* -----------------------------------------------------------------------------
4. TOOLTIP (the floating gold label shown on hover)
-----------------------------------------------------------------------------
There is only ONE tooltip element in the whole page (see #tooltip in
index.html). script.js reuses it for every hotspot — filling in the text
and moving it to a new position — rather than creating a separate label
for each hotspot. */
.tooltip {
position: fixed; /* floats above everything, positioned via left/top set by script.js */
z-index: 20; /* stack above the stage/hotspots */
pointer-events: none; /* let clicks "pass through" the tooltip to whatever is behind it */
padding: 6px 14px;
border-radius: 4px;
background: rgba(10, 8, 6, 0.85);
border: 1px solid rgba(212, 175, 90, 0.6);
color: #f3e2b3;
font-size: 14px;
letter-spacing: 0.04em;
white-space: nowrap; /* keep the label on one line, never wrap */
/* Hidden by default (invisible + slightly lower position). The ".visible"
class below animates it into place. */
opacity: 0;
transform: translate(-50%, -12px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
/* script.js adds this class while a hotspot is hovered/focused. */
.tooltip.visible {
opacity: 1;
transform: translate(-50%, -20px); /* floats slightly higher once fully visible */
}
/* -----------------------------------------------------------------------------
5. MODAL (the placeholder popup shown when an interactive hotspot is clicked)
-----------------------------------------------------------------------------
Two parts: ".modal-overlay" is the dark, semi-transparent background that
covers the whole screen, and ".modal" is the actual popup box centered
on top of it. */
.modal-overlay {
position: fixed;
inset: 0; /* shorthand for top/right/bottom/left: 0 (covers full screen) */
/* Must stay above the Departures Board close-up's backdrop (z-index 90,
see Section 7) — a row inside that close-up can open this same modal,
and it needs to end up on TOP of the close-up, not hidden behind it. */
z-index: 95;
/* Hidden by default. script.js toggles the ".visible" class to reveal it. */
display: none;
align-items: center; /* center the modal box vertically... */
justify-content: center; /* ...and horizontally */
background: rgba(4, 3, 2, 0.72); /* dims the page behind the popup */
backdrop-filter: blur(2px); /* subtle blur for a premium, glassy feel */
}
.modal-overlay.visible {
display: flex;
}
.modal {
position: relative; /* lets the close button be positioned relative to this box */
width: min(420px, 86vw); /* comfortable fixed width, but shrinks on small screens */
padding: 36px 32px 28px;
background: linear-gradient(160deg, #14110c 0%, #1c1712 100%); /* subtle dark gradient */
border: 1px solid rgba(212, 175, 90, 0.55);
border-radius: 6px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 90, 0.08);
text-align: center;
color: #ece2cc;
animation: modal-in 0.28s ease; /* gentle pop-in animation, defined below */
}
/* Small "pop in" animation: the modal fades in while sliding up slightly
and growing from 98% to full size. Runs once automatically whenever a
new .modal element appears (i.e. every time the popup opens). */
@keyframes modal-in {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-title {
margin: 0 0 14px;
font-size: 21px;
letter-spacing: 0.05em;
color: #d9b968; /* gold accent color, matches the hover glow */
font-weight: normal;
}
.modal-body {
margin: 0 0 18px;
font-size: 15px;
line-height: 1.55;
color: #ddd2b8;
}
/* The small "Prototype v0.1 — not yet connected" reminder text. */
.modal-note {
margin: 0;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #7a7062; /* muted/quiet color since this is a secondary note */
}
.modal-close {
position: absolute;
top: 10px;
right: 14px;
background: none;
border: none;
color: #b8a367;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.modal-close:hover {
color: #f3e2b3; /* brightens on hover to show it's clickable */
}
/* -----------------------------------------------------------------------------
6. INTRO BOARDING OVERLAY (one-time welcome splash screen)
-----------------------------------------------------------------------------
This is the full-screen "Welcome to JazzeeXscapes" screen shown once per
browser session, before a visitor sees the interactive Terminal for the
first time. It sits on the very top of the page (z-index 100 — higher
than the modal's 30 and the tooltip's 20), so it visually
covers the entire Terminal underneath until it's dismissed.
".intro-stage" uses the exact same "lock the shape, then shrink to fit
the screen" technique as the main ".stage" in Section 2 above — just
with a different aspect ratio (1402:1122, matching the intro artwork
file's actual pixel dimensions instead of the lobby photo's 3:2). */
.intro-overlay {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
background: #000;
/* This is what makes the "click Start Exploring" moment feel smooth:
the whole overlay fades out via opacity instead of just vanishing.
script.js adds/removes the ".intro-fade-out" class below to trigger it. */
opacity: 1;
transition: opacity 0.8s ease;
}
.intro-overlay.intro-fade-out {
opacity: 0;
/* Stop the (now invisible) overlay from blocking clicks on the Terminal
underneath while it's still fading out. */
pointer-events: none;
}
.intro-stage {
position: relative;
aspect-ratio: 1402 / 1122; /* matches assets/jazzeexscapes-intro.png exactly */
width: min(100vw, 125vh); /* 125vh = 100vh * (1402/1122), same trick as .stage */
}
.intro-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
user-select: none;
-webkit-user-drag: none;
}
/* THE "START EXPLORING" BUTTON
This real, clickable button sits exactly on top of the button graphic
that's already drawn into the background image, matching its black
background + thin gold border + gold uppercase text styling closely
enough that the two blend into one seamless-looking button. Using a
real