/* ========================================================================== camscene — visual system (scene.css) Mobile-first, dark theme default. Loaded only by v2 templates; the legacy Pico-styled pages don't reference this file. ========================================================================== */ /* === VARIABLES === */ :root { /* Dark theme (default). Applied when has no data-theme, or data-theme="dark". Light theme overrides below. */ --bg-primary: #0E0E10; --bg-surface: #1A1A1D; --bg-elevated: #252529; --border-subtle: #2A2A30; --text-primary: #F5F5F7; --text-secondary: #A0A0A8; --text-tertiary: #8E8E96; /* WCAG AA: 5.3:1 on bg-surface (was #6E6E76, 3.4:1) */ --accent: #2E8B6B; /* camscene sage-emerald (was Sydney harbour-red #FF4D5E) */ --accent-muted: #163228; /* dark-theme green tint behind accent text */ --success: #4ADE80; --warning: #FBBF24; /* 8pt spacing grid */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; /* Radii */ --radius-pill: 999px; --radius-card: 16px; --radius-badge: 8px; /* Layout */ --top-bar-h: 56px; --tab-bar-h: 56px; --content-max: 640px; --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; } [data-theme="light"] { --bg-primary: #FAFAFC; --bg-surface: #FFFFFF; --bg-elevated: #F0F0F3; --border-subtle: #E5E5EA; --text-primary: #0E0E10; --text-secondary: #5C5C66; --text-tertiary: #6C6C74; /* WCAG AA: 5.0:1 on light bg-surface (was #86868D, 3.6:1) */ /* Pale-pink tint so active chips / accent badges read as a soft pill in light mode rather than the dark tint the dark-theme value would give. accent / success / warning themselves are unchanged. */ --accent-muted: #DCEBE2; } /* === RESET === */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { margin: 0; padding: 0; font-family: var(--font-system); font-size: 17px; line-height: 1.4; color: var(--text-primary); background: var(--bg-primary); min-height: 100vh; /* Avoid double-tap zoom and accidental text selection on tappable UI. */ touch-action: manipulation; } h1, h2, h3, h4, p, figure { margin: 0; } a { color: inherit; text-decoration: none; } button { font-family: inherit; border: none; background: none; padding: 0; cursor: pointer; color: inherit; } img { display: block; max-width: 100%; } /* === TYPOGRAPHY === */ .title-l { font-size: 28px; line-height: 1.25; font-weight: 700; } .title-m { font-size: 20px; line-height: 1.25; font-weight: 600; } .body-l { font-size: 17px; line-height: 1.4; } .body-m { font-size: 15px; line-height: 1.4; color: var(--text-secondary); } .caption { font-size: 13px; line-height: 1.4; font-weight: 500; } .caption-tight { font-size: 12px; line-height: 1.4; } /* === LAYOUT PRIMITIVES === */ .container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding-left: var(--s-4); padding-right: var(--s-4); } /* Main scroll region: clears the fixed top bar and tab bar so content isn't hidden behind either. */ .scene-main { max-width: var(--content-max); margin: 0 auto; padding-top: calc(var(--top-bar-h) + env(safe-area-inset-top)); padding-bottom: calc(var(--tab-bar-h) + env(safe-area-inset-bottom) + var(--s-4)); min-height: 100vh; } /* Vertical rhythm helpers (gap between flow children). */ .stack-2 > * + * { margin-top: var(--s-2); } .stack-3 > * + * { margin-top: var(--s-3); } .stack-4 > * + * { margin-top: var(--s-4); } .stack-5 > * + * { margin-top: var(--s-5); } .safe-area-top { padding-top: env(safe-area-inset-top); } .safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); } /* === TOP BAR === */ .top-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: calc(var(--top-bar-h) + env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-4); background: var(--bg-primary); border-bottom: 1px solid var(--border-subtle); } .top-bar__wordmark { font-size: 16px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; } .top-bar__bell { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--text-secondary); } /* === TAB BAR === */ .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; background: var(--bg-surface); border-top: 1px solid var(--border-subtle); /* safe-area-bottom utility adds the iOS home-indicator inset. */ } .tab-bar__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tab-bar-h); padding: var(--s-2) 0; color: var(--text-secondary); transition: opacity 100ms ease; } .tab-bar__item:active { opacity: 0.7; } .tab-bar__item--active { color: var(--accent); } .tab-bar__icon { width: 24px; height: 24px; } .tab-bar__label { font-size: 10px; line-height: 1; font-weight: 500; } /* === FILTER CHIP ROW === */ .chip-row { display: flex; gap: var(--s-2); align-items: center; overflow-x: auto; padding: var(--s-2) var(--s-4); /* hide scrollbar — see .no-scrollbar */ } .chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-2) 14px; border-radius: var(--radius-pill); background: var(--bg-elevated); color: var(--text-primary); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; transition: opacity 100ms ease; } .chip:active { opacity: 0.7; } .chip--active { background: var(--accent-muted); color: var(--accent); } .chip__chevron { width: 16px; height: 16px; margin-right: -2px; } /* === CARD === */ /* List-view card: compact horizontal layout — 80x80 thumbnail on the left, text on the right, bookmark overlaid top-right. ~100px tall for ~3x the density of a hero card. The 16:9 hero shape is for the production-detail page (Step 4), not the list. */ .card { /* Positioned container. The clickable link (.card__link) and the bookmark button (.card__bookmark) are siblings inside it — keeping the button out of the anchor so the HTML stays valid. */ position: relative; background: var(--bg-surface); border-radius: var(--radius-card); overflow: hidden; } .card__link { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); transition: opacity 100ms ease; } .card__link:active { opacity: 0.7; } .card__thumb-wrap { flex: 0 0 auto; } .card__thumb { display: block; width: 80px; height: 80px; object-fit: cover; border-radius: 12px; background: var(--bg-elevated); } .card__thumb--placeholder { /* Solid-ish fallback when image_url is null. Per-category colour later. */ background: linear-gradient(135deg, var(--bg-elevated), var(--border-subtle)); } .card__body { flex: 1 1 auto; min-width: 0; /* allow children to ellipsis instead of overflowing */ /* Leave room on the right for the absolutely-positioned bookmark. */ padding-right: var(--s-5); } .card__body > * + * { margin-top: 2px; } .card__title { /* single line, ellipsis on overflow */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Bookmark lives OUTSIDE the (sibling) to keep HTML valid — a button nested in an anchor is invalid. It's overlaid top-right of the card. */ .bookmark { position: absolute; top: var(--s-1); right: var(--s-1); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--text-secondary); z-index: 2; transition: opacity 100ms ease; } .bookmark:active { opacity: 0.7; } /* Dual-icon toggle, driven by [data-bookmarked] on the button (cards) or the top-bar button (detail). Outline by default; filled accent when saved. */ .bookmark__icon-outline, .bookmark__icon-filled { width: 24px; height: 24px; } .bookmark__icon-filled { display: none; } [data-bookmarked="true"] .bookmark__icon-outline { display: none; } [data-bookmarked="true"] .bookmark__icon-filled { display: block; color: var(--accent); } .card-list { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-4) 0; } /* === BUTTONS === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-radius: var(--radius-pill); font-size: 17px; font-weight: 600; line-height: 1; transition: opacity 100ms ease; } .btn:active { opacity: 0.7; } .btn--primary { background: var(--accent); color: #FFFFFF; } .btn--secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .btn--tertiary { background: transparent; color: var(--accent); padding: var(--s-2) var(--s-3); } .btn--full { display: flex; width: 100%; } /* === BOTTOM SHEETS === */ /* HTMX loads a sheet fragment into #sheet-mount; scene.js toggles .sheet--open to animate it in/out (overlay fade + content slide). */ .sheet { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; opacity: 0; transition: opacity 200ms ease-out; } .sheet--open { opacity: 1; pointer-events: auto; } .sheet__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .sheet__content { position: relative; display: flex; flex-direction: column; max-height: 70vh; background: var(--bg-surface); border-radius: 24px 24px 0 0; padding: var(--s-3) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 300ms ease-out; } .sheet--open .sheet__content { transform: translateY(0); } .sheet__handle { width: 36px; height: 4px; margin: 0 auto var(--s-3); border-radius: 2px; background: var(--text-tertiary); } .sheet__title { text-align: center; margin-bottom: var(--s-4); } .sheet__form { flex: 1 1 auto; overflow-y: auto; margin-bottom: var(--s-4); } .sheet__form--chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .sheet__actions { display: flex; gap: var(--s-3); } .sheet__actions > * { flex: 1 1 0; } /* Single-select rows (When sheet) */ .sheet-option { display: flex; align-items: center; padding: var(--s-3) 0; cursor: pointer; border-bottom: 1px solid var(--border-subtle); } .sheet-option:last-child { border-bottom: none; } .sheet-option input { margin-right: var(--s-3); accent-color: var(--accent); } .sheet-option__label { font-size: 17px; color: var(--text-primary); } /* Multi-select toggle chips (Genres / Venues sheets) */ .chip-toggle { display: inline-block; cursor: pointer; } .chip-toggle input { position: absolute; opacity: 0; pointer-events: none; } .chip-toggle__label { display: inline-block; padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill); background: var(--bg-elevated); color: var(--text-primary); font-size: 13px; font-weight: 500; transition: opacity 100ms ease; } .chip-toggle:active .chip-toggle__label { opacity: 0.7; } .chip-toggle input:checked + .chip-toggle__label { background: var(--accent-muted); color: var(--accent); } /* === RESULTS COUNT / EMPTY STATE / LOAD MORE === */ .results-count { color: var(--text-secondary); padding: var(--s-3) var(--s-4) 0; } .empty-state { padding: var(--s-7) var(--s-4); text-align: center; } .empty-state .btn { margin-top: var(--s-4); } .load-more { margin-top: var(--s-3); } /* === UTILITIES === */ .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-accent { color: var(--accent); } /* === BADGES === */ .badge { display: inline-block; padding: var(--s-1) var(--s-2); border-radius: var(--radius-badge); background: var(--bg-elevated); color: var(--text-secondary); font-size: 12px; font-weight: 500; line-height: 1.2; } .badge--accent { background: var(--accent-muted); color: var(--accent); } .badge--muted { background: var(--bg-elevated); color: var(--text-tertiary); } /* === DETAIL PAGE === */ /* Back / bookmark buttons in the detail top bar */ .top-bar__back, .top-bar__bookmark { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--text-primary); flex: 0 0 auto; } .top-bar__back:active, .top-bar__bookmark:active { opacity: 0.7; } .top-bar__title { flex: 1 1 auto; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 var(--s-2); font-weight: 600; } /* Hero — original aspect ratio, capped at 60vh, letterboxed background */ .detail__hero { display: flex; align-items: center; justify-content: center; width: 100%; /* Reserve vertical space up-front so the variable-ratio hero image doesn't shift layout when it loads (kills the detail-page CLS). The image is object-fit:contain within this band. */ min-height: 40vh; max-height: 60vh; overflow: hidden; background: var(--bg-elevated); } .detail__hero-img { width: 100%; max-height: 60vh; object-fit: contain; } .detail__hero-placeholder { width: 100%; height: 40vh; background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-surface) 100%); } .detail__content { padding-top: var(--s-4); /* Clear the fixed sticky CTA (~64px) plus the safe-area inset. */ padding-bottom: calc(var(--s-7) + 80px + env(safe-area-inset-bottom)); } .detail__title { margin-bottom: var(--s-2); } .detail__subtitle { margin-bottom: var(--s-2); } .detail__meta a { color: var(--text-secondary); } .detail__meta a:active { opacity: 0.7; } .detail__category { margin: var(--s-3) 0; } .detail__run-dates { margin-bottom: var(--s-5); } .detail__section-title { margin: var(--s-5) 0 var(--s-3); } /* Performances list */ .perf-list { display: flex; flex-direction: column; gap: var(--s-3); } .perf-group { border-top: 1px solid var(--border-subtle); padding-top: var(--s-3); } .perf-group:first-child { border-top: none; padding-top: 0; } .perf-group__date { color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--s-2); } /* Each day's showtimes as wrapping pill-buttons. A date with many perfs (long-running shows) stays one row of pills rather than N stacked rows. */ .perf-group__times { display: flex; flex-wrap: wrap; gap: var(--s-2); } .perf-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-4); border-radius: var(--radius-pill); background: var(--bg-elevated); color: var(--text-primary); font-size: 15px; line-height: 1.2; white-space: nowrap; transition: opacity 100ms ease; } .perf-pill:active { opacity: 0.7; } .perf-pill--sold-out { opacity: 0.4; pointer-events: none; } .perf-list__load-more { margin-top: var(--s-4); } /* Description with line-clamp + Read more */ .description-body { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; } .description-body.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; } .description-expand { color: var(--accent); padding: var(--s-2) 0; font-weight: 500; } .description-expand:active { opacity: 0.7; } /* Sticky Buy Tickets CTA (tab bar is hidden on detail) */ .sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; max-width: var(--content-max); margin: 0 auto; background: var(--bg-surface); border-top: 1px solid var(--border-subtle); padding: var(--s-3) var(--s-4); padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); } /* === SEARCH === */ /* No horizontal padding on the container — the form and browse-by pad themselves, and the shared .card-list / .results-count / .empty-state already own their 16px gutters (so results don't double-indent). */ .search-container { padding-top: var(--s-3); } .search-form { padding: 0 var(--s-4); margin-bottom: var(--s-4); } .search-input-wrap { position: relative; display: block; } .search-input-icon { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; color: var(--text-secondary); } .search-input { width: 100%; padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 24px + var(--s-2)); font-size: 17px; color: var(--text-primary); background: var(--bg-elevated); border: none; border-radius: var(--radius-card); outline: none; -webkit-appearance: none; appearance: none; } .search-input::placeholder { color: var(--text-tertiary); } .search-input::-webkit-search-cancel-button { -webkit-appearance: none; } .search-link { color: var(--accent); text-decoration: underline; } /* === BROWSE-BY TILES (search empty-state) === */ .browse-by { padding: 0 var(--s-4); margin-top: var(--s-3); } .browse-by__heading { margin-bottom: var(--s-3); color: var(--text-primary); } .tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } .tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: var(--s-3); border-radius: var(--radius-card); /* Default dark gradient (also the fallback for any unmatched genre) so the fixed light text below stays legible in both themes. */ background: linear-gradient(135deg, #2F3239 0%, #43464F 100%); /* Fixed light text: the tile gradients are dark in both themes, so this must not flip to dark text under [data-theme="light"]. */ color: #F5F5F7; font-weight: 600; font-size: 17px; text-align: center; transition: opacity 100ms ease; } .tile:active { opacity: 0.7; } /* Per-genre gradient backgrounds (dark theme). Matched on the href so no per-tile class is needed; any unmatched genre falls back to bg-elevated. */ .tile[href*="genres=opera"] { background: linear-gradient(135deg, #2C1844 0%, #4A2566 100%); } .tile[href*="genres=ballet"], .tile[href*="genres=dance"] { background: linear-gradient(135deg, #1E3A5F 0%, #2D5582 100%); } .tile[href*="genres=classical"] { background: linear-gradient(135deg, #1F3D2E 0%, #2F5944 100%); } .tile[href*="genres=theatre"] { background: linear-gradient(135deg, #5A2A1F 0%, #7C3E2E 100%); } .tile[href*="genres=musical"] { background: linear-gradient(135deg, #6B1F3D 0%, #962E58 100%); } .tile[href*="genres=comedy"] { background: linear-gradient(135deg, #5A3F1F 0%, #7C5A2E 100%); } .tile[href*="genres=cabaret"] { background: linear-gradient(135deg, #4A1F4A 0%, #6B2E6B 100%); } .tile[href*="genres=kids-family"] { background: linear-gradient(135deg, #1F4A47 0%, #2E6B66 100%); } .tile[href*="genres=event-cinema"], .tile[href*="genres=film"] { background: linear-gradient(135deg, #2A2A40 0%, #404060 100%); } .tile[href*="genres=other"] { background: linear-gradient(135deg, #2F3239 0%, #43464F 100%); } /* === WATCHLIST === */ .watchlist-container { padding-top: var(--s-3); } .watchlist-sort { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-4); margin-bottom: var(--s-3); } .watchlist-sort label { color: var(--text-secondary); } .watchlist-sort__select { background: var(--bg-elevated); color: var(--text-primary); border: none; padding: var(--s-2) var(--s-3); border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; -webkit-appearance: none; appearance: none; cursor: pointer; } .watchlist-empty { text-align: center; } .watchlist-empty .btn { margin-top: var(--s-4); } /* Inactive bookmark — same horizontal layout as .card__link, greyed. */ .card--inactive { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); opacity: 0.55; } .card--inactive .card__thumb { filter: grayscale(60%); } /* === ACCOUNT SCREEN === */ .account-container { padding: 0 var(--s-4); padding-bottom: var(--s-7); } .account-section { padding: var(--s-4) 0 var(--s-5); border-bottom: 1px solid var(--border-subtle); } .account-section:last-of-type { border-bottom: none; } .account-section__heading { margin-bottom: var(--s-2); color: var(--text-primary); } .account-section__caption { margin-bottom: var(--s-3); } .account-section__body { margin-bottom: var(--s-3); } .account-section__body:last-child { margin-bottom: 0; } .account-footer { text-align: center; padding: var(--s-5) var(--s-4) var(--s-4); } /* Theme toggle — segmented control */ .theme-toggle { display: flex; gap: 2px; padding: 4px; background: var(--bg-elevated); border-radius: var(--radius-pill); } .theme-toggle__option { flex: 1 1 0; position: relative; cursor: pointer; } .theme-toggle__option input { position: absolute; opacity: 0; pointer-events: none; } .theme-toggle__label { display: flex; align-items: center; justify-content: center; height: 36px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: background-color 150ms ease, color 150ms ease; } .theme-toggle__option input:checked + .theme-toggle__label { background: var(--bg-surface); color: var(--text-primary); } .theme-toggle__option:active .theme-toggle__label { opacity: 0.7; }