/* ============================================================ THE FILAMENT : design system Gig-poster aesthetic for a 320-cap music room + 90-seat comedy cellar. Near-black + acid green, Anton / Space Grotesk. Two hard rules from the design handoff, both load-bearing: - Zero border radius anywhere. Every button, card, chip, badge and input is a hard rectangle. - No shadows anywhere. Depth comes only from 1px hairline borders and image scrims. Comedy pages swap the accent by adding .theme-cellar to : text accents go coral, solid buttons go cellar red. ============================================================ */ :root { /* ---- surfaces ---- */ --ink: #0a0a0b; /* page background everywhere */ --ink-94: rgba(10, 10, 11, .94); /* sticky header */ --surface: #131316; /* show cards, add-on tiles */ --paper: #f4f2ed; /* primary text */ /* ---- accents ---- */ --acid: #d9f24b; --acid-hover: #eaff7a; --cellar-red: #ff4a24; --cellar-coral: #ff8a68; --warn: #ff7a52; /* "Selling Fast" badge text */ /* Page accent. Remapped wholesale by .theme-cellar below, so every component can reference these two and stay palette-agnostic. */ --accent: var(--acid); /* eyebrows, links, date numerals */ --accent-solid: var(--acid); /* solid button backgrounds */ --accent-on-solid: var(--ink); /* text on a solid accent button */ --card-border-hover: rgba(217, 242, 75, .55); /* ---- paper alpha ramp (all on 244,242,237) ---- */ --p-80: rgba(244, 242, 237, .8); --p-78: rgba(244, 242, 237, .78); --p-75: rgba(244, 242, 237, .75); --p-72: rgba(244, 242, 237, .72); --p-68: rgba(244, 242, 237, .68); --p-62: rgba(244, 242, 237, .62); --p-60: rgba(244, 242, 237, .6); --p-58: rgba(244, 242, 237, .58); --p-55: rgba(244, 242, 237, .55); --p-50: rgba(244, 242, 237, .5); --p-45: rgba(244, 242, 237, .45); --p-40: rgba(244, 242, 237, .4); --p-38: rgba(244, 242, 237, .38); --p-35: rgba(244, 242, 237, .35); /* ---- borders ---- */ --line: rgba(244, 242, 237, .12); /* hairline dividers, section borders */ --line-card: rgba(244, 242, 237, .1); /* card border */ --line-14: rgba(244, 242, 237, .14); /* tables, month rules */ --line-16: rgba(244, 242, 237, .16); /* add-on tile border */ --line-22: rgba(244, 242, 237, .22); --line-24: rgba(244, 242, 237, .24); --line-32: rgba(244, 242, 237, .32); --line-35: rgba(244, 242, 237, .35); /* ---- type ---- */ --display: 'Anton', Impact, sans-serif; --sans: 'Space Grotesk', system-ui, sans-serif; /* ---- geometry ---- */ --pad-x: 40px; /* desktop horizontal page padding */ /* ---- scrims ---- */ --scrim-hero: linear-gradient(180deg, rgba(10,10,11,.45) 0%, rgba(10,10,11,.25) 40%, rgba(10,10,11,.95) 100%); --scrim-room: linear-gradient(180deg, rgba(10,10,11,.2), rgba(10,10,11,.9)); --scrim-wash: rgba(10, 10, 11, .78); /* ---- seat map (assets/js/ots-widget-enhance.js) ---- The Cellar sells reserved tables, so comedy checkouts hit the widget's seating chart. It ships a light background that no --onstage-* variable reaches, so these drive the host-side override instead. */ --seatmap-container-bg: #0a0a0b; /* darker than the modal panel, reads recessed */ --seatmap-stage-fill: #131316; --seatmap-stage-stroke: rgba(217, 242, 75, .45); --seatmap-stage-text: rgba(217, 242, 75, .9); } body.theme-cellar { --accent: var(--cellar-coral); --accent-solid: var(--cellar-red); --accent-on-solid: var(--paper); --card-border-hover: rgba(255, 138, 104, .5); --seatmap-stage-stroke: rgba(255, 138, 104, .45); --seatmap-stage-text: rgba(255, 138, 104, .9); } *, *::before, *::after { box-sizing: border-box; } /* Every vertical rhythm on this site comes from explicit flex `gap` and section padding. Default heading/paragraph margins would stack on top of that gap and throw the spacing out, badly at display sizes (a 104px h1 carries ~70px of UA margin on each side). */ h1, h2, h3, h4, p { margin: 0; font-weight: inherit; } body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); font-weight: 400; /* The OTS widget injects an html-level reset (line-height:1.5) at the top of . Declaring it on body wins on specificity and keeps the wordmark lockup and Anton headings at their own natural metrics. */ line-height: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.menu-open { overflow: hidden; } img { max-width: 100%; display: block; } a { color: var(--accent); } a:hover { color: var(--acid-hover); } body.theme-cellar a:hover { color: var(--cellar-coral); } /* ============================================================ TYPE PATTERNS Lifted verbatim from the handoff's recurring-pattern table. ============================================================ */ .display { font-family: var(--display); text-transform: uppercase; font-weight: 400; line-height: 1; } .eyebrow { font: 700 11.5px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--accent); } /* Performer-page hero eyebrow runs slightly tighter than the standard one. */ .eyebrow--tight { letter-spacing: .24em; } .label-sm { font: 700 10.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--p-45); } .label-sm--wide { letter-spacing: .2em; } .body-copy { font-size: 15px; line-height: 1.7; color: var(--p-72); } .body-lg { font-size: 17px; line-height: 1.55; color: var(--p-78); } /* ---------- buttons ---------- */ .btn { display: inline-block; font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-radius: 0; border: none; background: none; font-family: var(--sans); cursor: pointer; white-space: nowrap; } .btn--solid { background: var(--accent-solid); color: var(--accent-on-solid); padding: 16px 30px; } .btn--solid:hover { color: var(--accent-on-solid); } .btn--outline { border: 1px solid var(--line-35); color: var(--paper); padding: 15px 26px; font-weight: 500; transition: border-color .15s ease; } .btn--outline:hover { border-color: var(--accent-solid); color: var(--paper); } /* ---------- chips (filter nav on Shows pages) ---------- */ .chip { display: inline-block; font: 500 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; /* Active has no border, inactive does. The 1px padding difference below keeps the row from shifting between the two states. */ border: 1px solid var(--line-24); padding: 9px 17px; color: var(--p-72); transition: border-color .15s ease, color .15s ease; } .chip:hover { border-color: var(--accent); color: var(--paper); } .chip--active { background: var(--accent-solid); color: var(--accent-on-solid); border: none; padding: 10px 18px; font-weight: 700; } .chip--active:hover { color: var(--accent-on-solid); } /* ---------- inline text link with rule ---------- */ .link-rule { font: 500 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 5px; text-decoration: none; } /* ---------- tag row (performer pages) ---------- */ .tag-row { display: flex; flex-wrap: wrap; gap: 9px; } .tag { border: 1px solid var(--line-22); padding: 7px 13px; font: 500 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--p-72); } .tag--accent { border-color: var(--cellar-coral); color: var(--cellar-coral); } /* ============================================================ TICKER + HEADER + FOOTER (on every page) ============================================================ */ .ticker { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 9px var(--pad-x); background: var(--accent-solid); color: var(--accent-on-solid); font: 700 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; } .ticker__aside { opacity: .7; } .nav { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad-x); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--ink-94); z-index: 5; } .nav__brand { display: flex; flex-direction: column; gap: 3px; text-decoration: none; } .nav__brand-name { font-family: var(--display); font-size: 25px; letter-spacing: .05em; color: var(--paper); text-transform: uppercase; } .nav__brand-sub { font: 500 9.5px/1 var(--sans); letter-spacing: .3em; color: var(--accent); text-transform: uppercase; } .nav__links { display: flex; align-items: center; gap: 28px; font: 500 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; } .nav__link { color: var(--p-62); text-decoration: none; transition: color .15s ease; } .nav__link:hover { color: var(--paper); } .nav__link--active { color: var(--paper); } .nav__cta { background: var(--accent-solid); color: var(--accent-on-solid); padding: 12px 24px; font-weight: 700; text-decoration: none; letter-spacing: .14em; border: none; font-family: var(--sans); font-size: 12.5px; text-transform: uppercase; cursor: pointer; } .nav__cta:hover { color: var(--accent-on-solid); } /* Hamburger. Bars 1 and 2 are 24px paper, bar 3 is 16px in the page accent. The short colored bar is a deliberate detail, not a bug. */ .nav__toggle { display: none; flex-direction: column; gap: 5px; padding: 12px 4px; background: none; border: none; cursor: pointer; } .nav__toggle span { display: block; height: 2px; width: 24px; background: var(--paper); } .nav__toggle span:last-child { width: 16px; background: var(--accent-solid); } .mobile-menu { display: none; position: fixed; inset: 0; z-index: 30; background: var(--ink); flex-direction: column; } .mobile-menu.is-open { display: flex; } .mobile-menu__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); } .mobile-menu__close { background: none; border: none; color: var(--paper); font-size: 30px; line-height: 1; padding: 4px 10px; cursor: pointer; } .mobile-menu__list { display: flex; flex-direction: column; padding: 0 18px; } .mobile-menu__link { font: 600 17px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); text-decoration: none; padding: 19px 0; border-bottom: 1px solid var(--line); } .mobile-menu__cta { display: block; text-align: center; background: var(--accent-solid); color: var(--accent-on-solid); padding: 20px 0; margin-top: 22px; font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; } .mobile-menu__meta { font: 500 12px/1.6 var(--sans); color: var(--p-45); padding: 22px 0 0; } .footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding: 54px var(--pad-x) 34px; border-top: 1px solid var(--line); } .footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; } .footer-col a { color: var(--p-68); text-decoration: none; } .footer-col a:hover { color: var(--paper); } .footer__wordmark { font-family: var(--display); font-size: 22px; letter-spacing: .05em; text-transform: uppercase; } .footer__addr { font-size: 13.5px; line-height: 1.6; color: var(--p-55); } /* Email capture: flush input + solid button, no gap, no radius. */ .footer__signup { display: flex; gap: 0; } .footer__signup input { flex: 1; min-width: 0; border: 1px solid var(--line-22); border-right: 0; background: none; padding: 12px 14px; font: 400 13px/1 var(--sans); color: var(--paper); border-radius: 0; } .footer__signup input::placeholder { color: var(--p-40); } .footer__signup button { background: var(--accent-solid); color: var(--accent-on-solid); border: none; padding: 12px 18px; font: 700 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; } .legal { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px var(--pad-x) 30px; font: 500 11.5px/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--p-38); } /* ============================================================ HERO + SECTION PRIMITIVES ============================================================ */ .hero { position: relative; min-height: 620px; display: flex; align-items: flex-end; overflow: hidden; border-bottom: 1px solid var(--line); } .hero__img, .bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; background: var(--scrim-hero); } /* Visit hero is shorter and its scrim runs deeper at the base, since the title sits lower against a room photo rather than act key art. */ .hero--visit { min-height: 380px; } .hero--visit .hero__body { padding-bottom: 44px; } .hero__scrim--visit { background: linear-gradient(180deg, rgba(10,10,11,.45), rgba(10,10,11,.94)); } .hero__body { position: relative; padding: 0 var(--pad-x) 52px; display: flex; flex-direction: column; gap: 18px; max-width: 900px; } .hero__badges { display: flex; align-items: center; gap: 12px; font: 700 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; flex-wrap: wrap; } .hero__chip { background: var(--accent-solid); color: var(--accent-on-solid); padding: 6px 10px; } .hero__detail { color: var(--p-75); } .hero__title { font-family: var(--display); font-size: 104px; line-height: .9; letter-spacing: .01em; text-transform: uppercase; } .hero__lede { font-size: 17px; line-height: 1.55; color: var(--p-78); max-width: 520px; } .hero__lede--wide { max-width: 540px; } .hero__lede strong { color: var(--paper); font-weight: 400; } .hero__actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; flex-wrap: wrap; } .section-head { padding: 64px var(--pad-x) 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .section-head__stack { display: flex; flex-direction: column; gap: 10px; } .section-title { font-family: var(--display); font-size: 46px; line-height: 1; text-transform: uppercase; } .pagehead { display: flex; flex-direction: column; gap: 14px; padding: 56px var(--pad-x) 26px; border-bottom: 1px solid var(--line); } .pagehead__title { font-family: var(--display); font-size: 72px; line-height: .95; text-transform: uppercase; } .pagehead__sub { font-size: 15.5px; line-height: 1.6; color: var(--p-68); max-width: 560px; } .chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } /* ============================================================ GALLERY WIDGET MOUNT The real OTS gallery widget replaces the children of #ots-widget entirely. The host page owns only this section padding; card styling lives in the dashboard-uploaded widget stylesheet (see ../../FILAMENT-GALLERY-WIDGET-THEMING.md for what that stylesheet can and cannot reach). ============================================================ */ #ots-widget { padding: 14px var(--pad-x) 72px; } .widget-section--shows { padding: 34px var(--pad-x) 76px; } /* Reserve height while a live widget bootstraps, so the footer does not jump up and then back down as the tiles hydrate. */ .ots-mount { min-height: 820px; } .ots-mount onthestage-widget { display: block; width: 100%; } /* ============================================================ CHECKOUT: neutralize the widget's light Tailwind borders The checkout form and its fields draw borders from Tailwind gray utilities that never read --onstage-border-color: *,::after,::before border-color: rgb(229,231,235) (gray-200, width 0, so it supplies the color to any element that gets a width from another class) .border-gray-300 #d1d5db .border-gray-200 #e5e7eb .!border-gray-300 #d1d5db, !important .!border-[#E0E0E0] #e0e0e0 .border-[rgb(221,221,221)] Invisible on the widget's own light background, bright white lines on ours. Reachable because onthestage-checkout-form, -input, -select, -tel-input, -stripe-element and -floating-label are all Stencil encapsulation mode 2 (scoped), so their styles and elements live in the host document and carry sc-onthestage-* classes. Mode 0 and shadow components carry no sc- class, so nothing else is touched, including the seat map below. Specificity note: the descendant `body` prefix scores (0,1,1), which outranks the widget's own (0,1,0) rules even where those are !important-flagged and load later. ============================================================ */ body [class*="sc-onthestage-"] { border-color: var(--line) !important; } /* Form fields keep a slightly stronger edge so they stay findable, matching the host page's own input treatment. */ body [class*="sc-onthestage-"][class*="border-gray-300"], body [class*="sc-onthestage-"][class*="border-[rgb"], body [class*="sc-onthestage-"][class*="border-[#E0E0E0"] { border-color: var(--line-24) !important; } /* CANDIDATE FIX, NOT YET CONFIRMED ON A LIVE CHECKOUT. The phone field's floating label overlaps the field border instead of sitting in a cut-out, unlike the text inputs beside it. Those use onthestage-input, which draws the notch; onthestage-tel-input wraps a country select instead and renders the label without one, so the border runs straight through the text. Giving the label the panel's own background punches it through the border line without touching any positioning. Harmless on the fields that already notch correctly, since there the patch matches the surface behind it. Background only, deliberately no padding change: the label is positioned, so padding would shift the text. Delete these three lines if the real fix lands upstream. */ body [class*="sc-onthestage-floating-label"] { background: var(--onstage-modal-content-bg-color, var(--surface)); } /* ============================================================ SEAT MAP: dark-background override The Cellar is reserved seating, so comedy checkouts render the widget's seating chart. It arrives with a light background baked in, which no --onstage-* variable reaches. Verified reachable from here: onthestage-seatingchart-widget and onthestage-3d-seat-map both render in LIGHT DOM (Stencil encapsulation mode 0), unlike the gallery tiles. assets/js/ots-widget-enhance.js adds .seat-map-container to the svg's parent; the widget never sets that class itself. ============================================================ */ .seat-map-container { border-radius: 0; overflow: hidden; background: var(--seatmap-container-bg); border: 1px solid var(--line-14); } /* The chart svg carries a hardcoded #F7F9FC background compiled into the widget. !important because the widget's own sheet loads after this one. */ .seat-map-container svg { background: transparent !important; } /* One ancestor up carries the same hardcoded value as a Tailwind arbitrary class. Scoped with :has() so only the instance wrapping our seat map is touched, not every use of that utility elsewhere in the widget. */ .bg-\[\#F7F9FC\]:has(.seat-map-container) { background: var(--seatmap-container-bg) !important; } /* Mock card styling, used only by the preview markup inside #ots-widget before the widget mounts over it, and by the related-shows rows on performer pages (which are genuine host-page content, not widget output). */ .month-rule { display: flex; align-items: center; gap: 18px; margin: 22px 0 26px; } .month-rule + .card-grid + .month-rule { margin-top: 44px; } .month-rule__line { height: 1px; flex: 1; background: var(--line-14); } .month-rule__name { font-family: var(--display); font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: var(--p-80); } .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .show-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-card); text-decoration: none; color: inherit; transition: border-color .15s ease; } .show-card:hover { border-color: var(--card-border-hover); color: inherit; } .show-card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .show-card__body { display: flex; gap: 16px; padding: 18px 20px 20px; } .show-card__date { font-family: var(--display); font-size: 42px; line-height: .85; color: var(--accent); } .show-card__stack { display: flex; flex-direction: column; gap: 7px; } .show-card__title { font: 600 17px/1.25 var(--sans); } .show-card__metarow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .show-card__meta { font: 500 12.5px/1 var(--sans); color: var(--p-60); } .show-card__more { font: 500 12.5px/1 var(--sans); color: var(--accent); } /* Availability badges. Widget-owned: these only style the preview mock. Never populate these from host-page content. */ .badge { font: 600 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; } .badge--good { background: rgba(217, 242, 75, .14); color: var(--acid); } .badge--fast { background: rgba(255, 122, 82, .16); color: var(--warn); } .badge--few { background: rgba(255, 74, 36, .2); color: var(--cellar-coral); } /* ============================================================ ROOM SPLIT / FACT GRIDS / ADD-ONS ============================================================ */ .room-split { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); } .room { position: relative; min-height: 420px; overflow: hidden; } .room + .room { border-left: 1px solid var(--line); } .room__scrim { position: absolute; inset: 0; background: var(--scrim-room); } .room__body { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 36px; } .room__cap { font: 700 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--accent); } .room__cap--cellar { color: var(--cellar-coral); } .room__name { font-family: var(--display); font-size: 40px; line-height: 1; text-transform: uppercase; } .room__desc { font-size: 14.5px; line-height: 1.6; color: var(--p-72); max-width: 400px; } /* "Grid of facts": a 1px gap over a hairline-colored background with ink cells, so the gap itself is the divider. Reproduced this way rather than with per-cell borders, per the handoff. */ .fact-grid { display: grid; gap: 1px; background: var(--line); } .fact-grid--4 { grid-template-columns: repeat(4, 1fr); } .fact-grid--3 { grid-template-columns: repeat(3, 1fr); } .fact-grid--2 { grid-template-columns: repeat(2, 1fr); } .fact { background: var(--ink); padding: 26px 22px; display: flex; flex-direction: column; gap: 8px; } .fact--tight { padding: 22px 20px; } .fact--roomy { padding: 34px 30px; } .fact__label { font: 700 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--p-50); } .fact__label--accent { color: var(--cellar-coral); } .fact__name { font-family: var(--display); font-size: 24px; text-transform: uppercase; line-height: 1.05; } .fact__desc { font-size: 13.5px; line-height: 1.55; color: var(--p-62); } .fact__copy { font-size: 15px; line-height: 1.7; color: var(--p-72); } .section-band { padding: 64px var(--pad-x); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 28px; } /* Add-ons band on Home: flat wash over a full-bleed image. */ .addon-band { position: relative; overflow: hidden; border-top: 1px solid var(--line); } .addon-band__wash { position: absolute; inset: 0; background: var(--scrim-wash); } .addon-band__grid { position: relative; display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; padding: 60px var(--pad-x); align-items: center; } .addon-band__copy { display: flex; flex-direction: column; gap: 14px; } .addon-band__title { font-family: var(--display); font-size: 40px; line-height: 1.02; text-transform: uppercase; } .addon-band__text { font-size: 14.5px; line-height: 1.6; color: var(--p-72); max-width: 380px; } .addon-tiles { display: grid; gap: 14px; } .addon-tiles--3 { grid-template-columns: repeat(3, 1fr); } .addon-tiles--4 { grid-template-columns: repeat(4, 1fr); } .addon { border: 1px solid var(--line-16); background: rgba(10, 10, 11, .6); padding: 22px 18px; display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: inherit; transition: border-color .15s ease; } a.addon:hover { border-color: var(--card-border-hover); color: inherit; } .addon__price { font-family: var(--display); font-size: 26px; color: var(--accent); text-transform: uppercase; } .addon__body { display: flex; flex-direction: column; gap: 7px; } .addon__name { font: 600 14px/1.3 var(--sans); } .addon__desc { font-size: 12.5px; line-height: 1.5; color: var(--p-58); } /* CTA pinned to the tile's bottom edge regardless of copy length. */ .addon__cta { margin-top: auto; padding-top: 12px; font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } /* Performer-page add-on tiles: larger and on the surface color, since they sit on the page background rather than over a washed photo like Home's. */ .addon--lg { background: var(--surface); padding: 24px 20px; gap: 9px; } .addon--lg .addon__price { font-size: 28px; } .addon--lg .addon__name { font: 600 15px/1.3 var(--sans); } .addon--lg .addon__desc { font-size: 13px; line-height: 1.55; } .addon-caption { font-size: 13px; line-height: 1.55; color: var(--p-50); } .addon-caption--dim { color: var(--p-45); } /* Shown only at mobile width. The desktop add-ons copy already covers wallet payment in its own paragraph; mobile drops that column, so the line reappears as its own caption under the tiles. */ .mobile-only { display: none; } /* ============================================================ PERFORMER PAGES ============================================================ */ /* Generic section with a top hairline. Most performer-page and Visit-page sections are this shape. */ .section-pad { padding: 56px var(--pad-x); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 24px; } .section-pad--addons { gap: 26px; } .section-pad--last { padding-bottom: 68px; } .section-pad--bordered-bottom { border-top: none; border-bottom: 1px solid var(--line); } /* Comedy performer page uses a full-width bottom-aligned hero rather than the music page's split. Its scrim is a third variant, deeper at the top than the standard hero scrim. */ .full-hero { position: relative; min-height: 520px; display: flex; align-items: flex-end; overflow: hidden; border-bottom: 1px solid var(--line); } .full-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,.5), rgba(10,10,11,.3) 40%, rgba(10,10,11,.96)); } .full-hero__body { position: relative; padding: 0 var(--pad-x) 48px; display: flex; flex-direction: column; gap: 18px; max-width: 820px; } .full-hero__title { font-family: var(--display); font-size: 84px; line-height: .9; text-transform: uppercase; } .split-hero { display: grid; grid-template-columns: 1.05fr 1fr; border-bottom: 1px solid var(--line); } .split-hero__media { position: relative; min-height: 520px; overflow: hidden; } /* Hidden on desktop. Text sits on solid ink beside the image (see .split-hero grid), so no scrim is needed for contrast. The mobile override below flips this back on and swaps in a vertical gradient. */ .split-hero__scrim { display: none; position: absolute; inset: 0; } .split-hero__body { padding: 56px var(--pad-x); display: flex; flex-direction: column; justify-content: center; gap: 18px; } .back-link { font: 500 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--p-50); text-decoration: none; } .back-link:hover { color: var(--paper); } .act-title { font-family: var(--display); font-size: 76px; line-height: .92; text-transform: uppercase; } .act-support { font-size: 17px; line-height: 1.5; color: var(--p-78); } .act-support strong { color: var(--paper); font-weight: 400; } /* Fact rail: hairline above and below, auto-width columns. */ .fact-rail { display: grid; grid-template-columns: repeat(3, auto); gap: 26px; justify-content: start; padding: 18px 0; border-top: 1px solid var(--line-14); border-bottom: 1px solid var(--line-14); } .fact-rail__item { display: flex; flex-direction: column; gap: 7px; } .fact-rail__label { font: 700 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--p-45); } .fact-rail__value { font: 600 15px/1 var(--sans); } .two-col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; padding: 64px var(--pad-x); } .prose { font-size: 16.5px; line-height: 1.7; color: var(--p-78); margin: 0; } .col-stack { display: flex; flex-direction: column; gap: 18px; } /* Set-times / lineup table */ .times { border: 1px solid var(--line-14); } .times__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; } .times__row + .times__row { border-top: 1px solid var(--line-14); } .times__label { font-size: 14.5px; color: var(--p-72); } .times__time { font: 600 14.5px/1 var(--sans); color: var(--p-72); } .times__row--headline .times__label { color: var(--paper); } .times__row--headline .times__time { color: var(--accent); } .times__row--surprise { background: rgba(255, 74, 36, .08); } .times__row--surprise .times__label, .times__row--surprise .times__time { color: var(--cellar-coral); } .times__note { font-size: 13px; line-height: 1.55; color: var(--p-50); } .times__aside { color: var(--p-50); } .heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .section-title--md { font-family: var(--display); font-size: 40px; line-height: 1; text-transform: uppercase; } .section-title--sm { font-family: var(--display); font-size: 34px; line-height: 1; text-transform: uppercase; } .heading-row__note { font-size: 13.5px; line-height: 1.55; color: var(--p-58); max-width: 340px; } /* Sticky mobile purchase bar. The primary mobile conversion element, so it is fixed for the life of the page on performer pages only. */ .buybar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: rgba(10, 10, 11, .97); border-top: 1px solid var(--line-14); padding: 12px 18px; align-items: center; gap: 12px; } .buybar__info { flex: 1; display: flex; flex-direction: column; gap: 3px; } .buybar__price { font: 600 13px/1 var(--sans); } .buybar__detail { font: 500 11px/1 var(--sans); color: var(--p-55); } .buybar__cta { background: var(--accent-solid); color: var(--accent-on-solid); border: none; padding: 17px 22px; font: 700 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; } /* Venue-hire prompt strip on Shows pages */ .hire-prompt { margin: 44px var(--pad-x) 0; padding: 22px 24px; border: 1px solid var(--line-14); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .hire-prompt__text { font-size: 14px; color: var(--p-72); } /* Visit page */ .cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .card-bordered { border: 1px solid var(--line-14); padding: 24px 20px; display: flex; flex-direction: column; gap: 9px; } .card-bordered__title { font: 600 15px/1.3 var(--sans); } .card-bordered__text { font-size: 13.5px; line-height: 1.6; color: var(--p-62); } .map-panel { position: relative; overflow: hidden; border: 1px solid var(--line-14); min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 28px; } .map-panel img { opacity: .8; } .map-panel__label { position: relative; font: 700 10.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); } .map-panel__addr { position: relative; font-size: 14px; color: var(--p-78); } /* Visit page: two-room split with more generous padding than Home's photo panels, since these cells are text rather than image. */ .room-split--text .room { min-height: 0; padding: 52px var(--pad-x); } .room-split--text .room__body { position: static; padding: 0; justify-content: flex-start; gap: 14px; } .room__name--lg { font-family: var(--display); font-size: 38px; line-height: 1; text-transform: uppercase; } .room__copy { font-size: 15px; line-height: 1.7; color: var(--p-72); } .mini-fact { display: flex; flex-direction: column; gap: 7px; } .mini-fact__value { font-size: 14px; color: var(--p-78); } /* ============================================================ TABLET : 2-up card grid between the two design sets. Nothing in the handoff specifies a tablet layout; a 2-up grid is the stated obvious fill. ============================================================ */ @media (max-width: 1100px) and (min-width: 961px) { .card-grid { grid-template-columns: repeat(2, 1fr); } .addon-tiles--4 { grid-template-columns: repeat(2, 1fr); } .fact-grid--4 { grid-template-columns: repeat(2, 1fr); } .cards-4 { grid-template-columns: repeat(2, 1fr); } .hero__title { font-size: 80px; } } /* ============================================================ MOBILE The mobile design files are authoritative below this width. ============================================================ */ @media (max-width: 960px) { :root { --pad-x: 18px; } .ticker { padding: 8px 18px; font: 700 9.5px/1.35 var(--sans); gap: 12px; } .ticker__aside { display: none; } .nav { padding: 14px 18px; background: var(--ink); z-index: 20; } .nav__brand-name { font-size: 19px; } .nav__brand-sub { font-size: 8px; letter-spacing: .26em; } .nav__links { display: none; } .nav__toggle { display: flex; } .hero { min-height: 74vh; } .hero--visit { min-height: 300px; } .hero__body { padding: 0 18px 36px; gap: 14px; } .hero__title { font-size: 56px; } .hero--visit .pagehead__title { font-size: 48px; } .hero__lede { font-size: 15px; } .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; } .hero__actions .btn { text-align: center; } .hero__actions .btn--solid { padding: 19px 0; } .hero__actions .btn--outline { padding: 18px 0; } .section-head { padding: 32px 18px 16px; } .section-title { font-size: 34px; } .pagehead { padding: 30px 18px 20px; } .pagehead__title { font-size: 46px; } .section-band { padding: 32px 18px; } /* Chip row becomes a horizontal scroll strip rather than wrapping. */ .chip-row { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .chip { flex: none; font-size: 11px; padding: 10px 15px; } .chip--active { padding: 11px 16px; } #ots-widget { padding: 14px 18px 44px; } .widget-section--shows { padding: 20px 18px 44px; } .card-grid { grid-template-columns: 1fr; gap: 16px; } .show-card__img { aspect-ratio: 16 / 9; } .show-card__date { font-size: 36px; } .show-card__title { font-size: 16px; } /* Availability badge gets its own row rather than sitting inline. */ .show-card__metarow { flex-direction: column; align-items: flex-start; gap: 7px; } .badge { align-self: flex-start; } .room-split { grid-template-columns: 1fr; } .room { min-height: 280px; } .room + .room { border-left: none; border-top: 1px solid var(--line); } .room__body { padding: 24px 18px; } .room__name { font-size: 30px; } /* Residencies grid drops out entirely on mobile Home. */ .section-band--weeklies { display: none; } .fact-grid--4, .fact-grid--3, .fact-grid--2 { grid-template-columns: 1fr; } .fact, .fact--tight, .fact--roomy { padding: 24px 18px; } .addon-band__grid { grid-template-columns: 1fr; gap: 24px; padding: 32px 18px; } .addon-band__title { font-size: 30px; } .addon-tiles--3, .addon-tiles--4 { grid-template-columns: 1fr; } /* Add-ons become horizontal rows on mobile. */ .addon { flex-direction: row; align-items: baseline; gap: 14px; padding: 16px; flex-wrap: wrap; } .addon__price { font-size: 22px; } .addon__body { gap: 4px; flex: 1; min-width: 0; } .addon__cta { margin-top: 0; padding-top: 0; width: 100%; } .mobile-only { display: block; } .split-hero { grid-template-columns: 1fr; } /* Mobile performer pages lead with a bottom-aligned photo hero rather than a side-by-side split, so the media cell becomes the hero background. */ .split-hero { position: relative; min-height: 62vh; align-items: flex-end; display: flex; overflow: hidden; } .split-hero__media { position: absolute; inset: 0; min-height: 0; } .split-hero__scrim { display: block; background: var(--scrim-hero); } .split-hero__body { position: relative; padding: 0 18px 28px; justify-content: flex-end; gap: 14px; } .act-title { font-size: 52px; } .full-hero { min-height: 60vh; } .full-hero__body { padding: 0 18px 28px; gap: 14px; } .full-hero__title { font-size: 46px; } .section-pad { padding: 32px 18px; } .section-pad--last { padding-bottom: 40px; } .act-support { font-size: 15px; } .fact-rail { grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: none; padding: 0; } .fact-rail__item { background: var(--ink); padding: 16px 12px; } .fact-rail__label { font-size: 9px; letter-spacing: .18em; } .fact-rail__value { font-size: 14px; } .two-col { grid-template-columns: 1fr; gap: 28px; padding: 32px 18px; } .prose { font-size: 15.5px; } .times__row { padding: 13px 16px; } .section-title--md { font-size: 30px; } .section-title--sm { font-size: 26px; } .hire-prompt { margin: 28px 18px 0; padding: 18px; } .cards-4 { grid-template-columns: 1fr; } .card-bordered { padding: 16px; } /* No map panel on mobile, per the handoff. */ .map-panel { display: none; } .room-split--text .room { padding: 28px 18px; } .room__name--lg { font-size: 30px; } .footer-cols { grid-template-columns: 1fr; gap: 26px; padding: 28px 18px 20px; } .legal { padding: 24px 18px 34px; flex-direction: column; gap: 12px; } /* Performer pages only: clear the sticky purchase bar. */ body.has-buybar { padding-bottom: 82px; } .buybar { display: flex; } }