/* Sunburned Sharks on YellowRail: styles for markup the native engine renders (Events, galleries, forms) and for the scriptless visual-editor canvas. theme.css stays the design source; this file only adapts it. */ /* ---- Native Events listing (home, Shows page, booking calendar source) ---- */ [data-yr-events] { border-top: 1px solid var(--sbs-rule); } [data-yr-events] .yr-events-month { margin: 0; } [data-yr-events] .yr-events-month > summary { display: block; list-style: none; cursor: default; padding: 26px 8px 4px; color: var(--sbs-gold); font: 400 clamp(17px, 1.8vw, 20px)/1.2 var(--sbs-display); } [data-yr-events] .yr-events-month > summary::-webkit-details-marker { display: none; } [data-yr-events] .yr-event { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; padding: 20px 8px; border-bottom: 1px solid var(--sbs-rule); transition: background 160ms ease; } [data-yr-events] .yr-event:is(:hover, :focus-within) { background: color-mix(in srgb, var(--sbs-cyan) 7%, transparent); } [data-yr-events] .yr-event h3 { grid-column: 1; margin: 0; overflow-wrap: anywhere; color: var(--sbs-ink); font-size: clamp(19px, 2vw, 23px); } [data-yr-events] .yr-event p { grid-column: 1; margin: 0; color: var(--sbs-cyan); font-size: 14px; } [data-yr-events] .yr-event-details, .yr-event-detail .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 12px 24px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sbs-ink) 42%, transparent); color: var(--sbs-ink); font-family: var(--sbs-sans); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background 160ms ease, border-color 160ms ease; } [data-yr-events] .yr-event-details { grid-column: 2; grid-row: 1 / span 2; } [data-yr-events] .yr-event-details:hover, .yr-event-detail .button:hover { background: color-mix(in srgb, var(--sbs-ink) 12%, transparent); border-color: var(--sbs-ink); } [data-yr-events] .yr-events-empty { margin: 0; padding: 22px 8px; color: var(--sbs-muted); } @media (max-width: 680px) { [data-yr-events] .yr-event { grid-template-columns: minmax(0, 1fr); } [data-yr-events] .yr-event-details { grid-column: 1; grid-row: auto; justify-self: start; } } .sbs-events-page [data-yr-events] { margin-top: 18px; } /* sharks-yellowrail.js rebuilds the rows in theme.css's ev-upcoming markup, which draws its own top rule. */ [data-yr-events][data-sbs-shows] { border-top: 0; } /* ---- Section content shares one left edge ---- The theme lines content up on a centred --sbs-wrap box (the page intro's lead uses exactly this margin), but its own `.sbs-section h2` and `.sbs-section p` margins pin headings, ledes and lists to the section padding instead, so on wide screens they start well left of everything else. Align them to the box. */ .sbs-section > h2, .sbs-section > p, .sbs-section > ol, .sbs-section > ul { margin-left: max(0px, calc((100% - var(--sbs-wrap)) / 2)); } /* The same goes for the band's display statement, which the theme pins with a more specific margin, and for a button placed straight in a section: it is inline, so the centring margins never applied and it sat at the padding. */ .sbs-section > p.sbs-statement { margin-left: max(0px, calc((100% - var(--sbs-wrap)) / 2)); } .sbs-section > .sbs-btn { display: flex; width: fit-content; margin-left: max(0px, calc((100% - var(--sbs-wrap)) / 2)); } .sbs-section > .sbs-collaborator-list { margin-left: auto; margin-right: auto; } /* ---- Show archive (static, editable) ---- */ .sbs-archive { list-style: none; margin-top: 18px; margin-bottom: 0; padding: 0; border-top: 1px solid var(--sbs-rule); } .sbs-archive li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 6px 24px; padding: 16px 8px; border-bottom: 1px solid var(--sbs-rule); } .sbs-archive time { color: var(--sbs-cyan); font-size: 14px; font-weight: 600; white-space: nowrap; } .sbs-archive strong { display: block; color: var(--sbs-ink); font-size: 17px; } .sbs-archive span { display: block; color: var(--sbs-muted); font-size: 14px; } .sbs-archive p { margin: 4px 0 0; color: var(--sbs-copy); font-size: 14px; } .sbs-archive p:empty { display: none; } /* A show photo goes at the end of its row, so the date and title columns line up with the rows that have no photo. */ .sbs-archive li.has-photo { grid-template-columns: 180px minmax(0, 1fr) 96px; align-items: start; } .sbs-archive li.has-photo > time { grid-column: 1; grid-row: 1; } .sbs-archive li.has-photo > div { grid-column: 2; grid-row: 1; } .sbs-archive li.has-photo > .sbs-archive-photo { grid-column: 3; grid-row: 1; } .sbs-archive-photo { width: 96px; height: 64px; object-fit: cover; border-radius: 10px; } @media (max-width: 680px) { .sbs-archive li, .sbs-archive li.has-photo { grid-template-columns: minmax(0, 1fr); } .sbs-archive li.has-photo > * { grid-column: auto; grid-row: auto; } .sbs-archive-photo { width: 100%; height: auto; max-height: 220px; } } /* ---- Event detail pages ---- sharks-yellowrail.js lays the native article out as BlackRail's show panel (theme.css's ev-detail rules). These keep it readable without script. */ .cms-page-body > .yr-event-detail { max-width: 820px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) 26px; } .yr-event-detail .event-back { display: inline-block; margin-bottom: 22px; color: var(--sbs-gold); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .yr-event-detail h1 { margin: 0 0 14px; font: 400 clamp(34px, 6vw, 56px)/1.05 var(--sbs-display); color: var(--sbs-ink); } .yr-event-detail .event-summary { font-size: 19px; color: var(--sbs-copy); } .yr-event-detail .event-cover { display: block; width: 100%; height: auto; margin: 22px 0; border-radius: 18px; } .yr-event-detail section { margin: 24px 0; padding: 22px 24px; border: 1px solid var(--sbs-rule); border-radius: 18px; background: color-mix(in srgb, var(--sbs-panel) 88%, transparent); } .yr-event-detail section h2 { margin: 0 0 10px; color: var(--sbs-cyan); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; } .yr-event-detail section p { margin: 6px 0 0; } .yr-event-detail .event-ticket-status { color: var(--sbs-muted); } .cms-page-body .ev-show-note { margin: 12px 0 0; color: var(--sbs-muted); font-size: 15px; } /* ---- Notes for the band ---- Store status notes ("Preview store", "Checkout preview", "Approval needed") speak to the owner. Visitors never see them; Studio's canvas shows them, so whoever is signed in can still read and edit them. */ body:not([data-yr-preview]) [data-sbs-owner-note] { display: none; } /* ---- Hero video from the editable "Hero video" gallery ---- */ .sbs-hero-embed .yr-gallery-figure { position: absolute; inset: 0; margin: 0; } .sbs-hero-embed .yr-gallery-figure + .yr-gallery-figure { display: none; } .sbs-hero-embed .yr-gallery-figure video, .sbs-hero-embed .yr-gallery-figure img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; } .sbs-hero-embed .yr-gallery-figure figcaption { display: none; } /* ---- Forms delivered to the native inbox ---- */ .sbs-honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; } [data-site-form-status].is-success, .form-status.is-success { color: var(--sbs-cyan); } [data-site-form-status].is-error, .form-status.is-error { color: var(--sbs-accent); } form[aria-busy="true"] { opacity: .78; } /* ---- Visual editor canvas (scripts never run there) ---- Show every quiz question and result, and the song reaction panel, so each of their texts can be selected and edited in place. */ body[data-yr-preview] [data-sbs-shark-question][hidden], body[data-yr-preview] [data-sbs-shark-results][hidden], body[data-yr-preview] [data-sbs-shark-result][hidden], body[data-yr-preview] [data-sbs-ripple-room][hidden] { display: block !important; } body[data-yr-preview] [data-sbs-shark-question] + [data-sbs-shark-question] { margin-top: 28px; } /* The quiz's Back and Meet my shark buttons appear as the quiz is played. */ body[data-yr-preview] [data-sbs-quiz-back][hidden], body[data-yr-preview] [data-sbs-quiz-finish][hidden] { display: inline-flex !important; } body[data-yr-preview] .sbs-hero-embed video { opacity: .35; } /* ---- Shop cards: one layout for every product ---- The card's option area is a two-column grid pinned to the card bottom. The BlackRail store filled it with a full-width Add to cart button; here the ordering note takes that place, on its own line, so notes line up across cards and never sit beside a control. A single choice (the sticker design) spans the row so long names aren't cut off; colour and size keep two columns. */ .sbs-product-form > p { grid-column: 1 / -1; margin: 0; color: var(--sbs-muted); font-size: 15px; } .sbs-product-form > .sbs-product-field:only-of-type { grid-column: 1 / -1; } .sbs-product-form > .sbs-link { min-height: 46px; display: flex; align-items: center; } /* theme.css makes every img a block, which beats the hidden attribute. */ img[hidden] { display: none; } /* Each extra choice's photo (hidden from visitors) sits under the card photo in Studio's canvas, so it can be replaced like any other image. */ body[data-yr-preview] .sbs-product-art:has(> [data-sbs-variant-photo]) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding-bottom: 6px; } body[data-yr-preview] .sbs-product-art > [data-sbs-product-image] { grid-column: 1 / -1; } body[data-yr-preview] .sbs-product-art > img[data-sbs-variant-photo] { display: block; border-radius: 6px; } /* The vinyl feature while online ordering is paused: the note stands where the Add to cart button will go, on its own line with room above it, and the shipping link sits on the line below instead of squeezed beside it. */ .sbs-shop-copy .sbs-btn-row:has(> .sbs-store-paused) { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 28px; } .sbs-store-paused { margin: 0; color: var(--sbs-muted); } /* Three products side by side: line up photo, title, price, description and options across the row, whatever the length of each title or description. */ @media (min-width: 1101px) { @supports (grid-template-rows: subgrid) { .sbs-product-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; } .sbs-product-copy { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; } } } /* ---- Footer: the fin mark and the Rallid credit ---- */ .sbs-footer-wordmark.sbs-footer-mark { width: 76px; } .sbs-footer-mark img { border-radius: 18px; border: 1px solid color-mix(in srgb, var(--sbs-cyan) 54%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--sbs-cyan) 18%, transparent); } .sbs-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; } .sbs-footer-bottom p { margin: 0; } .sbs-footer-credit { margin-left: auto; } .sbs-footer-credit a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--sbs-gold) 55%, transparent); } .sbs-footer-credit a:hover, .sbs-footer-credit a:focus-visible { color: var(--sbs-ink); } /* ---- Track list on the Music page ---- Each song's length belongs on its own row, at the right. The theme's grid has two columns (number, song), sized for the record page's play buttons. */ .sbs-tracklist li:has(> time) { grid-template-columns: 30px minmax(0, 1fr) auto; } .sbs-tracklist li > time { color: var(--sbs-muted); font-size: 14px; font-variant-numeric: tabular-nums; } /* ---- Venue highlights ---- The theme draws the grid lines with the container's background showing through 1px gaps, so an unfilled last row showed as a grey block. Draw the lines on the cells instead, and let six highlights sit three by two. */ .sbs-highlight-grid { background: transparent; } .sbs-highlight { box-shadow: 1px 0 0 var(--sbs-rule), 0 1px 0 var(--sbs-rule), 1px 1px 0 var(--sbs-rule); } .sbs-highlight-grid:has(> .sbs-highlight:nth-child(6):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } /* ---- Video walls ---- After the wide feature, tiles run three to a row. Leftovers share their row instead of leaving an empty slot: two split it, and a single one turns the last two rows into pairs. On two-column screens an odd last tile spans both. */ @media (min-width: 992px) { .sbs-media-grid:has(> .sbs-media--wide:first-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sbs-media-grid:has(> .sbs-media--wide:first-child) > .sbs-media { grid-column: span 2; } .sbs-media-grid:has(> .sbs-media--wide:first-child) > .sbs-media--wide { grid-column: 1 / -1; } .sbs-media-grid:has(> .sbs-media--wide:first-child:nth-last-child(3n)) > .sbs-media:nth-last-child(-n+2), .sbs-media-grid:has(> .sbs-media--wide:first-child:nth-last-child(3n+2)) > .sbs-media:not(.sbs-media--wide):nth-last-child(-n+4) { grid-column: span 3; } } @media (min-width: 672px) and (max-width: 991px) { .sbs-media-grid:has(> .sbs-media--wide:first-child:nth-last-child(2n)) > .sbs-media:last-child { grid-column: 1 / -1; } } /* ---- Buttons side by side share one height ---- The theme's gold contact buttons are 2px shorter than its outline buttons. */ .sbs-btn-row > .ct-btn, .sbs-btn-row > .cms-contact-cta { min-height: 53px; } /* ---- Inquiry form ---- The page already has the site header, so the standalone form's "Back to site" link is redundant, and the 1 to 5 rating reads as one row. */ .public-form-back { display: none; } form[data-blackrail-form] .choice-group:has(input[name="completion_ease"]) { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* ---- Footer ---- YellowRail's base.css gives the footer a 48px top margin that BlackRail never had; it left a bare band between the last section and the footer. */ .sbs-site-footer { margin-top: 0; } /* ---- Show page title ---- The show's name heads its own reading column, so it shares a left edge with "All shows", the panel and the story. */ .cms-page-body .ev-detail { padding-top: clamp(36px, 4.2vw, 54px); } .ev-detail .ev-detail-title { margin: 0 0 26px; color: var(--sbs-ink); font-family: var(--sbs-display); font-weight: 400; font-size: clamp(40px, 5.2vw, 68px); line-height: 1.04; text-wrap: balance; } @media (max-width: 680px) { .ev-detail .ev-detail-title { font-size: clamp(34px, 10vw, 46px); } } /* ---- Shop on tablets ---- Two cards share the first row: line up their titles, prices, descriptions and choices. The record card below lies on its side; its photo fills the card's height instead of leaving a dark band under it. */ @media (min-width: 681px) and (max-width: 1100px) { @supports (grid-template-rows: subgrid) { .sbs-product-card:not(:last-child) { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; } .sbs-product-card:not(:last-child) .sbs-product-copy { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; } } .sbs-product-card:last-child .sbs-product-art { height: 100%; } .sbs-product-card:last-child .sbs-product-art img { height: 100%; aspect-ratio: auto; object-fit: cover; } } /* ---- Product choices in Safari ---- Without appearance: none WebKit draws its compact native pop-up and ignores the designed height and padding. Draw the chevron ourselves. */ .sbs-product-form select { -webkit-appearance: none; appearance: none; } .sbs-product-field:has(> select)::after { content: ""; position: absolute; right: 16px; bottom: 20px; width: 7px; height: 7px; border-right: 2px solid var(--sbs-ink); border-bottom: 2px solid var(--sbs-ink); transform: rotate(45deg); pointer-events: none; } /* ---- Shop: cart and checkout (sharks-shop.js) ---- Square takes the payment on its own page; these are the site's parts: the Add to cart button where the ordering note was, the cart, and the notice a buyer sees on returning from Square. */ .sbs-product-form > .sbs-shop-add { grid-column: 1 / -1; justify-content: center; } /* A