/** * BWW Design System — split from bww-ui.css * See /home/bway/design-system/MASTER.md */ /* ── Theatre detail (/theatre/{slug}) ────────────────────────────────────── */ main.inner-page.theatre-page { overflow-x: clip; } .theatre-page .bww-page-hero { margin-bottom: 0; } .theatre-page .bww-page-hero + .container.pt-20 { padding-top: 0 !important; margin-top: 0 !important; } /* 3-column layout — align columns; beat right-nav video-row { display:block } ≤1024px */ .theatre-page > .container > .container.pt-20 > .row { margin-top: 0; align-items: flex-start; } .theatre-page > .container > .container.pt-20 > .row > .col-lg-7.mobile1 { min-width: 0; overflow-x: clip; padding-top: 0 !important; margin-top: 0 !important; } .theatre-page > .container > .container.pt-20 > .row > .most-popular.l-side, .theatre-page > .container > .container.pt-20 > .row > .r-side, .theatre-page > .container > .container.pt-20 > .row > .video-row, .theatre-page > .container > .container.pt-20 > .row > .col-lg-3.video-row.r-side, .theatre-page > .container > .container.pt-20 > .row > .col-lg-4.video-row.r-side { margin-top: 0 !important; padding-top: 0 !important; } @media (min-width: 992px) { .theatre-page > .container > .container.pt-20 > .row > .col-lg-3.video-row.r-side, .theatre-page > .container > .container.pt-20 > .row > .col-lg-4.video-row.r-side, .theatre-page > .container > .container.pt-20 > .row > .video-row.r-side { display: flex !important; flex-direction: column !important; float: none !important; clear: none !important; } .theatre-page > .container > .container.pt-20 > .row > .col-lg-2.most-popular.l-side { padding-right: var(--bww-space-3) !important; padding-left: 0 !important; } .theatre-page > .container > .container.pt-20 > .row > .col-lg-7.mobile1 { padding-left: var(--bww-space-3) !important; padding-right: var(--bww-space-4) !important; } } .theatre-page .theatre-page__photos { display: flex; flex-wrap: wrap; gap: var(--bww-space-4); margin: 0 0 var(--bww-space-4); align-items: flex-start; } .theatre-page .theatre-page__photo { flex: 0 0 auto; width: auto; max-width: 280px; margin: 0; } .theatre-page .theatre-page__photo img { display: block; width: auto; max-width: 280px; max-height: 244px; height: auto; object-fit: contain; border-radius: var(--bww-radius-md); } .theatre-page .theatre-page__photo figcaption { margin: var(--bww-space-2) 0 0; font-size: var(--bww-text-base); font-weight: 600; line-height: 1.3; text-align: center; color: var(--bww-text); } .theatre-page .theatre-page__section { padding: var(--bww-space-4); } .theatre-page .theatre-page__section-title { margin: 0 0 var(--bww-space-3); font-size: var(--bww-text-xl); font-weight: 700; line-height: 1.3; color: var(--bww-text); } .theatre-page .theatre-page__history-body { font-size: var(--bww-text-base); line-height: 1.6; /* inherit panel color — var(--bww-text) stays #222 when CDN caches light theme on */ color: inherit; } .theatre-page .theatre-page__history-body a { color: var(--bww-table-link); } .theatre-page #faq .theatre-page__section-title { text-transform: uppercase; border-bottom: 2px solid var(--bww-surface-border); padding-bottom: var(--bww-space-2); margin-top: var(--bww-space-6); } .theatre-page .theatre-page__venue-info { margin-bottom: var(--bww-space-4); font-size: var(--bww-text-base); line-height: 1.6; } .theatre-page .theatre-page__address, .theatre-page .theatre-page__meta { margin: 0 0 var(--bww-space-2); } .theatre-page .theatre-page__address { margin-bottom: var(--bww-space-3); } .theatre-page .theatre-page__map { margin: 0 0 var(--bww-space-5); border-radius: var(--bww-radius-md); overflow: hidden; } .theatre-page .theatre-page__map iframe { display: block; border-radius: var(--bww-radius-md); } .theatre-page .theatre-page__map-link-wrap { margin: var(--bww-space-2) 0 0; } .theatre-page .theatre-page__map-link { font-size: var(--bww-text-sm); color: var(--bww-table-link); text-decoration: none; } .theatre-page .theatre-page__map-link:hover { color: var(--bww-table-link-hover); text-decoration: underline; } .theatre-page .theatre-page__ticket-btn { display: inline-flex !important; margin-top: 0; white-space: nowrap; text-transform: none; letter-spacing: 0; align-self: flex-start; color: #fff !important; -webkit-text-fill-color: #fff; } .theatre-page .theatre-page__production { display: flex; flex-direction: column; align-items: flex-start; gap: var(--bww-space-2); width: 100%; } .theatre-page .theatre-page__shows-table .bww-data-table__theater a:not(.bww-btn) { color: var(--bww-table-title-link); text-decoration: none; font-weight: 700; } .theatre-page .theatre-page__shows-table .bww-data-table__theater a:not(.bww-btn):hover { color: var(--bww-table-title-link-hover); text-decoration: underline; } .theatre-page a.bww-btn.bww-btn--primary.theatre-page__ticket-btn, .theatre-page a.bww-btn.bww-btn--primary.theatre-page__ticket-btn:hover, .theatre-page a.bww-btn.bww-btn--primary.theatre-page__ticket-btn:focus, .theatre-page a.bww-btn.bww-btn--primary.theatre-page__ticket-btn:visited, .theatre-page #shows .bww-data-table tbody a.theatre-page__ticket-btn, .theatre-page #shows .bww-data-table tbody a.theatre-page__ticket-btn:hover, .theatre-page #shows .bww-data-table tbody a.theatre-page__ticket-btn:focus, .theatre-page #shows .bww-data-table__theater a.theatre-page__ticket-btn, .theatre-page #shows .bww-data-table__theater a.theatre-page__ticket-btn:hover, .theatre-page #shows .bww-data-table__theater a.theatre-page__ticket-btn:focus { color: #fff !important; -webkit-text-fill-color: #fff; text-decoration: none !important; font-weight: 600; } .theatre-page .theatre-page__shows-table .bww-data-table__theater strong a { font-weight: 700; } .theatre-page .theatre-page__shows-table tbody td.bww-data-table__theater { padding: var(--bww-space-3) var(--bww-space-3) var(--bww-space-3) var(--bww-space-4); } .theatre-page .theatre-page__shows-table tbody td { vertical-align: top; } @media (max-width: 991px) { .theatre-page > .container > .container.pt-20 > .row > [class*="col-"] { padding-left: var(--bww-space-3) !important; padding-right: var(--bww-space-3) !important; } } @media (max-width: 767px) { .theatre-page .mobile1, .theatre-page .l-side, .theatre-page .r-side, .theatre-page .video-row { padding-left: var(--bww-space-3) !important; padding-right: var(--bww-space-3) !important; } .theatre-page .theatre-page__photos { gap: var(--bww-space-3); } .theatre-page .theatre-page__photo, .theatre-page .theatre-page__photo img { max-width: min(280px, 100%); } } /* Theatre detail — darkboard (beats inline legacy grays + dark.htm heading overrides) */ [data-bww-theme="dark"] .theatre-page .theatre-page__section, [data-bww-theme="dark"] .theatre-page #history, [data-bww-theme="dark"] .theatre-page #seating, [data-bww-theme="dark"] .theatre-page #shows { background: var(--bww-surface) !important; color: var(--bww-text) !important; border-color: var(--bww-surface-border) !important; } [data-bww-theme="dark"] .theatre-page .theatre-page__section-title, [data-bww-theme="dark"] .theatre-page #history h2, [data-bww-theme="dark"] .theatre-page #seating h2, [data-bww-theme="dark"] .theatre-page #shows h2, [data-bww-theme="dark"] .theatre-page #faq h2 { color: var(--bww-text) !important; } [data-bww-theme="dark"] .theatre-page .theatre-page__history-body, [data-bww-theme="dark"] .theatre-page .theatre-page__history-body p, [data-bww-theme="dark"] .theatre-page .theatre-page__history-body li, [data-bww-theme="dark"] .theatre-page .theatre-page__history-body div, [data-bww-theme="dark"] .theatre-page #shows .bww-data-table, [data-bww-theme="dark"] .theatre-page #shows .bww-data-table td, [data-bww-theme="dark"] .theatre-page #shows .bww-data-table strong, [data-bww-theme="dark"] .theatre-page #faq, [data-bww-theme="dark"] .theatre-page #faq strong, [data-bww-theme="dark"] .theatre-page #news .right-cap span[style*="color:#232323"] { color: #e8e8e8 !important; } [data-bww-theme="dark"] .theatre-page .theatre-page__history-body a, [data-bww-theme="dark"] .theatre-page #shows .bww-data-table a:not(.theatre-page__ticket-btn) { color: #ff7a8a !important; } [data-bww-theme="dark"] .theatre-page #shows .bww-data-table a.theatre-page__ticket-btn, [data-bww-theme="dark"] .theatre-page #shows .bww-data-table a.theatre-page__ticket-btn:hover, [data-bww-theme="dark"] .theatre-page #shows .bww-data-table a.theatre-page__ticket-btn:focus { color: #fff !important; -webkit-text-fill-color: #fff; } [data-bww-theme="dark"] .theatre-page [style*="background-color:#efefef"], [data-bww-theme="dark"] .theatre-page [style*="background-color: #efefef"] { background-color: var(--bww-surface-muted) !important; }