/* Contest map + search. Squared corners and the navy/orange palette follow the existing WCBB theme; nothing here introduces a new visual language. */ /* Bottom padding clears the footer's overlapping shield logo, which otherwise sits on the map's bottom edge. */ .wcbb-map-page { max-width: 1440px; margin: 0 auto; padding: 24px 20px 96px; } /* Facets A grid, not a flex-wrap. Sizing fields by their content produced four different input widths on one row and left the checkbox group orphaned against a wall of empty space. Every control now occupies one equal column, so the labels line up and the row has a rhythm. */ .wcbb-facets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; align-items: end; padding: 20px 22px; margin-bottom: 18px; background: #f1f1e6; border-top: 4px solid #1a3648; } .wcbb-facet { min-width: 0; } .wcbb-facet > label, .wcbb-facets legend { display: block; margin: 0 0 6px; padding: 0; font-family: Oswald, "Arial Narrow", Arial, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: #1a3648; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wcbb-facet input[type="search"], .wcbb-facet select { width: 100%; height: 42px; padding: 0 11px; font-size: 15px; font-family: inherit; border: 1px solid #c8c8bb; background: #fff; color: #1a3648; border-radius: 0; -webkit-appearance: none; appearance: none; } .wcbb-facet select { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%231a3648' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; } .wcbb-facet input[type="search"]:focus, .wcbb-facet select:focus { outline: 2px solid #ec6a2a; outline-offset: -1px; } /* Checkbox groups sit inside one column and stay on the baseline with the inputs beside them, rather than stretching the row to their own height. */ .wcbb-facet--types, .wcbb-facet--when { border: 0; margin: 0; padding: 0; min-width: 0; } .wcbb-facet--types .wcbb-check-group, .wcbb-facet--when .wcbb-check-group { display: flex; flex-wrap: wrap; gap: 4px 14px; min-height: 42px; align-content: center; } .wcbb-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; } .wcbb-check input { margin: 0; flex: 0 0 auto; } .wcbb-check span { font-family: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #243c4d; white-space: nowrap; } .wcbb-check--qualifier span { font-weight: 600; } /* Actions sit in the final column, aligned with the inputs. */ .wcbb-facet--actions { display: flex; align-items: center; gap: 14px; } .wcbb-btn { height: 42px; padding: 0 26px; border: 0; cursor: pointer; background: #1a3648; color: #f1f1e6; font-family: Oswald, "Arial Narrow", Arial, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .wcbb-btn:hover { background: #ec6a2a; } .wcbb-btn:focus-visible { outline: 3px solid #ec6a2a; outline-offset: 2px; } .wcbb-reset { font-size: 13px; color: #5d7183; white-space: nowrap; } .wcbb-reset:hover { color: #ec6a2a; } @media (max-width: 1100px) { .wcbb-facets { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .wcbb-facets { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; } .wcbb-facet--actions { justify-content: flex-start; } } .wcbb-count { margin: 0 0 10px; font-size: 14px; color: #8d9aa6; } .wcbb-count strong { color: #f1f1e6; } .wcbb-count-note { color: #5d7183; } /* The theme sets a global display on inline elements, which beats the [hidden] attribute. Without this the "in view" note shows before the map is touched. */ .wcbb-count-note[hidden] { display: none !important; } /* Layout Results and map are one component: two panels of identical height, tops aligned, sharing the facet bar's border treatment. The list scrolls inside itself rather than driving the page to 35,000px, so the map never leaves the viewport and the pair reads as a single control surface. */ .wcbb-map-layout { display: flex; gap: 0; align-items: stretch; border-top: 4px solid #1a3648; background: #f1f1e6; } .wcbb-results { flex: 0 0 400px; max-width: 400px; height: var(--wcbb-panel-h, calc(100vh - 210px)); min-height: 460px; overflow-y: auto; overscroll-behavior: contain; background: #f1f1e6; border-right: 1px solid #d8d8c8; } .wcbb-map-col { flex: 1 1 auto; min-width: 0; } .wcbb-map { height: var(--wcbb-panel-h, calc(100vh - 210px)); min-height: 460px; background: #e9e9e0; } .wcbb-map .wcbb-marker { display: none; } /* Scrollbar reads as part of the panel rather than an OS artefact. */ .wcbb-results::-webkit-scrollbar { width: 10px; } .wcbb-results::-webkit-scrollbar-track { background: #e7e7d9; } .wcbb-results::-webkit-scrollbar-thumb { background: #b4b7a8; } .wcbb-results::-webkit-scrollbar-thumb:hover { background: #1a3648; } .wcbb-results { scrollbar-color: #b4b7a8 #e7e7d9; scrollbar-width: thin; } /* Result rows A continuous list separated by hairlines, not detached cards floating on black. Removing the gaps is what makes the column read as one panel. */ .wcbb-card { position: relative; padding: 14px 18px; margin: 0; cursor: pointer; background: transparent; border: 0; border-bottom: 1px solid #dedecf; box-shadow: none; } .wcbb-card:last-child { border-bottom: 0; } .wcbb-card:hover { background: #e9e9db; } .wcbb-card.is-selected { background: #fff8e2; } /* The status stripe lives inside the row, so rows stay flush with each other. */ .wcbb-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; } .wcbb-card.is-qualifier::before { background: #d4a017; } .wcbb-card__title { margin: 0 0 3px; font-size: 16px; line-height: 1.25; } .wcbb-card__title a { color: #1a3648; text-decoration: none; } .wcbb-card:hover .wcbb-card__title a { color: #ec6a2a; } /* The title anchor covers the whole row. The row is therefore a real link for keyboards and screen readers, not a div with a click handler, and the entire card is the target rather than just the few words of the name. */ .wcbb-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .wcbb-card__link:focus-visible::after { outline: 3px solid #ec6a2a; outline-offset: -3px; } .wcbb-card__date { margin: 0 0 2px; font-size: 13px; color: #243c4d; } .wcbb-card__loc { margin: 0; font-size: 12.5px; line-height: 1.4; color: #5d7183; } .wcbb-card__badge { display: inline-block; margin: 7px 0 0; padding: 2px 8px; background: #d4a017; color: #241a00; font-family: Oswald, "Arial Narrow", Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .wcbb-star { color: #d4a017; font-size: 1.05em; } .wcbb-empty { padding: 26px 18px; color: #5d7183; font-size: 14px; } /* Info window */ .wcbb-iw { font-family: Tahoma, sans-serif; font-size: 14px; line-height: 1.45; } .wcbb-iw a { display: block; margin-bottom: 3px; font-weight: 700; color: #1a3648; } .wcbb-iw__date { display: block; color: #5d7183; font-size: 13px; } .wcbb-iw__badge { display: block; margin-top: 5px; color: #8a6508; font-weight: 700; font-size: 12px; } /* Stack on tablet and down; the sticky map becomes a fixed-height band. */ @media (max-width: 1024px) { .wcbb-map-layout { flex-direction: column; } .wcbb-results, .wcbb-map-col { flex: 1 1 auto; max-width: none; width: 100%; } .wcbb-results { height: 48vh; min-height: 300px; border-right: 0; border-top: 1px solid #d8d8c8; } .wcbb-map { height: 46vh; min-height: 280px; } } @media (max-width: 640px) { .wcbb-map-page { padding: 16px 14px 36px; } .wcbb-facets { gap: 14px; padding: 16px; } .wcbb-facet input[type="search"], .wcbb-facet select { min-width: 0; width: 100%; } } .wcbb-notice { margin: -6px 0 14px; padding: 10px 14px; background: #fdf6e3; border-left: 4px solid #d4a017; font-size: 14px; color: #5a4a1a; } /* Past contests are dimmed so a 2015 show does not read like a 2027 one. */ .wcbb-card.is-past { opacity: .68; } .wcbb-card.is-past::before { background: #b0b6ab; } .wcbb-card.is-past:hover, .wcbb-card.is-past:focus-visible { opacity: 1; } .wcbb-card.is-past.is-qualifier::before { background: #c8ab5e; } /* Keyboard focus and selected state. Cards are operable controls, so they need a visible focus ring - the theme does not provide one. */ .wcbb-card.is-selected { background: #fff8e2; } .wcbb-card.is-selected::before { background: #ec6a2a; } /* Back to top: a 35,000px result list needs a way out. */ .wcbb-top { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: inline-flex; align-items: center; gap: 7px; padding: 11px 15px; border: 0; cursor: pointer; background: #1a3648; color: #f1f1e6; text-decoration: none; font-family: Oswald, "Arial Narrow", Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: 0; visibility: hidden; transition: opacity .18s ease; } .wcbb-top.is-visible { opacity: 1; visibility: visible; } .wcbb-top:hover { background: #ec6a2a; } .wcbb-top:focus-visible { outline: 3px solid #ec6a2a; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .wcbb-top { transition: none; } } /* Sticky-footer reservation The theme's script sets body { padding-bottom: