:root { --mm-gold: #E2C06B; --mm-gold-bright: #DED28A; --mm-gold-deep: #B68F3A; --mm-spotlight: #FFD479; --mm-ink: #0A0A0E; --mm-curtain: #14141A; --mm-graphite: #1F1F27; --mm-red: #E23B2B; --mm-green: #2FB866; --mm-fg1: #FFFFFF; --mm-fg2: rgba(255, 255, 255, 0.86); --mm-fg3: rgba(255, 255, 255, 0.68); --mm-fg4: rgba(255, 255, 255, 0.42); --mm-border-hair: 1px solid rgba(255, 255, 255, 0.12); --mm-border-soft: 1px solid rgba(255, 255, 255, 0.18); --mm-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mm-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Modernization: alias mono to Inter so legacy mono+caps labels render in the same humanist sans as the rest of the page. Numerals stay tabular where it matters via `font-variant-numeric: tabular-nums`. */ --mm-font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mm-r-pill: 9999px; --mm-ease-smooth: cubic-bezier(0.32, 0.72, 0, 1); --mm-ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); --mm-dur-fast: 120ms; --mm-dur-med: 200ms; --mm-dur-slow: 500ms; /* Unified breakpoint scale. CSS custom properties cannot be referenced inside @media queries, so these are documentation; pair every @media with a /* @bp */ comment so grep can audit the breakpoint surface. --bp-xs: 360px design floor (iPhone SE / older Android) --bp-sm: 430px large phone (iPhone 14 Pro Max, Pixel 7 Pro) --bp-md: 768px primary mobile→tablet line --bp-lg: 1024px tablet landscape / small laptop --bp-xl: 1280px full desktop real estate */ --bp-xs: 360px; --bp-sm: 430px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body, #root { min-height: 100%; width: 100%; } body { font-family: var(--mm-font-body); background: var(--mm-ink); color: var(--mm-fg1); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Do NOT set overflow-x here — when one overflow axis is non-visible, browsers treat the other as `auto`, turning into a scroll container and breaking position: sticky on descendants (How It Works). Horizontal clipping lives on .mm-marketing via `overflow-x: clip`. */ } .mm-marketing .mm-section { scroll-margin-top: 90px; } .mm-marketing a, .mm-marketing button { touch-action: manipulation; } /* ============================================================ GLOBAL MODERNIZATION LAYER Site-wide: kill the retro monospace ALL-CAPS treatment on eyebrows, tags, captions, and small labels. Replace with humanist Inter + Title Case + tighter letter-spacing. ============================================================ */ .mm-marketing .mm-eyebrow, .mm-marketing .mmx-eyebrow, .mm-marketing .mmx-eyebrow--alt, .mm-marketing .mmx-theatres-stage-caption, .mm-marketing .mmx-theatres-stage-caption-k, .mm-marketing .mmx-theatres-econ-k, .mm-marketing .mmx-theatres-ledger-tag, .mm-marketing .mmx-theatres-ledger-sub, .mm-marketing .mmx-ledger-card .mmx-ledger-tag, .mm-marketing .mmx-ledger-record-kind, .mm-marketing .mmx-ledger-record-row dt, .mm-marketing .mmx-studios-stagebar-k, .mm-marketing .mmx-studios-stage-cap, .mm-marketing .mmh-eyebrow, .mm-marketing .mmh-act-eyebrow, .mm-marketing .mmh-stage-caption-k, .mm-marketing .mmh-stage-caption-v, .mm-marketing .mmr-eyebrow, .mm-marketing .mmr-stat-k, .mm-marketing .mmr-band-tag, .mm-marketing .mmm-eyebrow, .mm-marketing .mmm-stat-k, .mm-marketing .mma-eyebrow, .mm-marketing .mma-stat-k, .mm-marketing .mmb-eyebrow, .mm-marketing .mmp-eyebrow, .mm-marketing .mm-section-eyebrow, .mm-marketing .mm-stat-label { text-transform: none !important; letter-spacing: -0.005em !important; font-family: var(--mm-font-display) !important; } /* Eyebrow pills get a slightly looser tracking for breathing room */ .mm-marketing .mm-eyebrow, .mm-marketing .mmx-eyebrow, .mm-marketing .mmx-eyebrow--alt, .mm-marketing .mmh-eyebrow, .mm-marketing .mmh-act-eyebrow, .mm-marketing .mmr-eyebrow, .mm-marketing .mmm-eyebrow, .mm-marketing .mma-eyebrow, .mm-marketing .mmb-eyebrow, .mm-marketing .mmp-eyebrow, .mm-marketing .mm-section-eyebrow, .mm-marketing .mm-itx-eyebrow { letter-spacing: 0 !important; font-weight: 600 !important; font-size: 12px !important; } /* Pill chrome — every SECTION-level eyebrow on the site gets the same gold-tinted pill that the In-theater advertising section uses. The `:not([class*="-act-eyebrow"])` exclusion keeps per-act labels (e.g. "01 THE INVITE", "02 THE REPLAY" inside How It Works) rendering as plain labels — they're not section markers and shouldn't read like one. */ .mm-marketing .mm-eyebrow, .mm-marketing [class*="-eyebrow"]:not([class*="-act-eyebrow"]) { display: inline-block !important; padding: 6px 12px !important; border: 1px solid rgba(226, 192, 107, 0.32) !important; border-radius: 999px !important; background: rgba(226, 192, 107, 0.05) !important; color: var(--mm-gold, #E2C06B) !important; line-height: 1 !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; font-family: var(--mm-font-display) !important; } /* Force non-uppercase on any descendant of .mm-marketing that still declares uppercase (catch-all for legacy stragglers). Limit to small text contexts so we don't break anything heading-sized. */ .mm-marketing [class*="-tag"], .mm-marketing [class*="-eyebrow"], .mm-marketing [class*="-caption"], .mm-marketing [class*="-label"], .mm-marketing [class*="-record-kind"] { text-transform: none !important; letter-spacing: -0.005em !important; } /* ============================================================ MOBILE FOUNDATION — touch targets + motion gates ============================================================ */ /* Touch targets: only fires on coarse pointers (touch) — mouse-pointer desktop is unaffected. Inline text links are intentionally excluded so paragraph line-heights don't balloon. */ /* @bp coarse */ @media (pointer: coarse) { .mm-marketing button, .mm-marketing [role="button"], .mm-marketing .mm-btn, .mm-marketing .mm-nav-link, .mm-marketing .mm-faq-tab, .mm-marketing .mm-trailer-arrow { min-height: 44px; min-width: 44px; } } /* Motion gate Layer A — respect user OS preference. */ @media (prefers-reduced-motion: reduce) { .mm-marketing *, .mm-marketing *::before, .mm-marketing *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* Orb and hero-aura render outside .mm-marketing (direct body children), so these selectors do NOT use the .mm-marketing prefix. */ .mm-orb, .mm-hero-aura .h2 { display: none !important; } } /* Motion gate Layer B — mobile default (saves CPU/battery on phones regardless of user preference). Anything kept here is cheap; anything killed was either expensive (RAF, mix-blend-mode, infinite loops on large surfaces) or visually unreadable at 360px. */ /* @bp