/* Reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Core theme tokens: dark is the default. Light values are provided in :root[data-theme="light"] below; the @media (prefers-color-scheme: light) block applies the same light values when the user hasn't explicitly chosen dark via the toggle. */ --bg-color: #121212; --card-bg: #1e1e1e; --text-primary: #e8e8e8; --text-secondary: #888; --text-tertiary: #666; --credit-text: #b8b8b8; --filter-bar-bg: linear-gradient(135deg, #0a0a0a 0%, #181818 100%); --filter-bar-border: #2a2a2a; --button-bg: #333; --button-border: #444; --button-border-strong: #555; --border-color: #333; --link-active-outline: var(--text-secondary); --press-bg: #2a2a2a; --scroll-arrow-bg: rgba(51, 51, 51, 0.4); --scroll-arrow-border: rgba(255, 255, 255, 0.12); --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-shadow: rgba(0, 0, 0, 0.4); --scrollbar-thumb: #333; /* `.show-tag` pill fill: mid-grey contrast block against card-bg. The color pair flips across themes (light pill on dark card / dark pill on light card). */ --tag-fill: #aaa; --tag-on-fill: #1e1e1e; /* Per-venue brand colors. Used for `.venue-abbr` text + `.details-venue` labels. Currently shared across themes; if a specific color reads poorly on light, override it inside the [data-theme="light"] block. */ --academy-color: #4a7edd; --bagdad-color: #da7e25; --cinema21-color: #e63419; --cinemagic-color: #d6ae29; --cinemark-ep-color: #5b8c5a; --hollywood-color: #a92028; --kennedy-color: #6b8e23; --laurelhurst-color: #f44336; --livingroom-color: #dd6033; --moreland-color: #0d8a8c; --omsi-color: #3aa8d8; --tomorrow-color: #fd26d9; --regal-ft-color: #c25a7c; --regal-lc-color: #7b2d8e; --regal-pp-color: #4a9b8f; --stjohns-color: #8b5cf6; --stjohnstwin-color: #d4577b; --studioone-color: #2196f3; --deadcomics-color: #c44266; --helium-color: #9c4878; --kickstand-color: #fc561e; } /* Light theme: explicit user choice (toggle) OR system preference when the user hasn't picked dark explicitly. The duplication between the two selectors is intentional; keeps the auto branch local to the media query without relying on a JS toggle to set data-theme="auto", and means the page renders correctly even before JS boots. The toggle writes data-theme="light"/"dark"/(absent) on to override the media query. */ :root[data-theme="light"] { --bg-color: #f7f7f7; --card-bg: #ffffff; --text-primary: #1a1a1a; --text-secondary: #555; --text-tertiary: #999; --credit-text: #444; --filter-bar-bg: linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 100%); --filter-bar-border: #d0d0d0; --button-bg: #f0f0f0; --button-border: #c8c8c8; --button-border-strong: #a0a0a0; --border-color: #dadada; --link-active-outline: var(--border-color); --press-bg: #e0e0e0; --scroll-arrow-bg: rgba(220, 220, 220, 0.55); --scroll-arrow-border: rgba(0, 0, 0, 0.06); --modal-backdrop: rgba(255, 255, 255, 0.25); --modal-shadow: rgba(0, 0, 0, 0.15); --scrollbar-thumb: #bbb; --tag-fill: #555; --tag-on-fill: #f5f5f5; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg-color: #f7f7f7; --card-bg: #ffffff; --text-primary: #1a1a1a; --text-secondary: #555; --text-tertiary: #999; --credit-text: #444; --filter-bar-bg: linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 100%); --filter-bar-border: #d0d0d0; --button-bg: #f0f0f0; --button-border: #c8c8c8; --button-border-strong: #a0a0a0; --border-color: #dadada; --link-active-outline: var(--border-color); --press-bg: #e0e0e0; --scroll-arrow-bg: rgba(220, 220, 220, 0.55); --scroll-arrow-border: rgba(0, 0, 0, 0.06); --modal-backdrop: rgba(255, 255, 255, 0.25); --modal-shadow: rgba(0, 0, 0, 0.15); --scrollbar-thumb: #bbb; --tag-fill: #555; --tag-on-fill: #f5f5f5; } } /* Document-level scrolling, required for iOS Safari's tap-status-bar-to-scroll-top gesture to work. The filter bar scrolls away naturally with content; users get it back by scrolling up or tapping the status bar. */ html { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } html::-webkit-scrollbar { width: 4px; } html::-webkit-scrollbar-track { background: transparent; } html::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-color); color: var(--text-primary); font-size: 14px; /* iOS tap-handling: disable double-tap-to-zoom while preserving pan + pinch-zoom (accessibility-friendly, `user-scalable=no` is ignored by iOS since iOS 10), drop the default blue-gray tap-flash overlay (site has its own `:active` styling), and globally disable text selection + the long-press share/copy callout. Default-deny means future chrome/UI gets the right behavior without remembering to opt out. The handful of places that DO want selection are opted back in below. */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Opt back in to text selection only where it's wanted: form fields (for typing/editing) and the specific text divs of the details modal (titles, addresses, descriptions, credits, meta, the stuff worth copying). Listed explicitly rather than via a `.modal-box` parent rule + `.modal-box a` opt-out so that anchors, the QR ``, and any future non-text widgets in the modal stay non-selectable without needing a counter-override. */ input, textarea, .details-venue, .details-venue-address, .details-title, .details-datetime, .details-meta, .details-description, .details-credits { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* The filter bar's one spacing unit: its own padding on all four sides, the gap between its rows, and the gap between controls within a row. Responsive, and the only place those distances are set. The tag picker's rows and the show list measure against it too, so the bar, the modal it opens and the list below it space alike. */ :root { --filter-bar-gap: 8px; } /* Space between two rows of a list, wherever a list has rows: the menu's filter options, the tag picker's rows, and the show cards. Flat rather than responsive, and deliberately TIGHTER than --filter-bar-gap: the bar gap frames a list, this one separates items inside it. */ :root { --row-gap: 6px; } /* A row's own horizontal padding, i.e. how far its text sits inside its box. Responsive with the type. Rows across the app share it, and the date header adds it to --filter-bar-gap to line its label up with the card text below. */ :root { --card-pad-x: 10px; } /* The date header's vertical padding. A variable rather than a literal because the header's top fade has to end EXACTLY where its text begins, so the gradient stop and the padding must never drift apart: if the fade ran longer than the padding, the previous header's text would show through it. Both values read this, and the breakpoints below re-point it instead of setting padding-top/padding-bottom. */ :root { --date-header-pad-y: 10px; } /* Filter bar, column layout for both the main page and the menu overlay. Rows of controls come from `.filter-bar-row`; a `.search-pills` row follows the search row in each and collapses to nothing when the query holds no terms. */ .filter-bar { display: flex; flex-direction: column; gap: var(--filter-bar-gap); padding: var(--filter-bar-gap); background: var(--filter-bar-bg); border-top: 1px solid var(--filter-bar-border); border-bottom: 1px solid var(--filter-bar-border); flex-shrink: 0; } .filter-bar-row { display: flex; gap: var(--filter-bar-gap); width: 100%; } .filter-bar button, .picker-clear { background: var(--button-bg); color: var(--text-primary); border: 1px solid var(--button-border); border-radius: 6px; padding: 10px 12px; font-size: 16px; font-family: inherit; font-weight: 700; cursor: pointer; flex-shrink: 0; min-width: 95px; } /* Theme cycle button (sun / moon / half = light / dark / auto). First child of the main filter-bar's top row, left of the segmented control. Hidden in menu mode because the whole .filter-bar is hidden then; no extra rule needed. Height, padding, font-size, etc. inherit from `.filter-bar button` so the toggle stays vertically consistent with its row neighbors. Only min-width is overridden: the base 95px is too wide for a single icon, and the explicit value here is sized to fit the widest of the three glyphs (☀ has the largest natural width thanks to its rays) plus the inherited padding, so cycling through states doesn't shift the button width and bump the adjacent segmented control left or right. */ .filter-bar button.theme-toggle { min-width: 50px; } /* Tag picker button. Now a real