/* ============================================================ exhibition-show-poster — gallery "show poster" invitation Dark-gallery editorial poster: full-bleed cover artwork, big Fraunces display type, a single vermilion accent. Shell contract: - No JS / script failure (.js.poster-ready absent): a normal scrolling page; every panel stacks in document order, so all content is always reachable. - JS ready (.js.poster-ready on ): the .app grid locks to 100dvh — tabs / panels. Only the active panel scrolls internally, never the page. - Very short viewports (landscape phones, on-screen keyboard) fall back to the stacked scrolling layout so nothing is ever clipped off-screen. ============================================================ */ :root { --paper: #16130f; --panel: rgba(22, 19, 15, 0.86); --ink: #f4efe4; --ink-soft: #ddd5c4; --muted: #a99e8c; --line: rgba(244, 239, 228, 0.16); --accent: #e2572f; /* vermilion — the poster's one loud note */ --accent-soft: #f0936f; --error: #ff8f7a; --radius: 14px; --font-display: "Fraunces", "Playfair Display", Georgia, serif; --font-sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Only the JS-ready shell locks scrolling — a no-JS page scrolls naturally so every panel stays reachable. */ .js.poster-ready body { overflow: hidden; } .app { display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); } /* JS shell: the app locks to the viewport — tabs / panels rows. Only the active panel scrolls internally, never the page. */ .js.poster-ready .app { height: 100vh; height: 100dvh; max-height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; /* tabs / panels / powered-by */ } /* ── Tabs ─────────────────────────────────────────────────── */ .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 12px 12px 10px; } .tabs__btn { appearance: none; border: 1px solid var(--line); background: rgba(16, 13, 10, 0.55); font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); padding: 10px 18px; /* ≥ 40px touch target */ border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px); transition: color 0.2s, background 0.2s, border-color 0.2s; } .tabs__btn:hover { color: var(--ink); border-color: var(--accent); } .tabs__btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .tabs__btn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; } /* ── Panels ───────────────────────────────────────────────── */ .panels { min-height: 0; position: relative; margin: 0 12px; } .panel { background: var(--panel); padding: 22px 20px 26px; } /* App mode only: the active panel fills the row and scrolls internally. Without .js.poster-ready every panel stacks in flow. */ .js.poster-ready .panel { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; border: 1px solid var(--line); border-radius: 20px; backdrop-filter: blur(10px); } .js.poster-ready .panel:not(.is-active) { display: none; } .js.poster-ready .panel::-webkit-scrollbar { width: 8px; } .js.poster-ready .panel::-webkit-scrollbar-thumb { background: rgba(226, 87, 47, 0.5); border-radius: 4px; } .js.poster-ready .panel::-webkit-scrollbar-track { background: transparent; } /* The cover is the poster itself — full-bleed, no glass box. */ .js.poster-ready #panel-cover { background: transparent; border: 0; border-radius: 0; backdrop-filter: none; } /* No-JS stacked mode: give each panel breathing room. */ html:not(.js.poster-ready) .panel { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 20px; } .panel-scroll { max-width: 480px; margin: 0 auto; } /* ── Cover panel: the poster fills its page, centred ──────── Spacer pseudo-elements centre the cover when it fits and collapse to 0 when it overflows, so content is never clipped (unlike plain flex centring). */ .js.poster-ready #panel-cover .panel-scroll { min-height: 100%; display: flex; flex-direction: column; } .js.poster-ready #panel-cover .panel-scroll::before, .js.poster-ready #panel-cover .panel-scroll::after { content: ""; flex: 1 0 auto; } .cover-cta { text-align: center; margin-top: 24px; } /* ── Cover content (the poster type) ──────────────────────── */ .front { text-align: center; padding: 22px 4px 6px; flex: none; } .front__guest { margin: 0 0 14px; font-size: 14px; font-style: italic; color: var(--accent-soft); } /* ── OPTIONAL cover artwork — the single hero image ───────── An exhibition poster leads with one artwork; tap it to view it full size (lightbox). Delete the .cover-art-link block in index.html to hide it. */ .cover-art-link { display: block; max-width: min(300px, 34vh); /* generous on phones, room for the type on desktop */ margin: 0 auto 18px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 22px 60px -24px rgba(0, 0, 0, 0.7); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s; } .cover-art { margin: 0; } .cover-art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } .js .cover-art-link:hover, .js .cover-art-link:focus-visible { transform: translateY(-2px); border-color: var(--accent); } .js .cover-art-link:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; } .js .cover-art-link img { cursor: zoom-in; } .front__kicker { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted); } .front__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(46px, 12vw, 96px); line-height: 0.92; letter-spacing: 0.01em; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55); } .front__title-line { display: block; } .front__title-line--italic { font-style: italic; font-weight: 300; color: var(--accent); padding-left: 0.55em; /* the italic hangs into the line below */ } .front__artist { margin: 12px 0 0; font-size: 15px; color: var(--ink-soft); } .front__artist em { font-style: italic; color: var(--accent-soft); } .ornament { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px auto 10px; max-width: 220px; color: var(--accent); } .ornament span:first-child, .ornament span:last-child { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); } .ornament span:nth-child(2) { font-size: 9px; } .front__date { margin: 0 0 6px; font-family: var(--font-display); font-size: 16px; line-height: 1.5; color: var(--ink); } .front__date em { font-style: italic; color: var(--accent-soft); } .front__place { margin: 0; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); } /* ── Shared type ──────────────────────────────────────────── */ .eyebrow { margin: 0 0 4px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); } .panel-title { margin: 0 0 14px; font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.05; } .panel-title em { font-style: italic; font-weight: 300; color: var(--accent); } /* ── Invitation lead ──────────────────────────────────────── */ .invite__lead { margin: 0 0 20px; font-family: var(--font-display); font-size: 17px; line-height: 1.65; color: var(--ink-soft); border-left: 2px solid var(--accent); padding-left: 14px; } .invite__lead em { color: var(--ink); } .invite__reply { margin: 0; text-align: center; font-size: 13px; font-style: italic; color: var(--muted); } /* ── Official flyer / banner (optional) ───────────────────── A wide framed image slot for hosts who already have a designed poster for the show — display it so guests can confirm they're in the right place. Tap to view it full size (lightbox). Delete the