/* * Flyers — event list built from media/flyers/imgs/. Reuses the old Past Events * interaction (a full-screen photo fades in behind the hovered row) and adds a * lightbox to page through an event's flyers. Lives inside the shared cosmic * chrome (starfield + fixed nav), so this file must NOT restyle /. */ /* Hovered event's flyer, full-screen behind the list (above starfield -2 / bear -1, below the list at z-index 10). */ #flyer-bg-container { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #flyer-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 0; } /* Centre the list above the fixed nav. */ .flyers { --nav-h: 100px; position: relative; z-index: 10; min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; justify-content: center; padding: 40px 20px var(--nav-h); text-align: center; } .flyers-inner { width: 100%; max-width: 1000px; } /* Viewport wraps only the scrolling list, so the edge fades (and the close button below) stay correctly placed. */ .flyers-viewport { position: relative; width: 100%; } /* Soft fades at the top/bottom edges of the list to hint there's more to scroll. JS (flyers.js) toggles .has-overflow / .at-top / .at-bottom so the fades only show when there's actually content beyond that edge. */ .flyers-viewport::before, .flyers-viewport::after { content: ""; position: absolute; left: 0; right: 14px; /* clear the scrollbar */ height: 34px; pointer-events: none; z-index: 5; opacity: 0; transition: opacity 0.2s ease; } .flyers-viewport::before { top: 0; background: linear-gradient(to bottom, rgba(6, 10, 18, 0.95), rgba(6, 10, 18, 0)); } .flyers-viewport::after { bottom: 0; background: linear-gradient(to top, rgba(6, 10, 18, 0.95), rgba(6, 10, 18, 0)); } .flyers-viewport.has-overflow:not(.at-top)::before { opacity: 1; } .flyers-viewport.has-overflow:not(.at-bottom)::after { opacity: 1; } /* Close control under the list — returns to /media with the site warp. */ .flyers-actions { display: flex; justify-content: center; margin-top: 22px; } .flyers-close { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--color-border-default); border-radius: 999px; background: rgba(12, 20, 36, 0.6); color: var(--color-text-primary); text-decoration: none; transition: border-color 140ms ease, box-shadow 140ms ease, color 140ms ease; } .flyers-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .flyers-close:hover, .flyers-close:focus-visible { outline: none; color: #cb3ed4; border-color: rgba(var(--color-accent-rgb), 0.55); box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.18), 0 0 18px rgba(203, 62, 212, 0.3); } .flyers-empty { font-family: var(--font-brand); color: var(--color-text-muted); letter-spacing: 1px; text-transform: uppercase; } /* Scrollable list with a prominent, always-visible Steel-Pink scrollbar (a faint pink channel shows the track even when the thumb is short, so the scroll affordance reads at a glance). */ .flyers-list { width: 100%; position: relative; max-height: 74vh; overflow-y: auto; padding-right: 14px; /* keeps the bar off the row text */ scrollbar-width: thin; /* Firefox */ scrollbar-color: #cb3ed4 rgba(203, 62, 212, 0.14); /* Firefox: thumb / track */ } .flyers-list::-webkit-scrollbar { width: 10px; } .flyers-list::-webkit-scrollbar-track { background: rgba(203, 62, 212, 0.12); border-radius: 999px; } .flyers-list::-webkit-scrollbar-thumb { background: #cb3ed4; border-radius: 999px; border: 2px solid transparent; /* inset the pill within the track */ background-clip: padding-box; } .flyers-list::-webkit-scrollbar-thumb:hover { background: #d85ce0; } /* Event row */ .flyer-row { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0.5rem; border-bottom: 1px solid #cb3ed4; cursor: pointer; } .flyer-row:focus-visible { outline: none; background: rgba(203, 62, 212, 0.12); } .flyer-row__name, .flyer-row__date { position: relative; z-index: 2; font-family: var(--font-brand); font-size: clamp(1.1rem, 2.6vw, 1.8rem); text-transform: uppercase; letter-spacing: 0.02em; color: #f8f5f2; } .flyer-row:hover .flyer-row__name, .flyer-row:hover .flyer-row__date { color: #fff; } /* Hover wipe: a Steel-Pink bar rises behind the row. */ .flyer-row::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background-color: #cb3ed4; z-index: 1; pointer-events: none; transition: height 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .flyer-row:hover::before { height: 100%; } .flyer-row:not(:hover)::before { transition-duration: 0.8s; } /* ===== Lightbox ========================================================= */ body.flyer-lightbox-open { overflow: hidden; } .flyer-lightbox { position: fixed; inset: 0; z-index: 60; /* above the fixed nav (10) */ display: flex; align-items: center; justify-content: center; padding: 56px 72px 96px; background: radial-gradient(ellipse at center, rgba(4, 8, 16, 0.82) 0%, rgba(4, 8, 16, 0.95) 100%); } .flyer-lightbox[hidden] { display: none !important; } .flyer-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7); } /* Controls: site-styled round outline buttons with the Steel-Pink glow. */ .flyer-lightbox__close, .flyer-lightbox__nav { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--color-border-default); border-radius: 999px; background: rgba(12, 20, 36, 0.6); color: var(--color-text-primary); cursor: pointer; transition: border-color 140ms ease, box-shadow 140ms ease, color 140ms ease; } .flyer-lightbox__close svg, .flyer-lightbox__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .flyer-lightbox__close:hover, .flyer-lightbox__close:focus-visible, .flyer-lightbox__nav:hover, .flyer-lightbox__nav:focus-visible { outline: none; color: #cb3ed4; border-color: rgba(var(--color-accent-rgb), 0.55); box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.18), 0 0 18px rgba(203, 62, 212, 0.3); } .flyer-lightbox__close { top: 18px; right: 18px; } .flyer-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); } .flyer-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); } /* Hide the arrows when there's only one flyer (JS toggles this class). */ .flyer-lightbox.is-single .flyer-lightbox__nav { display: none; } .flyer-lightbox__counter { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); font-family: var(--font-brand); font-size: 13px; letter-spacing: 2px; color: var(--color-text-muted); } @media (max-width: 768px) { .flyers { --nav-h: 76px; } .flyer-lightbox { padding: 48px 16px 84px; } .flyer-lightbox__prev { left: 8px; } .flyer-lightbox__next { right: 8px; } } @media (max-width: 480px) { .flyers { --nav-h: 62px; } .flyer-row { flex-direction: column; align-items: flex-start; gap: 0.15rem; } }