/* World Cup Price Tracker — layout + cards + chart styles. * Self-contained: no dependency on the global site stylesheet so the * tracker renders the same regardless of which theme is active. * * SCOPING NOTE: this file used to back an iframe'd standalone page, so a * bare `body {}` + `* {}` reset was safe. The tracker now renders INLINE * on host pages (e.g. the world-cup vibe's modal), where those bare rules * would restyle the whole host page (font, colour, background, box-sizing). * So the reset/typography is scoped to the tracker's own subtrees instead. */ /* Box-sizing reset — scoped to the tracker page + its ticket-preview modal * so we never touch the host page's box model. */ .wcpt-page, .wcpt-page *, .wcpt-modal-backdrop, .wcpt-modal-backdrop * { box-sizing: border-box; } .wcpt-page { max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; /* Typography previously lived on a bare `body {}` rule (safe in the old * iframe, but it leaked onto host pages). Carried by the tracker root * now so both the standalone page and the inline modal still get it. */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #1a1a1a; line-height: 1.4; } /* Standalone dedicated page only (preview.php / a renderInline page sets * .wcpt-standalone on ). Restores the full-bleed gray background + * zero body margin the iframe page had — without leaking onto host pages * that merely embed the tracker inline. */ body.wcpt-standalone { margin: 0; background: #f4f6f8; } /* Embed mode — when loaded inside an iframe (e.g. from the World Cup * tickets page modal), drop the outer page padding and slim the header * so the tracker uses every available pixel of modal real-estate. The * host page already shows a "Price Tracker" title above the iframe so * we hide our own duplicate eyebrow/picker via PHP. We also tighten the * chart + stat-card chrome and shrink the chart canvas so the top of * the Marquee Picks section peeks above the fold on first paint. */ .wcpt-embed { background: #f4f6f8; } .wcpt-embed .wcpt-page { padding: 14px 18px 20px; } .wcpt-embed .wcpt-header { margin-bottom: 12px; } .wcpt-embed .wcpt-header h1 { font-size: 22px; margin-bottom: 2px; } .wcpt-embed .wcpt-subtitle { font-size: 13px; } /* Compact stat cards — drop ~30% of vertical padding so the row fits * tighter. Numeric value stays the same size; foot text gets a touch * smaller. */ .wcpt-embed .wcpt-stat-grid { gap: 12px; margin-bottom: 12px; } .wcpt-embed .wcpt-stat-card { padding: 12px 14px; } .wcpt-embed .wcpt-stat-label { margin-bottom: 4px; } .wcpt-embed .wcpt-stat-value { font-size: 22px; margin-bottom: 4px; } /* Shrink chart wrap from 380 → 260 so the marquee section starts ~120px * earlier; users see a strip of the first marquee picks on first paint * and have an obvious affordance to scroll for more. */ .wcpt-embed .wcpt-chart-section { padding: 14px 16px; margin-bottom: 12px; } .wcpt-embed .wcpt-chart-header { margin-bottom: 10px; } .wcpt-embed .wcpt-chart-title { font-size: 15px; } .wcpt-embed .wcpt-chart-sub { font-size: 11px; } .wcpt-embed .wcpt-chart-wrap { height: 260px; } /* Compact marquee header so the first card row rises further up. */ .wcpt-embed .wcpt-marquee-section { padding: 14px 16px; } .wcpt-embed .wcpt-marquee-header { margin-bottom: 12px; } .wcpt-embed .wcpt-marquee-title { font-size: 15px; } .wcpt-embed .wcpt-marquee-sub { font-size: 11px; } .wcpt-embed .wcpt-pick-photo { height: 130px; } /* Event tab strip — replaces the