.page-id-21987 #supersearchoverlay { display: none !important; } /* Grey canvas (the artifact's --page). This page is a stack of bands and cards rather than a document, so the white needs something to sit ON: the summary strip and the result cards (.evlist .ev is already #fff) read as surfaces instead of dissolving into the page. Scoped to this page id only. Setting it on alone does NOTHING: four containers paint white over it, and every one of them has to be named. .site and .content-area and .hentry in style.css, .site-main in css/mystyle2.css. body.page-id-N .x is (0,2,1) and beats all of them. .site-header and .site-footer are deliberately absent: the nav stays white and the footer stays navy. */ body.page-id-21987, body.page-id-21987 .site, body.page-id-21987 .site-main, body.page-id-21987 .content-area, body.page-id-21987 .hentry { background: #eef1f5; } /* Trust chips, moved out of the hero (2026-08-11). Emitted twice in content-xx.php and mutually exclusive with no JS: #sr-invite is hidden by showResultsArea(), .entry-content-results is display:none until then. So the empty state shows them under the "enter your criteria" line, and the results state shows them under the list OR the map, whichever view is on. Why not the hero: two chip rows cost 57px of a 375px fold directly above the search card, and in the empty state there are no prices on screen for the promise to attach to. A visitor who arrives with ?params and so never sees the invite copy still meets the promise before any click-out, because result cards link to event pages on this site, and those carry the chips in their hero. */ .sr-trust .trust-strip { margin: 0; } /* .sr-trust-invite and .sr-trust-results are gone: the chips no longer sit under the invite line or under the results. They live once, inside .sr-howto-legal at the top of the how-to block, so the short form (chips) and the long form (the legal note) are read together and sit in the same place on every visit. */ .sr-trust-howto { margin: 0 0 12px; } .sr-trust-howto .trust-strip { justify-content: flex-start; } /* Search results page */ #date_select { width: 100%; font-size: 16px; padding: 7px 5px 6px; border: 1px solid #ccc; margin-bottom: 5px; border-radius: 6px; height: 38px; color: #333; outline: none; border: none; } #response-container .response { transition: opacity 0.15s ease; } #response-container .response { display: block; float: none; clear: both; } .sr-empty-prompt { text-align: center; color: #666; font-size: 16px; padding: 40px 20px 20px; } .sr-empty-menus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; padding: 0 10px 40px; } .sr-empty-menu h3 { font-size: 15px; font-weight: 700; color: #295584; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid #295584; } .sr-empty-menu-list { list-style: none; margin: 0; padding: 0; } .sr-empty-menu-list li a { display: block; padding: 6px 0; font-size: 14px; color: #333; text-decoration: none; border-bottom: 1px solid #f0f0f0; } .sr-empty-menu-list li a:hover { color: #295584; } .sr-empty-menu-list li:last-child a { border-bottom: none; } @media screen and (max-width: 640px) { .sr-empty-menus { grid-template-columns: 1fr; gap: 24px; } } .sr-container { max-width: 900px; margin: 0 auto; padding: 0 10px; } .sr-section { margin-bottom: 30px; } .sr-section-title { font-size: 18px; font-weight: 700; color: #333; border-bottom: 2px solid #295584; padding-bottom: 8px; margin-bottom: 16px; } .sr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } /* WP page result card */ .sr-card { display: flex; gap: 12px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; transition: box-shadow .15s; } .sr-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); } .sr-card .entry-thumbnail { flex-shrink: 0; width: 80px; height: 56px; overflow: hidden; border-radius: 4px; } .sr-card .entry-thumbnail img { width: 100%; height: 100%; object-fit: cover; } .sr-card .sr-card-body { flex: 1; min-width: 0; } .sr-card .sr-card-body h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; line-height: 1.3; } .sr-card .sr-card-body h2 a { color: #295584; text-decoration: none; } .sr-card .sr-card-body h2 a:hover { text-decoration: underline; } .sr-card .sr-card-meta { font-size: 12px; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Match card: MOVED OUT (2026-08-14). The event row is no longer .sr-match-card here and .ev on the listing pages: both draw

from css/ft-eventcard.css, which is enqueued alongside this file on both search surfaces. The whole .sr-match-* vocabulary (card, date, day, daynum, month, year, info, title, comp, venue, clasico, price, .sr-price-badge) is retired, as are its @media 640px overrides and .sr-match-card.sr-match-past. .sr-match-types is NOT retired: the ticket-type pills keep their own name and stay in css/ft-components.css, because the event page's price rows use them. Do not re-add card rules here. */ /* Team/comp link card (in grid) */ a.sr-link-card, .sr-link-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; transition: box-shadow .15s; text-decoration: none; color: inherit; } a.sr-link-card:hover, .sr-link-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); } .sr-link-card .sr-link-thumb { flex-shrink: 0; width: 48px; height: 48px; overflow: hidden; border-radius: 6px; border: 1px solid #ddd; } .sr-link-card .sr-link-thumb img { width: 100%; height: 100%; object-fit: cover; } .sr-link-card .sr-link-thumb img.img_svg_icon { width: 50%; height: 50%; object-fit: contain; } .sr-link-card .sr-link-thumb.sr-placeholder-team img.img_svg_icon { width: 70%; height: 70%; object-fit: contain; } .sr-link-card .sr-link-body h3 { font-size: 14px; font-weight: 600; margin: 0 0 2px; } .sr-link-card .sr-link-body h3 { color: #295584; } a.sr-link-card:hover .sr-link-body h3 { text-decoration: underline; } .sr-link-card .sr-link-url { font-size: 11px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-link-card .sr-link-meta { font-size: 12px; color: #888; font-weight: 500; } /* Placeholder thumbnails */ .sr-placeholder { display: flex; align-items: center; justify-content: center; background: #f3f4f6; border-radius: 6px; } /* Ticket type pills moved to ft-components.css: they are now used by the event page price rows as well as the search cards, and this file only loads under is_search(). Do not re-add them here. */ /* Pagination: MOVED OUT (2026-08-14). .sr-pagination / .sr-page-link and the listing's #pagination-bottom now share one look, defined once in css/ft-eventcard.css. The class names were NOT unified: each is a JS contract (ft_search_pagination.js emits , sr_search.js emits , fixtures-ajax.js delegates on "#pagination-bottom a.pagination-link"), so only the styling is shared. */ /* Matches toolbar: filter chips + sort */ .sr-matches-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .sr-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; } .sr-filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 1px solid #d1d5db; border-radius: 20px; background: #fff; color: #374151; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, color .15s; line-height: 1.3; } button.sr-filter-chip:hover { border-color: #295584; background-color: #e5e7eb; } .sr-filter-chip.active:hover { background-color: #295584; border-color: #295584; color: #fff; } .sr-filter-chip-official.active:hover { background: #099f7d; border-color: #099f7d; color: #fff; } .sr-filter-chip.active { background-color: #295584; border-color: #295584; color: #fff; } .sr-filter-chip[data-filter="vip"].active, .sr-filter-chip[data-tt="ticket_hospitality"].active, .sr-filter-chip[data-tt="ticket_hotel_hospitality"].active { background: #d9a300; border-color: #b88600; color: #fff; } #sr-official-chip { margin-bottom: 15px; } .sr-filter-chip-official { margin-right: 5px; } .sr-filter-chip-official.active { background: #099f7d; border-color: #099f7d; color: #fff; } /* Kill browser focus/active outline + WP button:active inflate */ button.sr-filter-chip:focus, button.sr-filter-chip:active { outline: none; } button.sr-filter-chip:active { background-color: #fff; border: 1px solid #d1d5db; padding: 5px 12px; } button.sr-filter-chip.sr-chip-clasico:active { background-color: #fff; border: 1px solid #d1d5db; padding: 5px 12px 5px 24px; } button.sr-filter-chip.active:active { background-color: #295584; border: 1px solid #295584; padding: 5px 12px; } .sr-filter-chip.disabled { opacity: .4; cursor: default; pointer-events: none; } .sr-chip-clasico { padding-left: 24px; background-image: url("images/flame.svg"); background-position: 8px center; background-size: 12px 12px; background-repeat: no-repeat; } .sr-filter-count { font-size: 11px; font-weight: 600; background: rgba(0,0,0,.08); padding: 1px 5px; border-radius: 10px; min-width: 14px; text-align: center; } .sr-filter-chip.active .sr-filter-count { background: rgba(255,255,255,.25); } .sr-comp-chips { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; padding-top: 4px; } .sr-view-toggles { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0; } /* List / map: one segmented control. Both options stay on screen and the active one is lifted onto a white pill, instead of the old show-one-hide-the-other pair where the only visible button named the view you were NOT in. */ .vt { display: inline-flex; background: #e7ebf1; border-radius: 10px; padding: 3px; gap: 2px; } .vt-b { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; text-transform: none; white-space: nowrap; color: #5f6f82; background: none; border: 0; border-radius: 8px; box-shadow: none; padding: 7px 12px; cursor: pointer; } .vt-b.is-on { background: #fff; color: #13274d; box-shadow: 0 1px 2px rgba(19, 39, 77, .14); } /* The theme paints every bare