/** * Public Show Calendar styles (SC/0.3.5). * * Self-contained, BEM-scoped under .ks-shows, reusing the KopiKatts clean-card * design tokens (clay #B25A3E) introduced with the 1C account area. */ .ks-shows { --ks-accent: #B25A3E; --ks-accent-strong: #984B33; --ks-accent-tint: #F6ECE7; --ks-bg: #EDEFF2; --ks-surface: #FFFFFF; --ks-shadow: 0 6px 18px rgba( 17, 24, 39, 0.09 ); --ks-text: #1F2733; --ks-muted: #8A929E; --ks-border: #E2E6EB; box-sizing: border-box; /* GeneratePress lays out .site-content as a flex row, so a default * (flex: 0 1 auto) child shrinks to its content width and left-aligns. * width:100% makes the calendar fill the content area — mirrors .ks-account. */ width: 100%; min-width: 0; background: var( --ks-bg ); color: var( --ks-text ); padding: 2rem 1rem; } .ks-shows *, .ks-shows *::before, .ks-shows *::after { box-sizing: border-box; } /* GeneratePress / GenerateBlocks Page-Hero elements (e.g. the site-wide "Blog * Page Header" / "Our latest articles." hero — a div.gb-element-* hooked in at * level on the Blog display location) bleed onto the calendar routes; * they are never part of the Show Calendar UI. Hide any gb-element sitting * directly under on calendar routes, exactly as the account/admin shells * do. The GeneratePress header + footer are theme markup (not gb-elements) and * are unaffected. (SC post-deploy follow-up, 2026-06-02.) */ .ks-shows-page > [class*="gb-element"], body.ks-shows-page > [class*="gb-element"] { display: none !important; } /* Breathing room above the theme footer (mirrors .ks-account-page). */ .ks-shows-page .site-footer { padding-top: 60px; } .ks-shows__inner { max-width: 1200px; margin: 0 auto; } /* The carded surface that holds the filters + results (clean-UI system). */ .ks-shows__panel { background: var( --ks-surface ); border: 1px solid var( --ks-border ); border-radius: 16px; box-shadow: var( --ks-shadow ); padding: 1.5rem; margin-bottom: 60px; } .ks-shows__head { margin-bottom: 1.5rem; } .ks-shows__title { margin: 0 0 0.4rem; font-size: 2rem; line-height: 1.15; } .ks-shows__lead { margin: 0; color: var( --ks-muted ); /* Wide enough to keep the intro on one line on desktop (so the trailing * clause doesn't orphan onto its own line); wraps naturally on mobile. */ max-width: 60rem; text-wrap: pretty; } /* Filters --------------------------------------------------------------- */ .ks-shows__filters { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: flex-end; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var( --ks-border ); } .ks-shows__filter { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 11rem; min-width: 0; } .ks-shows__filter--search { flex: 2 1 16rem; } .ks-shows__filter--actions { flex: 0 0 auto; flex-direction: row; gap: 0.5rem; align-items: center; } .ks-shows__filter label { font-size: 0.78rem; font-weight: 600; color: var( --ks-muted ); text-transform: uppercase; letter-spacing: 0.02em; } .ks-shows__filter input, .ks-shows__filter select { width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var( --ks-border ); border-radius: 8px; background: #fff; color: var( --ks-text ); font-size: 0.95rem; } .ks-shows__filter input:focus, .ks-shows__filter select:focus { outline: 2px solid var( --ks-accent-tint ); border-color: var( --ks-accent ); } /* Buttons --------------------------------------------------------------- */ .ks-shows__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.55rem 1rem; border-radius: 8px; border: 1px solid var( --ks-border ); background: #fff; color: var( --ks-text ); font-weight: 600; font-size: 0.92rem; text-decoration: none; cursor: pointer; line-height: 1.2; transition: background 0.12s ease, border-color 0.12s ease; } .ks-shows__btn:hover { border-color: var( --ks-accent ); } .ks-shows__btn--primary { background: var( --ks-accent ); border-color: var( --ks-accent ); color: #fff; } .ks-shows__btn--primary:hover { background: var( --ks-accent-strong ); border-color: var( --ks-accent-strong ); color: #fff; } .ks-shows__btn--ghost { background: transparent; } .ks-shows__btn--block { display: flex; width: 100%; margin-top: 0.5rem; } /* List + cards ---------------------------------------------------------- */ .ks-shows__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .ks-shows__empty { margin: 0; padding: 1rem 0; color: var( --ks-muted ); } .ks-shows__notfound { background: var( --ks-surface ); border: 1px solid var( --ks-border ); border-radius: 16px; box-shadow: var( --ks-shadow ); padding: 2rem; color: var( --ks-muted ); margin-bottom: 60px; } .ks-show-card { display: flex; gap: 1.1rem; align-items: stretch; background: var( --ks-surface ); border: 1px solid var( --ks-border ); border-radius: 12px; padding: 1.1rem 1.25rem; } .ks-show-card:hover { border-color: #D4D9E0; } .ks-show-card__date { flex: 0 0 4.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var( --ks-accent-tint ); border-radius: 10px; padding: 0.5rem; text-align: center; color: var( --ks-accent-strong ); } .ks-show-card__day { font-size: 1.6rem; font-weight: 700; line-height: 1; } .ks-show-card__mon { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; } .ks-show-card__yr { font-size: 0.75rem; color: var( --ks-muted ); } .ks-show-card__tbc { font-size: 0.85rem; font-weight: 600; } .ks-show-card__body { flex: 1 1 auto; min-width: 0; } .ks-show-card__name { margin: 0 0 0.3rem; font-size: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .ks-show-card__name a { color: var( --ks-text ); text-decoration: none; } .ks-show-card__name a:hover { color: var( --ks-accent ); } .ks-show-card__venue, .ks-show-card__club { margin: 0 0 0.5rem; color: var( --ks-muted ); font-size: 0.92rem; display: flex; align-items: center; gap: 0.3rem; } .ks-show-card__club { margin-bottom: 0.25rem; font-weight: 600; color: var( --ks-text, inherit ); } .ks-show-card__venue .dashicons, .ks-show-card__club .dashicons { font-size: 1rem; width: 1rem; height: 1rem; } .ks-show-card__links { display: flex; flex-wrap: wrap; gap: 0.75rem; } .ks-show-card__doc { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.88rem; color: var( --ks-accent-strong ); text-decoration: none; } .ks-show-card__doc:hover { text-decoration: underline; } .ks-show-card__doc .dashicons { font-size: 1rem; width: 1rem; height: 1rem; } .ks-show-card__doc--alert { color: #B54708; } .ks-show-card__actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; } /* Badges ---------------------------------------------------------------- */ .ks-shows .ks-badge { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; } .ks-shows .ks-badge--open { background: #E7F4EC; color: #1B7A43; } .ks-shows .ks-badge--closing { background: #FDF1DC; color: #B54708; } .ks-shows .ks-badge--closed { background: #ECEEF1; color: #5B6470; } .ks-shows .ks-badge--results { background: #E6EEFB; color: #1F4FA3; } .ks-shows .ks-badge--soon { background: var( --ks-accent-tint ); color: var( --ks-accent-strong ); } /* Detail page ----------------------------------------------------------- */ .ks-show-detail__back { margin: 0 0 1rem; } .ks-show-detail__back a { color: var( --ks-accent-strong ); text-decoration: none; } .ks-show-detail__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; } .ks-show-detail__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media ( min-width: 820px ) { .ks-show-detail__grid { grid-template-columns: 2fr 1fr; align-items: start; } } .ks-show-detail__main, .ks-show-detail__panel { background: var( --ks-surface ); border: 1px solid var( --ks-border ); border-radius: 14px; box-shadow: var( --ks-shadow ); padding: 1.5rem; } .ks-show-detail__facts { margin: 0; display: grid; gap: 0.75rem; } .ks-show-detail__facts div { display: flex; gap: 0.75rem; } .ks-show-detail__facts dt { flex: 0 0 8rem; font-weight: 600; color: var( --ks-muted ); margin: 0; } .ks-show-detail__facts dd { margin: 0; } .ks-show-detail__section { margin-top: 1.5rem; border-top: 1px solid var( --ks-border ); padding-top: 1.25rem; } .ks-show-detail__section h2 { display: flex; align-items: center; gap: 0.4rem; font-size: 1.15rem; margin: 0 0 0.75rem; color: #B54708; } .ks-show-detail__changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .ks-show-detail__changes li { padding: 0.6rem 0.75rem; background: #FDF6EE; border: 1px solid #F2E2CF; border-radius: 8px; } .ks-show-detail__change-note { display: block; margin-top: 0.2rem; color: var( --ks-muted ); font-size: 0.9rem; } .ks-show-detail__panel h2 { margin: 0 0 0.75rem; font-size: 1.15rem; } .ks-show-detail__docs { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .ks-show-detail__doc a { display: inline-flex; align-items: center; gap: 0.35rem; color: var( --ks-accent-strong ); text-decoration: none; font-weight: 600; } .ks-show-detail__doc a:hover { text-decoration: underline; } .ks-show-detail__stamp { display: block; font-size: 0.8rem; color: var( --ks-muted ); margin-left: 1.35rem; } .ks-show-detail__muted { color: var( --ks-muted ); font-size: 0.9rem; margin: 0.5rem 0 0; } /* Mobile ---------------------------------------------------------------- */ @media ( max-width: 640px ) { .ks-show-card { flex-wrap: wrap; } .ks-show-card__date { flex-direction: row; gap: 0.4rem; flex: 0 0 auto; align-items: baseline; padding: 0.4rem 0.7rem; } .ks-show-card__actions { flex-direction: row; width: 100%; } .ks-show-card__actions .ks-shows__btn { flex: 1 1 auto; } .ks-shows__filter { flex: 1 1 100%; } }