/* ───────────────────────────────────────────────────────────────────────────── Conference Program Builder — Public Program (Elegant Refresh) ───────────────────────────────────────────────────────────────────────────── */ :root { --pp-color: #0066cc; --pp-color-dark: #004fa3; --pp-color-light: rgba(0,102,204,.12); --pp-color-lighter: rgba(0,102,204,.05); --pp-text: #0b1220; --pp-text-muted: #5b6776; --pp-text-soft: #8593a3; --pp-border: #eef1f5; --pp-border-strong: #dfe4eb; --pp-bg: #f4f6fa; --pp-bg-alt: #fafbfd; --pp-surface: #ffffff; --pp-shadow-xs: 0 1px 2px rgba(15,23,42,.04); --pp-shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.04); --pp-shadow: 0 2px 6px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); --pp-shadow-md: 0 8px 24px -8px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.05); --pp-shadow-lg: 0 24px 48px -16px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.06); --pp-shadow-xl: 0 32px 80px -20px rgba(15,23,42,.28), 0 8px 24px rgba(15,23,42,.10); --pp-radius: 14px; --pp-radius-sm: 10px; --pp-radius-xs: 6px; --pp-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pp-ease: cubic-bezier(.4,0,.2,1); --pp-ease-out: cubic-bezier(.16,1,.3,1); --pp-px-per-min: 2; --pp-time-col: 78px; --pp-col-min: 210px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ── Normal document scrolling ──────────────────────────────────────────────── The program page is a standalone template, but the active theme's stylesheet still loads on it, and themes very commonly set "overflow-x: hidden" on . Per the CSS spec, as soon as one overflow axis is not "visible" the other computes to "auto" rather than "visible" — so quietly became a scroll container of its own, with the content scrolling inside the body box while the window scrolled as well. That nested scrolling is what feels stuck and jumpy, and on phones it also kills momentum scrolling and stops the address bar collapsing. A constrained body height does the same thing, so both are released here. The event class is on and alike. overflow uses !important to win against the theme; the modal's scroll lock is a class (below) rather than an inline style precisely so it can still beat this rule when a dialog is open. */ html.pp-page, body.pp-page { height: auto !important; max-height: none !important; overflow: visible !important; } body.pp-page.pp-scroll-locked { overflow: hidden !important; } /* ── The schedule table must never widen the page ───────────────────────────── The table is wider than a phone on any day with several hall columns, and it is meant to scroll inside its own container. If that container's overflow is switched off, the table spills, the whole document becomes wider than the screen, and the phone zooms out to fit — which shrinks every page and leaves the session popup cropped off the left edge, because a fixed-position overlay sizes to the widened layout viewport rather than the visible one. Per-event custom CSS has switched this off with !important more than once, so the guard is deliberately specific enough to win: two elements plus two classes beats a ".pp-event-N .pp-sched-*" override. Nothing is hidden — the columns stay reachable by swiping the table itself. */ html body.pp-page .pp-sched-outer { max-width: 100% !important; overflow-x: auto !important; } html body.pp-page .pp-sched-scroll { overflow-x: auto !important; } /* A dialog is a flex item, and flex items refuse to shrink below their content by default (min-width:auto). That lets a long title push the popup wider than the screen, and a centred over-wide box loses its left edge where it cannot be scrolled back into view. */ .pp-modal-dialog { min-width: 0; } .pp-page { font-family: var(--pp-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--pp-text); background: radial-gradient(1200px 600px at -10% -20%, color-mix(in oklab, var(--pp-color) 7%, transparent), transparent 60%), radial-gradient(900px 500px at 110% -10%, color-mix(in oklab, var(--pp-color) 5%, transparent), transparent 60%), var(--pp-bg); min-height: 100vh; text-rendering: optimizeLegibility; } /* ── Page Header ────────────────────────────────────────────────────────────── */ .pp-header { background: var(--pp-color); color: #fff; position: relative; width: 100%; height: 42vh; min-height: 180px; max-height: 360px; overflow: hidden; box-shadow: 0 4px 24px rgba(15,23,42,.18); } .pp-header__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform .6s var(--pp-ease-out); will-change: transform; } .pp-header__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.65) 100%), linear-gradient(135deg, color-mix(in oklab, var(--pp-color) 55%, transparent) 0%, transparent 60%); pointer-events: none; } .pp-header__inner { position: relative; z-index: 1; width: 100%; height: 100%; padding: 22px 28px; display: flex; align-items: flex-end; gap: 18px; } .pp-header__logo { height: 60px; width: auto; border-radius: 10px; object-fit: contain; flex-shrink: 0; background: rgba(255,255,255,.92); padding: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.18); } .pp-header__info { flex: 1; min-width: 0; } .pp-header__title { font-size: clamp(20px, 3.2vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.25); } .pp-header__sub { font-size: 13px; margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; } .pp-header__sub-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-weight: 600; letter-spacing: .01em; } .pp-header__sub-item svg { opacity: .9; } @media (max-width: 768px) { .pp-header { height: auto; min-height: 0; max-height: none; } .pp-header__inner { padding: 16px 16px; align-items: center; } .pp-header__logo { height: 44px; } .pp-header__sub { gap: 4px; margin-top: 6px; } .pp-header__sub-item { font-size: 11px; padding: 3px 8px; } } /* ── Day Hero (per-day header image, admin-configurable) ─────────────────────── */ .pp-day-hero { position: relative; width: 100%; min-height: 220px; overflow: hidden; background: linear-gradient(135deg, var(--pp-color) 0%, var(--pp-color-dark) 100%); color: #fff; display: flex; align-items: flex-end; border-radius: 0 0 26px 26px; box-shadow: 0 12px 32px -18px rgba(15,23,42,.35); } .pp-page--no-header .pp-day-hero { border-radius: 0 0 28px 28px; } .pp-day-hero--compact { min-height: 156px; } .pp-day-hero--large { min-height: 340px; } /* ── Natural-size banner ────────────────────────────────────────────────── With height set to "Auto" the hero becomes exactly the shape of the image it is showing: --pp-hero-ar carries the banner's real width/height, so a 1920x500 file is 500px tall on a 1920px screen and keeps that proportion at every width. Nothing is cropped. min-height is only zeroed where aspect-ratio is actually supported, so older browsers keep the old fixed-height behaviour rather than collapsing to nothing. */ /* Specificity note: this is intentionally three classes deep. Per-event custom CSS commonly targets ".pp-event-N .pp-day-hero" (two classes) and copies the default rule wholesale, including a min-height. At equal specificity that inline