/* Theme Name: NCNCA 2027 Description: Rebuild of ncnca.org — "Race Bulletin" direction, Barlow type, dark blue header, NCNCA red. Built for the free The Events Calendar; reads the race links Events Calendar Pro stored. Version: 0.1.0 Requires at least: 6.9 Requires PHP: 8.0 Author: NCNCA Text Domain: ncnca License: GPLv2 or later */ :root { --navy: #011E41; --navy-2: #13285A; --navy-3: #1E3466; --red: #D7141E; --red-logo: #ED1C24; --ink: #011E41; --text: #2A3550; --muted: #3E4A5E; --line: #DCE2EC; --soft: #F3F4F7; --pink: #FFB3BC; --pale: #C9D3E8; --blue-tag-bg: #DCE6FB; --blue-tag: #14306E; --pink-tag-bg: #FBE0E4; --pink-tag: #8A0C20; --radius: 6px; --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; /* The Events Calendar picks these up. */ --tec-color-accent-primary: var(--red); --tec-color-accent-primary-hover: #B30F18; --tec-color-accent-primary-active: #B30F18; --tec-color-button-primary: var(--red); --tec-color-link-accent: var(--red); --tec-color-text-primary: var(--ink); --tec-color-text-secondary: var(--muted); --tec-color-icon-active: var(--red); --tec-color-day-marker-current-month: var(--ink); --tec-font-family-sans-serif: var(--font); --tec-font-family-base: var(--font); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: #FFFFFF; color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.6; } img { max-width: 100%; height: auto; } a { color: var(--red); text-decoration: none; } a:hover { color: var(--ink); text-decoration: underline; } :focus-visible { outline: 3px solid #2F6BFF; outline-offset: 2px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 1000; background: #FFF; color: var(--ink); padding: 10px 16px; border-radius: 6px; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; } .center { text-align: center; } .muted { color: var(--muted); } .small { font-size: 14px; } .display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; margin: 0; } .kicker { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); } .kicker a { color: inherit; } .kicker-light { color: var(--pink); } .kicker-white { color: #FFF; } .kicker-pink { color: var(--pink); } .underline { width: 64px; height: 4px; background: var(--red-logo); margin: 14px auto 0; } .underline-white { background: #FFF; } /* ------------------------------------------------------------ buttons */ .pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; padding: 14px 26px; min-height: 48px; border: 2px solid transparent; text-decoration: none; line-height: 1.2; text-align: center; } .pill:hover { text-decoration: none; filter: brightness(1.08); } .pill-red { background: var(--red); color: #FFF; } .pill-red:hover { color: #FFF; } .pill-navy { background: var(--navy); color: #FFF; } .pill-navy:hover { color: #FFF; } .pill-white { background: #FFF; color: var(--ink); } .pill-white-red { background: #FFF; color: var(--red); } .pill-ghost { border-color: #FFF; color: #FFF; } .pill-ghost:hover { color: #FFF; background: rgba(255,255,255,.12); } .pill-outline { border-color: var(--navy); color: var(--navy); } .pill-outline:hover { color: var(--navy); background: var(--soft); } .pill-muted { background: var(--navy-2); color: var(--pale); font-size: 13px; padding: 10px 18px; min-height: 40px; } .pill-disabled { background: var(--soft); color: var(--muted); border-color: var(--line); cursor: default; font-size: 13px; } .text-link { display: inline-block; margin-top: 18px; font-weight: 700; } .tags { display: flex; flex-wrap: wrap; gap: 6px; } .tags-center { justify-content: center; } .tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; line-height: 1.4; } .tag-blue { background: var(--blue-tag-bg); color: var(--blue-tag); } .tag-pink { background: var(--pink-tag-bg); color: var(--pink-tag); } .tag-red { background: var(--red); color: #FFF; } .tag-white { background: #FFF; color: var(--ink); } /* ------------------------------------------------------------- header */ .top-strip { height: 6px; background: var(--red-logo); } .site-header { background: var(--navy); color: #FFF; position: relative; z-index: 50; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; } .brand { display: flex; align-items: center; gap: 16px; color: #FFF; } .brand:hover { color: #FFF; text-decoration: none; } .brand img { height: 64px; width: auto; display: block; } .brand-name { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--pale); max-width: 200px; } .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; } .main-nav a { color: #FFF; font-weight: 500; font-size: 17px; padding: 10px 2px; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 3px solid transparent; } .main-nav a:hover { color: var(--pink); text-decoration: none; } .main-nav .current-menu-item > a, .main-nav .current_page_item > a, .main-nav .current-menu-ancestor > a { border-bottom-color: var(--red-logo); } .menu-toggle { display: none; width: 48px; height: 48px; background: transparent; border: 0; color: #FFF; align-items: center; justify-content: center; cursor: pointer; border-radius: 6px; } /* --------------------------------------------------------------- hero */ .hero { position: relative; min-height: 600px; display: flex; align-items: center; justify-content: center; background: var(--navy-3) var(--hero, none) center / cover no-repeat; color: #FFF; text-align: center; } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,30,65,.55), rgba(1,30,65,.78)); } .hero-inner { position: relative; padding-top: 80px; padding-bottom: 80px; } .hero-title { font-size: clamp(44px, 7vw, 92px); line-height: 1; color: #FFF; margin: 16px auto 0; max-width: 1000px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; } /* ------------------------------------------------------------ sections */ .section { padding-top: 80px; } .section-tight { padding-top: 40px; } .section-pad { padding-top: 72px; padding-bottom: 72px; } .section-title { font-size: 49px; } .section-title-sm { font-size: 40px; } .section > .pill, .center > .pill { margin-top: 32px; } .page-band { background: var(--navy); color: #FFF; padding: 48px 0 44px; border-top: 1px solid var(--navy-2); } .page-band h1 { font-size: clamp(40px, 6vw, 72px); color: #FFF; margin-top: 8px; } .page-band .kicker a { color: var(--pink); } .band-lede { color: var(--pale); font-size: 20px; max-width: 760px; margin: 14px 0 0; } .band-red { background: var(--red); color: #FFF; margin-top: 88px; } .band-title { font-size: clamp(40px, 6vw, 72px); margin-top: 10px; } /* race cards */ .race-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; margin-top: 36px; text-align: left; } .race-card { display: flex; gap: 18px; padding: 22px; border-radius: var(--radius); background: var(--soft); color: var(--ink); } .race-card:hover { text-decoration: none; color: var(--ink); background: #E9ECF2; } .chip { width: 72px; flex: 0 0 72px; border-radius: var(--radius); background: var(--red); color: #FFF; text-align: center; padding: 10px 0; display: flex; flex-direction: column; align-self: flex-start; } .chip-mon { font-size: 12px; font-weight: 800; letter-spacing: .12em; } .chip-day { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 1.1; } .race-card-body { display: flex; flex-direction: column; min-width: 0; } .race-card-name { font-size: 18px; font-weight: 700; line-height: 1.3; } .race-card-place { color: var(--muted); font-size: 14px; margin-top: 4px; } .race-card .tags { margin-top: 10px; } /* championships */ .champ-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 40px; text-align: left; } .champ-card { background: #FFF; color: #15171C; border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 6px; border-top: 6px solid var(--navy); } .champ-card:hover { color: #15171C; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.18); } .champ-date { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); } .champ-name { font-size: 20px; font-weight: 700; line-height: 1.25; } .champ-place { color: #4A4D55; font-size: 14px; } /* cards */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 36px; text-align: left; } .card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--soft); color: var(--ink); } .card:hover { text-decoration: none; color: var(--ink); background: #E9ECF2; } .card-media { display: block; aspect-ratio: 16 / 9; background: var(--line); overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-media-empty { background: var(--navy) url(assets/ncnca-logo-white.svg) center / auto 46% no-repeat; } .card-media img.is-logo { object-fit: contain; background: #FFF; padding: 12px; } .card-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; flex: 1; } .card-title { font-size: 20px; font-weight: 800; line-height: 1.3; } .card-text { color: var(--text); font-size: 15px; line-height: 1.6; } .card-meta { color: var(--muted); font-size: 13px; } .card-cta { margin-top: auto; padding-top: 10px; font-weight: 700; color: var(--red); font-size: 15px; } /* split panels */ .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; } .panel { background: var(--soft); border-radius: var(--radius); padding: 32px; } .panel p { color: var(--text); margin: 10px 0 0; } .panel-title { font-size: 26px; font-weight: 800; margin-top: 8px; line-height: 1.25; } .panel-navy { background: var(--navy); color: #FFF; } .panel-navy p { color: var(--pale); } .panel .pill { margin-top: 18px; } .social-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; } /* ------------------------------------------------------------- footer */ .site-footer { border-top: 6px solid var(--red-logo); margin-top: 96px; background: var(--navy); color: var(--pale); font-size: 15px; } .footer-grid { padding-top: 48px; padding-bottom: 32px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; } .footer-brand img { display: block; } .footer-brand p { margin: 14px 0 0; max-width: 280px; } .footer-marks { display: flex; gap: 12px; align-items: center; margin-top: 16px; } .footer-marks img { height: 32px; width: auto; display: block; border-radius: 2px; } .usac-mark img { height: 46px; background: #FFF; border-radius: 4px; padding: 3px; } .footer-col { display: flex; flex-direction: column; gap: 4px; } .footer-col h2 { color: #FFF; font-size: 15px; font-weight: 800; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .08em; } .footer-col a, .footer-social a { color: var(--pale); padding: 6px 0; } .footer-col a:hover, .footer-social a:hover { color: #FFF; } .footer-base { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; border-top: 1px solid var(--navy-2); padding-top: 18px; padding-bottom: 24px; font-size: 14px; } .footer-social { display: flex; gap: 18px; } /* ----------------------------------------------------------- race page */ .race-page .tribe-events-before-html:empty { display: none; } .race-hero { position: relative; background: var(--navy-3) var(--hero, none) center / cover no-repeat; color: #FFF; text-align: center; min-height: 420px; display: flex; align-items: center; justify-content: center; } .race-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,30,65,.55), rgba(1,30,65,.82)); } .race-hero-inner { position: relative; padding-top: 56px; padding-bottom: 96px; } .race-title { font-size: clamp(42px, 6.5vw, 84px); color: #FFF; margin: 18px auto 0; max-width: 1000px; } .race-when { font-size: 20px; font-weight: 600; margin-top: 14px; } .past-note { display: inline-block; margin-top: 14px; background: rgba(255,255,255,.14); padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; } .action-wrap { position: relative; margin-top: -52px; } .action-bar { background: #FFF; border-radius: 10px; box-shadow: 0 10px 30px rgba(1,30,65,.16); padding: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .crumbs { text-align: center; color: var(--muted); font-size: 15px; margin-top: 14px; } .fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .fact { background: var(--soft); border-radius: var(--radius); padding: 22px; } .fact-left { text-align: left; } .fact-k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .fact-v { font-size: 18px; font-weight: 700; margin-top: 6px; line-height: 1.35; } .fact-v-sm { font-size: 16px; } .fact-s { color: var(--muted); font-size: 14px; margin-top: 4px; } .link-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-weight: 700; } .raceday-bar { margin-top: 16px; background: var(--navy); color: #FFF; border-radius: var(--radius); padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } .raceday-title { font-size: 18px; font-weight: 700; margin-top: 4px; } .race-description { margin-top: 32px; max-width: 800px; } .race-website { margin-top: 8px; } .venue-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 32px; text-align: left; } .venue-map { flex: 1 1 520px; min-width: 0; } .venue-map iframe { width: 100%; border-radius: var(--radius); } .map-empty { height: 300px; border-radius: var(--radius); background: var(--soft); color: var(--muted); display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; } .map-strava { flex-direction: column; gap: 16px; background: linear-gradient(135deg, var(--navy-3), var(--navy)); color: var(--pale); } .map-strava span { font-size: 18px; font-weight: 600; color: #FFF; } .venue-side { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .warn { background: var(--red); color: #FFF; border-radius: var(--radius); padding: 18px 20px; display: flex; gap: 14px; } .warn svg { flex: 0 0 26px; } .warn strong { display: block; font-size: 17px; } .warn span { display: block; font-size: 15px; margin-top: 4px; line-height: 1.5; } .history-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 32px; text-align: left; } .history-card { background: var(--soft); border-radius: var(--radius); overflow: hidden; } .history-head { background: var(--navy); color: var(--pale); padding: 14px 18px; display: flex; flex-direction: column; font-size: 13px; } .history-year { font-size: 34px; line-height: 1; color: #FFF; } .history-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; } .race-grid-left { margin-top: 12px; } /* hide legacy single-event chrome The Events Calendar still prints */ .single-tribe_events .tribe-events-back, .single-tribe_events #tribe-events-header, .single-tribe_events #tribe-events-footer, .single-tribe_events .tribe-events-notices { display: none; } .single-tribe_events #tribe-events-pg-template, .single-tribe_events .tribe-events-pg-template { max-width: none; padding: 0; margin: 0; } /* ------------------------------------------------ calendar (list view) */ .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .chip-link { color: #FFF; border: 2px solid rgba(255,255,255,.5); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; } .chip-link:hover { color: var(--navy); background: #FFF; text-decoration: none; } .chip-link.is-current { background: var(--red); border-color: var(--red); } .post-type-archive-tribe_events .site-main, .tax-tribe_events_cat .site-main { overflow-x: clip; } .post-type-archive-tribe_events .tribe-events-pg-template, .tax-tribe_events_cat .tribe-events-pg-template { max-width: 1200px; margin: 0 auto; padding: 32px 32px 0; } .tribe-common .tribe-events-calendar-list__month-separator-text, .tribe-common .tribe-common-h7--min-medium { font-family: var(--font-display) !important; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); } .tribe-common .tribe-events-calendar-list__event-title, .tribe-common .tribe-events-calendar-list__event-title-link { font-family: var(--font) !important; font-weight: 700 !important; color: var(--ink) !important; } .tribe-common .tribe-events-calendar-list__event-title-link:hover { color: var(--red) !important; } .tribe-common .tribe-events-calendar-list__event-date-tag-weekday { color: var(--red); font-weight: 800; } .tribe-common .tribe-events-calendar-list__event-date-tag-daynum { font-family: var(--font-display) !important; font-size: 28px !important; line-height: 1.1 !important; color: var(--ink); } .tribe-common .tribe-events-calendar-list__event-row { border-radius: var(--radius); } .tribe-common .tribe-events-c-top-bar__datepicker-button, .tribe-common .tribe-events-c-view-selector__button { font-family: var(--font); } .tribe-events .tribe-events-c-search__button, .tribe-common .tribe-common-c-btn { background: var(--red) !important; border-radius: 999px !important; font-weight: 700; } .tribe-events-c-subscribe-dropdown__button { border-radius: 999px !important; } /* Calendar list: compact rows, small pictures */ .tag-series { background: var(--navy); color: #FFF; } .pill-sm { font-size: 13px; padding: 8px 16px; min-height: 38px; } .tribe-common .ncnca-list-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0 0 0 10px; vertical-align: middle; } .ncnca-list-zoom { margin-top: 10px; } .tribe-common .ncnca-list-zoom a.pill { display: inline-flex; align-items: center; gap: 6px; background: var(--red); color: #FFF; border-radius: 999px; padding: 8px 16px; font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; } .tribe-common .ncnca-list-zoom a.pill:hover { color: #FFF; filter: brightness(1.08); } .tribe-common .tribe-events-calendar-list__event-row { margin-bottom: 10px !important; } .tribe-common .tribe-events-calendar-list__event-header { display: block !important; } .tribe-common .tribe-events-calendar-list__event-title { display: inline !important; margin: 0 !important; } .tribe-common .tribe-events-calendar-list__event-title-link { font-size: 20px !important; line-height: 1.2 !important; } .tribe-common .tribe-events-calendar-list__event-venue { display: block; margin-top: 4px !important; } /* The Events Calendar's own category pill duplicates our tags (feature also switched off in settings). */ .tec-events-calendar-list__event-categories { display: none !important; } .tribe-common .tribe-events-calendar-list__event-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px !important; } @media (min-width: 768px) { .tribe-common article.tribe-events-calendar-list__event { flex-wrap: nowrap !important; align-items: flex-start; } .tribe-common .tribe-events-calendar-list__event-featured-image-wrapper { order: 2; /* the list row is row-reverse, so this puts the picture on the left */ flex: 0 0 88px !important; width: 88px !important; max-width: 88px !important; padding: 0 12px !important; margin: 0 !important; } .tribe-common .tribe-events-calendar-list__event-featured-image-link { display: block; height: 64px; } .tribe-common .tribe-events-calendar-list__event-featured-image { width: 64px !important; height: 64px !important; max-height: 64px !important; object-fit: cover; border-radius: 8px; } /* Races without a picture keep the picture's space so names line up. */ .tribe-common article.tribe-events-calendar-list__event:not(:has(.tribe-events-calendar-list__event-featured-image-wrapper)) .tribe-events-calendar-list__event-details { margin-left: 88px !important; } .tribe-common .tribe-events-calendar-list__event-details { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0; } } @media (max-width: 767px) { .tribe-common .tribe-events-calendar-list__event-featured-image-wrapper { display: none; } } /* ------------------------------------------------------ page content */ .entry { padding-top: 40px; } .entry-content { max-width: 860px; color: var(--text); } .entry-content > * + * { margin-top: 1em; } .entry-content .has-large-font-size { font-size: 22px !important; line-height: 1.5; color: var(--ink); } .entry-content h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 34px; line-height: 1.1; color: var(--ink); margin-top: 1.6em; } .entry-content h3 { font-size: 21px; color: var(--ink); margin-top: 1.4em; } .entry-content .alignwide { max-width: 1136px; } .entry-content table { width: 100%; border-collapse: collapse; font-size: 16px; } .entry-content th, .entry-content td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } .entry-content thead th { background: var(--soft); color: var(--ink); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; } .entry-content .wp-block-button__link { border-radius: 999px; background: var(--red); color: #FFF; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; padding: 14px 26px; } .entry-content .is-style-outline .wp-block-button__link { background: transparent; color: var(--navy); border: 2px solid var(--navy); } .entry-content .wp-block-group.has-background { border-radius: var(--radius); padding: 28px; } .entry-content .wp-block-columns { gap: 20px; } .entry-hero img { border-radius: var(--radius); } .page-updated { color: var(--muted); font-size: 13px; margin-top: 48px; border-top: 1px solid var(--line); padding-top: 14px; max-width: 860px; } .pager { margin-top: 32px; } /* --------------------------------------------------------- responsive */ @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { body { font-size: 16px; } .wrap { padding: 0 16px; } .brand img { height: 48px; } .brand-name { display: none; } .menu-toggle { display: inline-flex; } .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--navy); border-top: 1px solid var(--navy-2); padding: 8px 16px 16px; box-shadow: 0 12px 24px rgba(0,0,0,.25); } .main-nav.is-open { display: block; } .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; } .main-nav a { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--navy-2); } .hero { min-height: 460px; } .hero-inner { padding-top: 48px; padding-bottom: 48px; } .hero-title { font-size: 45px; } .hero-actions { flex-direction: column; align-items: stretch; } .section { padding-top: 48px; } .section-title { font-size: 34px; } .section-title-sm { font-size: 29px; } .band-red { margin-top: 48px; } .section-pad { padding-top: 44px; padding-bottom: 44px; } .race-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; } .race-card { padding: 12px; gap: 12px; } .chip { width: 56px; flex-basis: 56px; padding: 6px 0; } .chip-day { font-size: 27px; } .race-card-name { font-size: 16px; } .card-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; } .split { grid-template-columns: 1fr; } .panel { padding: 20px; } .page-band { padding: 32px 0 28px; } .race-hero { min-height: 340px; } .race-hero-inner { padding-top: 32px; padding-bottom: 76px; } .race-title { font-size: 40px; } .race-when { font-size: 16px; } .action-wrap { margin-top: -44px; } .action-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 8px; } .action-bar .pill { font-size: 13px; padding: 12px 8px; } .action-bar .action-main { grid-column: 1 / -1; font-size: 16px; } .action-bar .pill:nth-child(4) { grid-column: 1 / -1; } .fact-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .fact { padding: 14px; } .fact-v { font-size: 16px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; } .footer-brand { grid-column: 1 / -1; } .post-type-archive-tribe_events .tribe-events-pg-template, .tax-tribe_events_cat .tribe-events-pg-template { padding: 16px 16px 0; } } /* ---------- Member clubs: tiered logo wall (fits one screen) ---------- */ .club-intro { max-width: 860px; font-size: 18px; line-height: 1.55; } .club-intro em { font-style: normal; color: var(--ink); font-weight: 600; } .entry-content .club-tier { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; padding: 12px 0; margin-top: 0; border-top: 1px solid var(--line); max-width: 1136px; } .entry-content .club-tier + .club-tier { margin-top: 0; } .entry-content .club-intro + .club-tier { margin-top: 18px; } .entry-content .club-tier > h2 { margin: 0; font-size: 26px; line-height: 1; display: flex; flex-direction: column; gap: 6px; } .entry-content .club-tier > h2::before { content: ""; display: block; width: 36px; height: 6px; border-radius: 3px; background: var(--tier); } .entry-content .club-tier > h2 small { font-family: var(--font); font-size: 12px; letter-spacing: .08em; color: var(--muted); font-weight: 600; } .club-tier--gold { --tier: #C9A227; --tile-h: 74px; --tile-min: 118px; } .club-tier--silver { --tier: #9AA3AE; --tile-h: 62px; --tile-min: 104px; } .club-tier--bronze { --tier: #B07A45; --tile-h: 56px; --tile-min: 96px; } .entry-content .club-tier .wp-block-gallery { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr)); gap: 10px !important; margin: 0; } .entry-content .club-tier .wp-block-gallery > figure.wp-block-image { width: auto !important; margin: 0 !important; height: var(--tile-h); padding: 7px 9px; background: #FFF; border: 1px solid var(--line); border-top: 3px solid var(--tier); border-radius: var(--radius); display: flex !important; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(1,30,65,.05); } .entry-content .club-tier .wp-block-gallery > figure.wp-block-image img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; flex: 0 1 auto !important; } .entry-content .club-tier .wp-block-gallery figcaption { display: none; } .page-template-default .club-page-band .band-lede { max-width: 820px; } @media (max-width: 720px) { .entry-content .club-tier { grid-template-columns: 1fr; gap: 10px; } .entry-content .club-tier > h2 { flex-direction: row; align-items: center; } .club-tier--gold { --tile-min: 100px; --tile-h: 64px; } .club-tier--silver, .club-tier--bronze { --tile-min: 86px; --tile-h: 52px; } } .entry-content:has(.club-tier) { max-width: 1136px; } .entry-content .club-tier > .wp-block-group__inner-container { display: contents; } .entry-content .club-tier h2.wp-block-heading { border-left: 6px solid var(--tier); padding-left: 10px; margin: 0; font-size: 26px; line-height: 1.1; } /* Board Meetings page: next-meeting card. */ .ncnca-next-meeting { background: var(--soft); border-left: 4px solid var(--red); border-radius: var(--radius); padding: 20px 24px; margin: 24px 0; } .ncnca-next-meeting p { margin: 0; } .ncnca-next-meeting .ncnca-next-meeting-label { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); } .ncnca-next-meeting .ncnca-next-meeting-date { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.15; color: var(--ink); margin-top: 4px; } .ncnca-next-meeting .ncnca-next-meeting-time { color: var(--muted); margin-top: 2px; } .ncnca-next-meeting .ncnca-next-meeting-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } /* Member clubs: logos link to club sites (2026-10-17) */ .entry-content .club-tier .wp-block-gallery > figure.wp-block-image > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .entry-content .club-tier .wp-block-gallery > figure.wp-block-image:has(> a) { transition: box-shadow .15s, transform .15s; } .entry-content .club-tier .wp-block-gallery > figure.wp-block-image:has(> a:hover) { box-shadow: 0 3px 10px rgba(1,30,65,.14); transform: translateY(-1px); } .entry-content .club-tier .wp-block-gallery > figure.wp-block-image > a:focus-visible { outline: 2px solid var(--tier); outline-offset: 3px; } .entry-content .club-tier .wp-block-gallery > figure.club-logo--sjbc { padding-top: 3px; padding-bottom: 3px; } .entry-content .club-tier .wp-block-gallery > figure.club-logo--sjbc img { width: 93px !important; } /* ------------------------------------------------- Race calendar list (Oct 2026) */ .cal-band { background: #FFF; color: var(--ink); padding: 44px 0 0; } .cal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; } .cal-title { font-size: clamp(40px, 6vw, 64px); color: var(--ink); margin: 0; } .cal-title::after { content: ""; display: block; width: 52px; height: 4px; background: var(--red); margin-top: 10px; } .cal-search { display: flex; gap: 8px; width: min(100%, 420px); } .cal-search input { flex: 1 1 auto; min-width: 0; height: 44px; border: 1px solid var(--line); border-radius: 999px; padding: 0 18px; font: inherit; font-size: 15px; background: var(--soft); color: var(--ink); } .cal-search input:focus { outline: 2px solid var(--navy); outline-offset: 1px; background: #FFF; } .cal-search button { height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--navy); color: #FFF; font: inherit; font-weight: 700; cursor: pointer; } .cal-search button:hover { filter: brightness(1.2); } .cal-filters { margin-top: 26px; display: grid; gap: 10px; } .cal-filter-row { display: flex; align-items: flex-start; gap: 16px; } .cal-filter-label { flex: 0 0 104px; white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 12px; } .cal-chips { display: flex; flex-wrap: wrap; gap: 8px; } .cal-chip { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 14px; font-weight: 600; } .cal-chip:hover { background: #E3E7EF; color: var(--ink); text-decoration: none; } .cal-chip.is-current, .cal-chip.is-current:hover { background: var(--navy); color: #FFF; } .cal-note { margin: 16px 0 0; color: var(--muted); font-size: 15px; } .cal-rule { border: 0; border-top: 2px solid var(--ink); margin: 26px 0 0; } /* Search lives in the page header now. (Month headings were hidden here until 22 Oct 2026; shown again so visitors see the year.) */ .tribe-events .tribe-events-header__events-bar { display: none !important; } /* Rows: whole row is the link to the race page, with a chevron. */ .tribe-common .tribe-events-calendar-list__event-row { position: relative; margin: 0 !important; padding: 16px 40px 16px 0; border-bottom: 1px solid var(--line); border-radius: 0; } .tribe-common .tribe-events-calendar-list__event-row::after { content: ""; position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-50%) rotate(-45deg); pointer-events: none; } .tribe-common .tribe-events-calendar-list__event-row:hover { background: var(--soft); } .tribe-common .tribe-events-calendar-list__event-title-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .tribe-common .ncnca-list-zoom a.pill { position: relative; z-index: 2; } /* Calendar quick links (Reg / Flyer / Map / Strava) under each event - see ncnca_list_links() in functions.php. Above the row-wide link (z-index 2). Wide screens (over 1000px) put them on the right of the row, beside the arrow, with the text kept clear of them; narrower screens give them their own line under the title, on the left. Map is a pin icon everywhere, with the \2197 new-tab arrow like the others (2026-10-22). Phones (760px and under): all four on one line, with \2197 arrows - 11px text, 6px side padding, 3px gaps (2026-10-22; uses 210 of the 214px row at 360px wide). */ .tribe-common .ncnca-list-links { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } @media (min-width: 1001px) { .tribe-common .ncnca-list-links { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); margin-top: 0; flex-wrap: nowrap; } .tribe-common .tribe-events-calendar-list__event-row:has(.ncnca-list-links) .tribe-events-calendar-list__event-details { padding-right: 330px; } } .tribe-common .ncnca-list-links a.ncnca-ql { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 30px; padding: 4px 12px; border-radius: 6px; border: 1.5px solid var(--navy); background: #FFF; color: var(--navy); font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; text-decoration: none; } .tribe-common .ncnca-list-links a.ncnca-ql:hover { background: var(--soft); color: var(--navy); text-decoration: none; } .tribe-common .ncnca-list-links a.ncnca-ql-reg, .tribe-common .ncnca-list-links a.ncnca-ql-reg:hover { background: var(--red); border-color: var(--red); color: #FFF; } .tribe-common .ncnca-list-links a.ncnca-ql-reg:hover { filter: brightness(1.08); } .tribe-common .ncnca-list-links .ncnca-ql-pin { display: block; width: 16px; height: 16px; } .tribe-common .ncnca-list-links a.ncnca-ql-map { min-width: 0; padding: 4px 10px; } .tribe-common .ncnca-list-links a.ncnca-ql-map .ncnca-ql-text { display: none; } @media (max-width: 760px) { .tribe-common .ncnca-list-links { gap: 3px; } .tribe-common .ncnca-list-links a.ncnca-ql { min-height: 36px; min-width: 0; padding: 4px 6px; font-size: 11px; letter-spacing: .02em; } .tribe-common .ncnca-list-links a.ncnca-ql-map { padding: 4px 6px; } } .tribe-common .ncnca-list-date { display: block; } .tribe-common .ncnca-list-date .chip { width: 56px; flex-basis: 56px; padding: 7px 0; } .tribe-common .ncnca-list-date .chip-day { font-size: 28px; } /* Detail line, "usually has" cues and badges under the title. */ .tribe-common .ncnca-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 4px; font-size: 14px; line-height: 1.45; } .tribe-common .ncnca-meta-text { color: var(--muted); } .tribe-common .ncnca-cue { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 700; } .ncnca-cue svg { width: 13px; height: 13px; flex: 0 0 13px; } .tribe-common .ncnca-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ncnca-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1.5px solid var(--navy); color: var(--navy); line-height: 1.3; } .ncnca-badge-champ { background: var(--red); border-color: var(--red); color: #FFF; } .ncnca-badge svg { width: 11px; height: 11px; flex: 0 0 11px; } @media (max-width: 760px) { .cal-band { padding-top: 28px; } .cal-search { width: 100%; } .cal-filter-row { flex-direction: column; gap: 6px; } .cal-filter-label { padding-top: 0; flex-basis: auto; } .tribe-common .tribe-events-calendar-list__event-row { padding-right: 30px; } .tribe-common .tribe-events-calendar-list__event-row::after { right: 8px; } .tribe-common .tribe-events-calendar-list__event-date-tag { flex: 0 0 62px !important; width: 62px !important; max-width: 62px !important; padding: 0 !important; } .tribe-common .ncnca-list-date .chip { width: 50px; flex-basis: 50px; } .tribe-common .ncnca-list-date .chip-day { font-size: 24px; } } /* ---------------------------------------------------------------- BAR/BAT (hub, season pages, standings pages) */ .bb-nav { display: grid; gap: 12px; margin: 0 0 28px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .bb-nav-top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; } .bb-back { font-weight: 600; text-decoration: none; } .bb-nav-status { display: inline-flex; gap: 10px; align-items: center; } .bb-nav-year { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); } .bb-pill { display: inline-block; font: 600 12px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 3px; background: var(--soft); color: var(--ink); white-space: nowrap; } .bb-final { background: #E3F3E8; color: #1D6B38; } .bb-live { background: var(--blue-tag-bg); color: var(--blue-tag); } .bb-pending { background: var(--pink-tag-bg); color: var(--pink-tag); } .bb-tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .bb-tabs li { margin: 0; } .bb-tabs a { display: inline-block; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.2; } .bb-tabs a:hover, .bb-tabs a:focus-visible { border-color: var(--navy); } .bb-tabs a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; } .bb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 24px; } .bb-card { display: block; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 0 0 var(--radius) var(--radius); text-decoration: none; color: var(--text); } .bb-card:hover, .bb-card:focus-visible { border-color: var(--navy); border-top-color: var(--red); } .bb-card b { display: block; font-family: var(--font-display); font-size: 22px; line-height: 1.1; color: var(--ink); } .bb-card span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); } .bb-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 14px; } .bb-head h2 { margin: 0; } .bb-updated { font-size: 14px; color: var(--muted); } .bb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .bb-btn { display: inline-block; padding: 9px 14px; border: 1px solid var(--navy); border-radius: var(--radius); color: var(--navy); font-weight: 600; text-decoration: none; } .bb-btn:hover, .bb-btn:focus-visible { background: var(--navy); color: #fff; } .bb-past { margin-top: 44px; } .bb-past h2 { margin: 0 0 12px; } .bb-past-list { border-top: 1px solid var(--line); } .bb-row { display: grid; grid-template-columns: 6.5rem 1fr; gap: 4px 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); } .bb-year { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; } a.bb-year:hover { color: var(--red); } .bb-row-links { display: flex; flex-wrap: wrap; gap: 4px 18px; min-width: 0; } .bb-note, .ncnca-bb-pending { margin: 0 0 20px; padding: 14px 16px; background: var(--soft); border-left: 3px solid var(--navy); } .bb-contact { margin-top: 28px; font-size: 15px; color: var(--muted); } .bb-rules-meta { color: var(--muted); font-size: 15px; } .bb-points-wrap { overflow-x: auto; margin: 0 0 20px; } .bb-points { border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; } .bb-points th, .bb-points td { padding: 4px 7px; text-align: center; border: 1px solid var(--line); } .bb-points thead th, .bb-points tbody th { background: var(--soft); color: var(--ink); } .bb-points td:empty { background: transparent; border-color: transparent; } @media (max-width: 480px) { .bb-row { grid-template-columns: 1fr; } } /* ---------------------------------------------------------- BAR/BAT history */ .bb-history-link { margin-top: 44px; padding: 22px 24px; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 0 var(--radius) var(--radius) 0; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; } .bb-history-link h2 { margin: 0; font-size: 28px; } .bb-history-link p { margin: 4px 0 0; color: var(--muted); font-size: 15px; } .bbh { margin-top: 8px; } .entry-content:has(> .bbh) { max-width: none; } .entry-content:has(> .bbh) > p { max-width: 860px; } .bbh-loading { color: var(--muted); } .bbh-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .bbh-tabs button { font: 600 15px/1.2 var(--font); padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #FFF; color: var(--ink); cursor: pointer; } .bbh-tabs button:hover { border-color: var(--navy); } .bbh-tabs button.is-on { background: var(--navy); border-color: var(--navy); color: #FFF; } .bbh-panel:focus { outline: none; } .bbh-intro, .bbh-note-s, .bbh-source, .bbh-empty { color: var(--muted); font-size: 15px; } .bbh-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .bbh-season { border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 0 0 var(--radius) var(--radius); padding: 14px 16px 6px; min-width: 0; } .entry-content .bbh-season-h { margin: 0 0 8px; font-family: var(--font-display); font-size: 28px; line-height: 1; } .bbh-season-h a { color: var(--ink); } .bbh-season-h a:hover { color: var(--red); } .bbh-win { margin: 0 0 12px; font-size: 14.5px; line-height: 1.35; } .bbh-win-list { font: 700 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 8px 0 6px; } .bbh-win-row { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 8px; padding: 3px 0; border-top: 1px solid var(--soft); } .bbh-win-row.bbh-win-solo { grid-template-columns: minmax(0, 1fr); } .bbh-win dt { margin: 0; color: var(--muted); } .bbh-win dt a { color: var(--muted); } .bbh-win dt a:hover { color: var(--red); } .bbh-win dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .bbh-pts { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .bbh-pickers { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 8px; } .bbh-pickers label { display: grid; gap: 4px; font: 700 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .bbh-pickers select, .bbh-search input { font: 500 16px/1.3 var(--font); color: var(--ink); padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #FFF; min-width: 11rem; max-width: 100%; } .bbh-search input { width: 100%; max-width: 560px; } .bbh-pickers select:focus, .bbh-search input:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 3px var(--blue-tag-bg); } .entry-content .bbh-cat-h { font-family: var(--font-display); text-transform: uppercase; font-size: 22px; margin: 28px 0 8px; } .bbh-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 12px; } .entry-content .bbh-table { font-size: 15px; font-variant-numeric: tabular-nums; min-width: 520px; } .entry-content .bbh-table th, .entry-content .bbh-table td { padding: 7px 10px; } .entry-content .bbh-table .num { text-align: right; white-space: nowrap; } .entry-content .bbh-table .id { color: var(--muted); white-space: nowrap; } .entry-content .bbh-table tbody tr:hover { background: var(--soft); } .bbh-flag { color: var(--red); font-weight: 700; margin-left: 3px; cursor: help; } .bbh-key { color: var(--muted); } .bbh-aka { color: var(--muted); font-size: 14px; } .bbh-teamlist { columns: 2 280px; padding-left: 1.1em; margin: 0; } .bbh-teamlist li { break-inside: avoid; margin: 0 0 4px; } .bbh-back { display: inline-block; font-weight: 600; margin: 16px 0 4px; } .entry-content .bbh-person { font-family: var(--font-display); text-transform: uppercase; font-size: 34px; line-height: 1.05; margin: 8px 0 4px; } .bbh-meta { margin: 0 0 12px; color: var(--muted); } .bbh-alias { margin: 0 0 16px; padding: 12px 16px; background: var(--soft); border-left: 3px solid var(--navy); font-size: 15px; } .bbh-alias p { margin: 6px 0 0; color: var(--muted); } .bbh-roster { margin: 0 0 8px; font-size: 15px; } @media (max-width: 600px) { .bbh-champs { grid-template-columns: 1fr; } .bbh-win-row { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); } .bbh-pickers label, .bbh-pickers select { width: 100%; } .entry-content .bbh-person { font-size: 28px; } } /* ---------- Juniors page: club logo grid, every logo in an identical tile (2026-10-18) ---------- */ .entry-content .wp-block-gallery.junior-clubs { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px !important; margin: 14px 0 8px; max-width: 1136px; } .entry-content .wp-block-gallery.junior-clubs > figure.wp-block-image { width: auto !important; margin: 0 !important; height: 104px; padding: 12px 14px; background: #FFF; border: 1px solid var(--line); border-radius: var(--radius); display: flex !important; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(1,30,65,.05); transition: box-shadow .15s, transform .15s; } .entry-content .wp-block-gallery.junior-clubs > figure.wp-block-image > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .entry-content .wp-block-gallery.junior-clubs > figure.wp-block-image img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; flex: 0 1 auto !important; } .entry-content .wp-block-gallery.junior-clubs > figure.wp-block-image:has(> a:hover) { box-shadow: 0 3px 10px rgba(1,30,65,.14); transform: translateY(-1px); } .entry-content .wp-block-gallery.junior-clubs figcaption { display: none; } @media (max-width: 640px) { .entry-content .wp-block-gallery.junior-clubs { grid-template-columns: repeat(2, 1fr); gap: 10px !important; } .entry-content .wp-block-gallery.junior-clubs > figure.wp-block-image { height: 84px; padding: 9px 10px; } } /* Juniors page: Hellyer Velodrome logo (keep it small when stacked on phones) */ @media (max-width: 600px) { .entry-content .wp-block-media-text.hellyer-intro .wp-block-media-text__media img { max-width: 180px; margin: 0 auto; display: block; } .entry-content .wp-block-media-text.hellyer-intro .wp-block-media-text__content { padding: 12px 0 0; } } /* BAR/BAT history: race-by-race */ .bbh-rr-btn { font: inherit; font-variant-numeric: tabular-nums; background: none; border: 0; padding: 0; color: var(--navy, #1d2b4f); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; cursor: pointer; } .bbh-rr-btn:hover { text-decoration-style: solid; } .bbh-rr-btn::after { content: " ▸"; font-size: 0.8em; text-decoration: none; display: inline-block; } .bbh-rr-btn[aria-expanded="true"]::after { content: " ▾"; } .bbh-rr-row > td { background: var(--paper, #f6f6f3); padding: 12px 14px 4px !important; } .entry-content .bbh-rr .bbh-rr-t { font-size: 14px; margin: 0; } .bbh-rr .bbh-note-s { font-size: 14px; margin: 8px 0; } .bbh-rr .nowrap { white-space: nowrap; } @media (max-width: 760px) { .bbh-rr { position: sticky; left: 0; width: calc(100vw - 60px); } .entry-content .bbh-rr .bbh-rr-t { min-width: 0; width: 100%; } .entry-content .bbh-rr .bbh-rr-t th, .entry-content .bbh-rr .bbh-rr-t td { padding: 6px 6px; } .bbh-rr .bbh-rr-t th:nth-child(3), .bbh-rr .bbh-rr-t td:nth-child(3) { display: none; } } /* Results history: season notes and gaps (Women's Series history uses these; BAR/BAT does not) */ .bbh-badge { margin: -2px 0 6px; font: 700 12px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .bbh-series { margin: 0 0 6px; font-weight: 600; } .bbh-pickers + .bbh-note-s, .bbh-series + .bbh-note-s { margin: 0 0 6px; } .bbh-docs { margin: 0 0 18px; font-size: 15px; } .bbh-season.bbh-gap { border-top-color: var(--line); background: var(--paper, #f6f6f3); } .bbh-season.bbh-gap .bbh-season-h { color: var(--muted); } /* FAQ collapsible questions (core Details block) - added 2026-10-20 */ .entry-content details.wp-block-details { border-bottom: 1px solid var(--line); padding: 0; margin-top: 0; } .entry-content h2 + details.wp-block-details, .entry-content p + details.wp-block-details { border-top: 1px solid var(--line); margin-top: 1em; } .entry-content details.wp-block-details > summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: 14px 32px 14px 0; position: relative; list-style: none; } .entry-content details.wp-block-details > summary::-webkit-details-marker { display: none; } .entry-content details.wp-block-details > summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 24px; line-height: 1; color: var(--red); } .entry-content details.wp-block-details[open] > summary::after { content: "\2212"; } .entry-content details.wp-block-details > summary:hover { color: var(--red); } .entry-content details.wp-block-details > *:not(summary) { margin: 0 0 14px; } /* Promoters page (id 9839): tighter grey boxes - added 2026-10-20 */ .page-id-9839 .entry-content .wp-block-columns, .page-id-10174 .entry-content .wp-block-columns { margin-bottom: 20px; } .page-id-9839 .entry-content .wp-block-group.has-background, .page-id-10174 .entry-content .wp-block-group.has-background { padding: 16px 20px; } .page-id-9839 .entry-content .wp-block-group.has-background > .wp-block-group__inner-container > *, .page-id-10174 .entry-content .wp-block-group.has-background > .wp-block-group__inner-container > * { margin-top: 6px; margin-bottom: 6px; } .page-id-9839 .entry-content .wp-block-group.has-background > .wp-block-group__inner-container > :first-child, .page-id-10174 .entry-content .wp-block-group.has-background > .wp-block-group__inner-container > :first-child { margin-top: 0; } .page-id-9839 .entry-content .wp-block-group.has-background > .wp-block-group__inner-container > :last-child, .page-id-10174 .entry-content .wp-block-group.has-background > .wp-block-group__inner-container > :last-child { margin-bottom: 0; } .page-id-9839 .entry-content .wp-block-group.has-background li, .page-id-10174 .entry-content .wp-block-group.has-background li { margin-bottom: 2px; } .page-id-9839 .entry-content .wp-block-group.has-background .wp-block-columns, .page-id-10174 .entry-content .wp-block-group.has-background .wp-block-columns { margin-bottom: 0; } .page-id-9839 .entry-content .wp-block-group.has-background .wp-block-column > :first-child, .page-id-10174 .entry-content .wp-block-group.has-background .wp-block-column > :first-child { margin-top: 0; } .page-id-9839 .entry-content .wp-block-group.has-background .wp-block-column > :last-child, .page-id-10174 .entry-content .wp-block-group.has-background .wp-block-column > :last-child { margin-bottom: 0; } /* Racing data page (id 10174) and other figure tables: numbers right-aligned - added 2026-10-21 */ .entry-content .wp-block-table.ncnca-figures table { font-variant-numeric: tabular-nums; font-size: 15px; } .entry-content .wp-block-table.ncnca-figures th, .entry-content .wp-block-table.ncnca-figures td { padding: 6px 10px; } .entry-content .wp-block-table.ncnca-figures th:not(:first-child), .entry-content .wp-block-table.ncnca-figures td:not(:first-child) { text-align: right; white-space: nowrap; } .entry-content .wp-block-table.ncnca-race-table th:nth-child(2), .entry-content .wp-block-table.ncnca-race-table td:nth-child(2) { text-align: left; color: var(--muted); } .entry-content .wp-block-table.ncnca-figures td:first-child { min-width: 180px; } .entry-content .wp-block-table.ncnca-figures tfoot td { font-weight: 700; } /* Home page, phones: news and race series as compact rows; clubs + newsletter side by side */ @media (max-width: 760px) { .card-list-mobile .card { flex-direction: row; align-items: center; } .card-list-mobile .card-media { flex: 0 0 88px; height: 88px; aspect-ratio: auto; } .card-list-mobile .card-body { padding: 10px 14px; gap: 2px; } .card-list-mobile .card-title { font-size: 16px; } .card-list-mobile .card-text { font-size: 14px; line-height: 1.4; } .card-list-mobile .card-cta { display: none; } .split-pair { grid-template-columns: 1fr 1fr; gap: 12px; } .split-pair .panel { padding: 16px; } .split-pair .panel-title { font-size: 18px; } .split-pair .panel p { display: none; } .split-pair .text-link, .split-pair .pill { margin-top: 12px; } } /* Home page spacing (2026-10-21): 60px between sections on desktop, 36px on phones */ .home .section { padding-top: 60px; } .home .band-red { margin-top: 60px; } .home .band-red .section-pad { padding-top: 60px; padding-bottom: 60px; } .home .site-footer { margin-top: 60px; } /* Home page, phones (2026-10-21): shorter hero; upcoming races and championships as compact rows */ @media (max-width: 760px) { .home .section { padding-top: 36px; } .home .band-red { margin-top: 36px; } .home .band-red .section-pad { padding-top: 36px; padding-bottom: 36px; } .home .site-footer { margin-top: 36px; } .home .hero { min-height: 0; } .home .hero-inner { padding-top: 32px; padding-bottom: 32px; } .home .hero-title { font-size: 40px; margin-top: 10px; } /* Hero: three buttons side by side on one row (Commissaires button removed, Lloyd 22 Oct 23:10). Was a 2 x 2 grid at 12px. */ .home .hero .hero-actions { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 6px; margin-top: 20px; } .home .hero .hero-actions .pill { flex: 1 1 auto; padding-left: 8px; padding-right: 8px; font-size: 11px; letter-spacing: .03em; min-height: 42px; white-space: nowrap; } .home .race-grid { gap: 8px; margin-top: 16px; } .home .race-card { padding: 10px 12px; gap: 12px; align-items: center; } .home .race-card .chip { width: 46px; padding: 4px 0; } .home .race-card .chip-day { font-size: 22px; line-height: 1.1; } .home .race-card-body { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; } .home .race-card-name { flex: 0 0 100%; font-size: 16px; } .home .race-card-place { margin-top: 0; font-size: 13px; } .home .race-card .tags { margin-top: 0; gap: 4px; } /* Phone-only "Juniors" short label removed 2026-10-22: the tag now reads "Junior categories" everywhere. */ .home .champ-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 20px; } .home .champ-card { padding: 10px 14px; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; } .home .champ-name { order: -1; flex: 0 0 100%; font-size: 16px; } .home .champ-place { font-size: 13px; } .home .band-red .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; } .home .band-red .hero-actions .pill { padding-left: 6px; padding-right: 6px; font-size: 12px; white-space: nowrap; } } /* News / archive / search lists, phones: two cards per row */ @media (max-width: 760px) { .card-grid-archive { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; } .card-grid-archive .card-body { padding: 10px 12px 14px; gap: 4px; } .card-grid-archive .card-title { font-size: 15px; line-height: 1.25; } .card-grid-archive .card-meta { font-size: 12px; } .card-grid-archive .card-text { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } } /* News / archive / search lists, all screen sizes: excerpt capped at 3 lines */ .card-grid-archive .card-text { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Race page v2 (preview, 2026-10-21): map button opens Google Maps, address on hover / under the button, 10-year results history, Same weekend left + Next weekend right. */ .action-map { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .action-address { font-size: 12px; line-height: 1.3; color: var(--muted); text-align: center; } @media (hover: hover) and (pointer: fine) { .action-address { display: none; } .action-map .pill[data-address]::after { content: attr(data-address); position: absolute; right: 0; top: calc(100% + 10px); background: var(--navy); color: #FFF; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; padding: 8px 12px; border-radius: 6px; box-shadow: 0 6px 18px rgba(1,30,65,.2); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; } .action-map .pill[data-address]:hover::after, .action-map .pill[data-address]:focus-visible::after { opacity: 1; } } .history-grid-v2 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .history-grid-v2 .history-head { padding: 12px 16px; } .history-grid-v2 .history-year { font-size: 30px; } .history-grid-v2 .history-body { padding: 12px 16px; gap: 4px; } .history-card-link { display: block; color: var(--ink); } .history-card-link:hover { text-decoration: none; color: var(--ink); background: #E9ECF2; } .history-card-link .history-head, .history-card-link .history-body { display: flex; } .history-card-link .history-body > span:first-child { color: var(--red); } .history-name { font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.3; } .history-card-empty { opacity: .65; } .history-card-empty .history-head { background: var(--muted); } .history-card-empty .history-body { font-weight: 400; } .weekend-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 40px; } .weekend-col { flex: 0 1 400px; min-width: 0; } .weekend-col-next { margin-left: auto; } .weekend-col .race-grid { grid-template-columns: 1fr; } @media (min-width: 761px) { .weekend-col-next .kicker { text-align: right; } } @media (max-width: 760px) { .action-bar .action-map { grid-column: 1 / -1; } .history-grid-v2 { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; } .history-grid-v2 .history-year { font-size: 24px; } .weekend-col { flex-basis: 100%; } } /* Race page v2: history tweaks (2026-10-21) */ .section-history { padding-top: 56px; } .history-grid-v2 { grid-template-columns: repeat(5, minmax(0, 1fr)); } a.history-card-link.ncnca-ext::after { content: none !important; } @media (max-width: 760px) { .section-history { padding-top: 40px; } .history-grid-v2 { grid-template-columns: 1fr 1fr; } } /* Events calendar list: top "Previous Events / Next Events" row (replaces TEC's top bar; added in functions.php). Full width so Next sits at the right, like the bottom row. */ .tribe-events .ncnca-list-topnav { flex: 1 1 100%; width: 100%; } .tribe-events .ncnca-list-topnav .tribe-events-c-nav { border-top: 0; padding-top: 0; } /* Events calendar list: month/year headings and the Previous/Next Events rows look the same on phone and PC (Lloyd, 22 Oct 2026). Month headings are shown again because the date chips have no year. */ .tribe-common .tribe-events-calendar-list__month-separator-text { font-size: 15px !important; letter-spacing: 0.04em !important; } .tribe-events .tribe-events-c-nav__list-item--today { display: none !important; } .tribe-events .tribe-events-c-nav__prev-label-plural, .tribe-events .tribe-events-c-nav__next-label-plural { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; clip: auto !important; clip-path: none !important; overflow: visible !important; white-space: normal !important; } .tribe-events .tribe-events-c-nav__prev, .tribe-events .tribe-events-c-nav__next { font-size: 15px !important; line-height: 1.5 !important; font-weight: 500; } .tribe-events .tribe-events-c-nav__prev:not([disabled]), .tribe-events .tribe-events-c-nav__next:not([disabled]) { color: rgb(1, 30, 65) !important; } .tribe-events .tribe-events-c-nav__prev svg, .tribe-events .tribe-events-c-nav__next svg { width: 9px !important; height: 14px !important; } .tribe-events .tribe-events-c-nav__prev:not([disabled]) svg path, .tribe-events .tribe-events-c-nav__next:not([disabled]) svg path { fill: rgb(215, 20, 30) !important; } .tribe-events .tribe-events-calendar-list-nav { padding-top: 28px !important; } /* Race page: breadcrumb removed (2026-10-22). Phones get a "<- Race calendar" link at the top left of the hero instead; PC uses the menu bar. */ .race-back { display: none; } @media (max-width: 760px) { .race-hero .race-back { display: inline-flex; align-items: center; gap: 6px; position: absolute; top: 10px; left: 16px; z-index: 1; min-height: 36px; color: #FFF; font-size: 15px; font-weight: 600; text-decoration: none; } .race-hero .race-back:hover { color: #FFF; text-decoration: underline; } .race-hero-inner { padding-top: 52px; } } /* Home page Upcoming races (2026-10-22): 4 races, 2 x 2 on PC, 1 column at 900px and under. Each card carries the calendar's Reg / Flyer / Map / Strava buttons (ncnca_race_card( $event, true ) in functions.php). The race name link covers the whole card (::after); the buttons sit above it (z-index 2) and line up along the bottom of each card. Button look copied from "Calendar quick links": full size over 1000px wide, compact (11px) at 1000px and under. */ .home .race-grid-home { grid-template-columns: repeat(2, minmax(0, 1fr)); } .race-card.has-links { position: relative; } .race-card.has-links .race-card-body { flex: 1 1 auto; } .race-card .race-card-link { color: inherit; text-decoration: none; } .race-card .race-card-link:hover { color: inherit; text-decoration: none; } .race-card .race-card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); z-index: 1; } .race-card .race-card-link:focus-visible { outline: none; } .race-card.has-links:has(.race-card-link:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; } .race-card .ncnca-list-links { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; } .race-card .ncnca-list-links a.ncnca-ql { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 30px; padding: 4px 12px; border-radius: 6px; border: 1.5px solid var(--navy); background: #FFF; color: var(--navy); font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; text-decoration: none; } .race-card .ncnca-list-links a.ncnca-ql:hover { background: var(--soft); color: var(--navy); text-decoration: none; } .race-card .ncnca-list-links a.ncnca-ql-reg, .race-card .ncnca-list-links a.ncnca-ql-reg:hover { background: var(--red); border-color: var(--red); color: #FFF; } .race-card .ncnca-list-links a.ncnca-ql-reg:hover { filter: brightness(1.08); } .race-card .ncnca-list-links .ncnca-ql-pin { display: block; width: 16px; height: 16px; } .race-card .ncnca-list-links a.ncnca-ql-map { min-width: 0; padding: 4px 10px; } .race-card .ncnca-list-links a.ncnca-ql-map .ncnca-ql-text { display: none; } @media (max-width: 1000px) { .race-card .ncnca-list-links { gap: 3px; } .race-card .ncnca-list-links a.ncnca-ql { min-height: 36px; min-width: 0; padding: 4px 6px; font-size: 11px; letter-spacing: .02em; } .race-card .ncnca-list-links a.ncnca-ql-map { padding: 4px 6px; } } @media (max-width: 900px) { .home .race-grid-home { grid-template-columns: 1fr; } } @media (max-width: 760px) { .home .race-card.has-links { align-items: flex-start; } .home .race-card .ncnca-list-links { flex: 0 0 100%; padding-top: 6px; } /* Phones (Lloyd, 22 Oct 23:04): smaller buttons, wider gaps between them. Was 11px text, 6px side padding, 36px tall, 3px gaps. */ .home .race-card .ncnca-list-links { gap: 8px; } .home .race-card .ncnca-list-links a.ncnca-ql { min-height: 30px; padding: 3px 5px; font-size: 10px; letter-spacing: .02em; } .home .race-card .ncnca-list-links a.ncnca-ql-map { padding: 3px 5px; } .home .race-card .ncnca-list-links .ncnca-ql-pin { width: 14px; height: 14px; } } /* Home hero buttons on very narrow phones (350px and under, e.g. display zoom turned up): 10px text so all three stay on one row. */ @media (max-width: 350px) { .home .hero .hero-actions .pill { font-size: 10px; padding-left: 6px; padding-right: 6px; } } /* Home page Race series and NCNCA news cards (2026-10-22): no red "Read more" / "Standings" line any more (Lloyd) - the whole card is the link. PC hover cue instead: the card title turns red (the card background already darkens). Phones already hid that line. */ @media (hover: hover) { .home .card:hover .card-title { color: var(--red); } } /* Home page Member clubs box (2026-10-22): the whole box is a link to the clubs page (title link stretched over it), like the cards. */ .panel-clickable { position: relative; } .panel-clickable .panel-link { display: block; color: inherit; text-decoration: none; } .panel-clickable .panel-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } .panel-clickable:hover { background: #E9ECF2; } .panel-clickable .panel-link:hover { color: inherit; text-decoration: none; } @media (hover: hover) { .panel-clickable:hover .panel-link { color: var(--red); } } .panel-clickable .panel-link:focus-visible { outline: none; } .panel-clickable:has(.panel-link:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; } /* Footer, phones (2026-10-22): three link columns side by side and a compact logo row, so the footer is under 390px tall on a phone */ @media (max-width: 760px) { .site-footer { font-size: 14px; } .footer-grid { grid-template-columns: max-content max-content minmax(0, 1fr); gap: 14px 12px; padding-top: 20px; padding-bottom: 14px; } .footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; } .footer-brand > img { width: 45px; height: auto; grid-row: span 2; } .footer-brand p { margin: 0; max-width: none; font-size: 13px; line-height: 1.35; } .footer-marks { margin-top: 6px; gap: 8px; } .footer-marks img { height: 20px; } .usac-mark img { height: 28px; padding: 2px; } .footer-col { gap: 0; min-width: 0; } .footer-col h2 { font-size: 12px; letter-spacing: .06em; margin-bottom: 2px; } .footer-col a { padding: 4px 0; line-height: 1.3; } .site-footer .footer-col a.ncnca-ext:not(.pill)::after { display: inline; } .footer-col .nw { white-space: nowrap; } .footer-base { padding-top: 10px; padding-bottom: 14px; font-size: 12px; gap: 4px 14px; } } /* Footer bottom row (2026-10-23): line up the copyright text with the Facebook/Instagram links (their tap padding pushed them lower) */ .footer-base { align-items: baseline; } /* ---------- Race page: race-day weather (2026-10-23) ---------- */ .wx { margin-top: 16px; background: var(--soft); border-radius: var(--radius); padding: 20px 22px; border-left: 4px solid var(--red); } .wx[hidden] { display: none; } .wx-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; } .wx-sub { color: var(--muted); font-size: 14px; } .wx-body { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; margin-top: 14px; } .wx-main { display: flex; align-items: center; gap: 14px; } .wx-main .wx-ico { width: 56px; height: 56px; flex: 0 0 56px; } .wx-temp { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; color: var(--ink); } .wx-temp span { font-size: 24px; color: var(--muted); } .wx-text { font-weight: 600; margin-top: 4px; } .wx-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; } .wx-stats dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .wx-stats dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; color: var(--ink); } .wx-hours { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; text-align: center; } .wx-hours li { display: flex; flex-direction: column; align-items: center; gap: 2px; } .wx-hours .wx-ico { width: 30px; height: 30px; } .wx-h { font-size: 13px; font-weight: 700; color: var(--muted); } .wx-ht { font-size: 18px; font-weight: 700; color: var(--ink); } .wx-hw, .wx-hp { font-size: 13px; color: var(--muted); } .wx-hp { color: #2F6FD6; font-weight: 600; } .wx-foot { margin: 14px 0 0; font-size: 13px; color: var(--muted); } .wx-foot a { color: inherit; } /* ---------- Race page: course & venue pictures (2026-10-23) ---------- */ .cv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; text-align: left; } .cv-card { display: flex; flex-direction: column; background: #FFF; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--text); text-decoration: none; transition: box-shadow .15s, border-color .15s; } a.cv-card:hover { border-color: var(--pale); box-shadow: 0 6px 18px rgba(1, 30, 65, .12); } a.cv-card:hover .cv-go { text-decoration: underline; } .single-tribe_events a.cv-card::after, a.cv-card.ncnca-ext::after { content: none !important; display: none !important; } .cv-pic { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--soft); overflow: hidden; } .cv-pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .cv-pic-strava { flex-direction: column; gap: 12px; background: linear-gradient(135deg, var(--navy-3), var(--navy)); color: #FC5200; } .cv-pic-strava svg { width: 72px; height: 72px; } .cv-pic-strava span { color: #FFF; font-size: 18px; font-weight: 600; } .cv-pic-none { color: var(--muted); padding: 20px; text-align: center; } .cv-cap { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; } .cv-k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .cv-name { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.3; } .cv-addr { color: var(--muted); font-size: 15px; } .cv-go { margin-top: 6px; font-weight: 700; color: var(--red); } @media (max-width: 760px) { .cv-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; } .wx { padding: 16px; } .wx-body { gap: 14px 24px; } .wx-stats { gap: 10px 20px; } .wx-stats dd { font-size: 15px; } .wx-hours { gap: 4px; } .wx-hw { font-size: 12px; } } /* Race page extras (2026-10-23): riders link, add to calendar, rider tags, getting there, nearby, air quality */ .action-sub { margin-top: 10px; font-size: 14px; padding-left: 4px; } .action-sub a { color: var(--navy); font-weight: 600; } .cal-add { margin-top: 8px; font-size: 14px; position: relative; } .cal-add summary { cursor: pointer; color: var(--navy); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 4px; } .cal-add summary::-webkit-details-marker { display: none; } .cal-add summary::after { content: "\25BE"; font-size: .85em; } .cal-add[open] summary::after { content: "\25B4"; } .cal-add-menu { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .cal-add-menu a { color: var(--navy); } .rider-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .rider-tag { display: inline-block; background: #FFF; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; color: var(--ink); } .gt { margin-top: 16px; background: var(--soft); border-radius: var(--radius); padding: 20px 22px; border-left: 4px solid var(--navy); } .gt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 32px; margin-top: 10px; } .gt-k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .gt-col p { margin: 0 0 8px; } .gt-col p:last-child { margin-bottom: 0; } .cv-nearby { grid-column: 1 / -1; } .cv-nearby-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; } .pill.pill-sm { padding: 8px 14px; font-size: 13px; min-height: 0; } .wx-aq { margin-top: 14px; padding: 10px 14px; border-radius: 8px; font-size: 14px; line-height: 1.45; background: #FFF6D6; color: var(--ink); } .wx-aq a { color: inherit; } .wx-aq.aq-2 { background: #FFE3C2; } .wx-aq.aq-3, .wx-aq.aq-4, .wx-aq.aq-5 { background: #FFD3D3; } @media (max-width: 760px) { .gt { padding: 16px; } .pill.pill-sm { padding: 8px 12px; font-size: 12px; } } /* ---------- Race page: Know before you go (2026-10-23) ---------- */ .kbyg { margin: 16px 0 0; padding: 12px 16px; background: #FFF4E5; border-left: 4px solid var(--red); border-radius: 6px; color: var(--text); } .kbyg-h { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; color: var(--ink); margin-bottom: 6px; } .kbyg ul { margin: 0; padding-left: 18px; } .kbyg li { margin: 3px 0; line-height: 1.45; } /* Site search (2026-10-23): magnifier in the header opens a search bar under it; search results page */ .main-nav { order: 2; margin-left: auto; } .search-toggle { order: 3; flex: 0 0 auto; width: 44px; height: 44px; margin-left: 6px; padding: 0; background: transparent; border: 0; color: #FFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 6px; } .search-toggle:hover, .search-toggle[aria-expanded="true"] { background: var(--navy-2); color: var(--pink); } .site-search { background: var(--navy-2); padding: 14px 0; } .site-search[hidden] { display: none; } .site-search-form, .search-page-form { display: flex; gap: 8px; width: min(100%, 600px); } .site-search-form { margin-left: auto; } .site-search-form input, .search-page-form input { flex: 1 1 auto; min-width: 0; height: 46px; border: 0; border-radius: 999px; padding: 0 20px; font: inherit; font-size: 16px; background: #FFF; color: var(--ink); } .site-search-form input:focus, .search-page-form input:focus { outline: 3px solid var(--pink); outline-offset: 1px; } .site-search-form button, .search-page-form button { height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--red); color: #FFF; font: inherit; font-weight: 700; cursor: pointer; } .site-search-form button:hover, .search-page-form button:hover { filter: brightness(1.1); } .search-band .search-page-form { margin-top: 22px; } .search-summary { color: var(--pale); font-size: 16px; margin: 14px 0 0; } .search-section + .search-section { margin-top: 52px; } .search-h { font-family: var(--font-display); font-size: 32px; line-height: 1.1; margin: 0; color: var(--ink); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; } .search-h .count { font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--muted); } .search-list, .search-races { list-style: none; margin: 16px 0 0; padding: 0; max-width: 860px; border-top: 1px solid var(--line); } .search-item { border-bottom: 1px solid var(--line); } .search-item > a { display: block; padding: 16px 0; color: var(--ink); } .search-item > a:hover { text-decoration: none; } .search-item > a:hover .search-title { color: var(--red); text-decoration: underline; } .search-kind { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); } .search-title { display: block; font-size: 19px; font-weight: 700; line-height: 1.3; margin-top: 2px; } .search-snippet { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 15px; line-height: 1.5; margin-top: 4px; } .search-results mark { background: #FFE98A; color: inherit; padding: 0 1px; border-radius: 2px; } .search-race { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); } .search-race .chip { width: 58px; flex-basis: 58px; padding: 6px 0; } .search-race .chip-day { font-size: 27px; } .search-race.is-past .chip { background: var(--navy-3); } .search-race-body { display: flex; flex-direction: column; min-width: 0; } .search-race-name { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); } .search-race-name:hover { color: var(--red); } .search-race-meta { color: var(--muted); font-size: 14px; margin-top: 2px; } .search-race.is-upcoming .search-race-meta { color: var(--ink); font-weight: 600; } .search-race-other { color: var(--muted); font-size: 14px; margin-top: 4px; } .search-race-other a { font-weight: 600; white-space: nowrap; } .search-more { max-width: 860px; } .search-more > summary { cursor: pointer; font-weight: 700; color: var(--red); padding: 14px 0; list-style: none; } .search-more > summary::-webkit-details-marker { display: none; } .search-more > summary::after { content: " ▾"; } .search-more[open] > summary { display: none; } .search-more .search-races { margin-top: 0; border-top: 0; } .search-cal-link { margin: 16px 0 0; font-weight: 700; } .search-empty { max-width: 760px; font-size: 17px; } @media (max-width: 760px) { .search-toggle { order: 0; margin-left: auto; margin-right: -8px; } .site-search-form { margin-left: 0; width: 100%; } .site-search-form button, .search-page-form button { padding: 0 16px; } .search-h { font-size: 26px; } .search-title { font-size: 17px; } .search-race { gap: 12px; } .search-race-name { font-size: 16px; } } /* Document search (2026-10-24): document rows add a link to the page the file is on */ .search-doc > a:first-child { padding-bottom: 6px; } .search-doc-on { display: inline-block; margin: 0 0 14px; font-size: 13px; font-weight: 700; } /* Home page, unfolded foldables and small tablets (761-1000px wide), 2026-10-24: Pixel Fold inner screen. Race series and news three across (no lone card on a second row); upcoming races stay 2 x 2; shorter hero. */ @media (min-width: 761px) and (max-width: 1000px) { .home .hero { min-height: 0; } .home .hero-inner { padding-top: 56px; padding-bottom: 56px; } .home .race-grid-home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .home .race-card { padding: 16px; gap: 14px; } .home .race-card .chip { width: 56px; flex-basis: 56px; padding: 6px 0; } .home .race-card .chip-day { font-size: 28px; } .home .race-card-name { font-size: 17px; } .home .card-grid.card-list-mobile { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .home .card-list-mobile .card-body { padding: 14px 16px 18px; } .home .card-list-mobile .card-title { font-size: 17px; } .home .card-list-mobile .card-text { font-size: 14px; line-height: 1.5; } } /* Home page Upcoming races, "Option A" cards (2026-10-26, Lloyd; from the "Race Card Mockups" canvas). Markup: ncnca_home_race_card() in functions.php. White cards; quiet date tile; one detail line; small badges; a full-width row of buttons along the bottom of each card, under the date tile: Register (red), Flyer, Map, Strava. 4 across at 1200px and over, 2 x 2 at 761-1199px, one column on phones. Own class names (hr-*), so the older .race-card / .race-grid-home rules above don't touch these cards. */ .home-races { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; text-align: left; } .hr-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px; background: #FFF; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); transition: border-color .15s, box-shadow .15s; } .hr-card:hover { border-color: #B8C2D4; box-shadow: 0 2px 10px rgba(1, 30, 65, .08); } .hr-card:has(.hr-name:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; } .hr-top { display: flex; gap: 14px; align-items: flex-start; } .hr-date { flex: 0 0 58px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px 9px; background: #EEF1F6; border-radius: 8px; text-align: center; } .hr-mon { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--red); } .hr-day { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; color: var(--ink); white-space: nowrap; } .hr-dow { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; } .hr-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .hr-name, .hr-name:hover { font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--ink); text-decoration: none; } .hr-name::after { content: ""; position: absolute; inset: 0; border-radius: 10px; z-index: 1; } .hr-name:focus-visible { outline: none; } @media (hover: hover) { .hr-card:hover .hr-name { color: var(--red); } } .hr-meta { font-size: 14px; line-height: 1.35; color: var(--muted); } .hr-town { color: var(--ink); font-weight: 600; } .hr-badges { display: flex; flex-wrap: wrap; gap: 5px; } .hr-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--blue-tag-bg); color: var(--blue-tag); font-size: 12px; font-weight: 600; line-height: 1.3; } .hr-badge svg { width: 12px; height: 12px; flex: none; } .hr-badge-champ { background: #FDE3E4; color: #A30F17; } .hr-badge-series { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } .hr-btns { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: auto; } .hr-btns:empty { display: none; } .hr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 34px; padding: 0 9px; border: 1.5px solid var(--navy); border-radius: 6px; background: #FFF; color: var(--navy); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; } .hr-btn:hover { background: var(--soft); color: var(--navy); text-decoration: none; } .hr-btn svg { width: 13px; height: 13px; flex: none; } .hr-btn-reg, .hr-btn-reg:hover { background: var(--red); border-color: var(--red); color: #FFF; font-weight: 700; } .hr-btn-reg:hover { filter: brightness(1.08); } .hr-btns a.ncnca-ext::after { content: none !important; } /* the site-wide new-tab script adds a small arrow to outside links; not on these buttons */ .hr-none { margin-right: 4px; font-size: 13px; color: var(--muted); } @media (max-width: 1199px) { .home-races { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* PC, 4 across (Lloyd, 26 Oct 14:14): tighter gaps and button padding so Register + Flyer + Map + Strava fit on one line (needs ~249px; the card has ~251px at full width). 4 across starts at 1200px (was 1101px) because narrower windows don't have the room. */ @media (min-width: 1200px) { .home-races { gap: 10px; } .hr-card { padding: 16px 12px; } .hr-btns { gap: 4px; } .hr-btn { padding: 0 7px; gap: 3px; } } @media (max-width: 760px) { .home-races { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; } .hr-card { padding: 14px; gap: 12px; } .hr-top { gap: 12px; } .hr-date { flex-basis: 56px; } } /* Calendar multi-select chips (2026-10-26): picked chips show a check mark; tap again to remove. "All races" clears every pick. */ .cal-chip.is-current:not(.cal-chip-all)::before { content: ""; width: 10px; height: 6px; margin: -3px 8px 0 0; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); flex: 0 0 auto; } /* Calendar list on phones, "Option A" cards (Lloyd, 26 Oct 2026; chosen from the "Race Card Mockups" canvas) - same look as the home page Upcoming races cards. 760px and under only; PC and tablets are unchanged. Markup extras (weekday + end day in the date chip, town-first detail line, "Register" in full, Strava icon, "Registration not open yet", the Filter button) come from functions.php / header.php and are hidden on wider screens by the first rule below. Filters fold away behind one button (checkbox + label, no script). */ .cal-filter-cb, .cal-filter-toggle, .tribe-common .chip-dow, .tribe-common .chip-day-end, .tribe-common .ncnca-meta-town, .tribe-common .ncnca-ql-more, .tribe-common .ncnca-ql-route, .tribe-common .ncnca-ql-none { display: none; } @media (max-width: 760px) { /* Filter button */ .cal-filter-cb { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .cal-filter-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; margin: 14px 0 0; padding: 0 14px; border: 1.5px solid var(--navy); border-radius: 10px; background: #FFF; color: var(--navy); font-size: 15px; cursor: pointer; } .cal-filter-toggle svg { width: 18px; height: 18px; flex: none; } .cal-filter-toggle-word { font-weight: 700; } .cal-filter-toggle-pick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); } .cal-filter-toggle .cal-filter-caret { width: 16px; height: 16px; margin-left: auto; transition: transform .15s; } .cal-filter-cb:checked + .cal-filter-toggle .cal-filter-caret { transform: rotate(180deg); } .cal-filter-cb:focus-visible + .cal-filter-toggle { outline: 2px solid var(--navy); outline-offset: 2px; } .cal-filter-cb:not(:checked) ~ .cal-filters { display: none; } .cal-filters { margin-top: 14px; } .cal-rule { margin-top: 18px; } /* Less empty space between the filters and the list */ .tribe-common .tribe-events-l-container { padding-top: 18px !important; } .tribe-events .ncnca-list-topnav .tribe-events-c-nav { padding-top: 0 !important; } /* Each race is a white card (no chevron; the whole card is still the link to the race page) */ .tribe-common .tribe-events-calendar-list__event-row { margin: 0 0 10px !important; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #FFF; transition: border-color .15s, box-shadow .15s; } .tribe-common .tribe-events-calendar-list__event-row::after { display: none; } .tribe-common .tribe-events-calendar-list__event-row:hover { background: #FFF; border-color: #B8C2D4; box-shadow: 0 2px 10px rgba(1, 30, 65, .08); } .tribe-common .tribe-events-calendar-list__event-title-link::after { border-radius: 10px; } /* Quiet date tile: red month, navy day (or "7-8"), weekday */ .tribe-common .tribe-events-calendar-list__event-date-tag { flex: 0 0 68px !important; width: 68px !important; max-width: 68px !important; padding: 0 !important; } .tribe-common .ncnca-list-date .chip { width: 56px; flex-basis: 56px; align-items: center; gap: 1px; padding: 8px 2px 9px; border-radius: 8px; background: #EEF1F6; color: var(--ink); } .tribe-common .ncnca-list-date .chip-mon { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--red); } .tribe-common .ncnca-list-date .chip-day { font-size: 26px; line-height: 1; color: var(--ink); white-space: nowrap; } .tribe-common .ncnca-list-date .chip-day-end { display: inline; } .tribe-common .ncnca-list-date .chip-dow { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--muted); white-space: nowrap; } .tribe-common .ncnca-dt-tile { display: none; } /* Title, "Town · MTB · Collegiate", badges */ .tribe-common .tribe-events-calendar-list__event-header { min-height: 72px; } .tribe-common .tribe-events-calendar-list__event-title { font-size: 18px; line-height: 1.2; } .tribe-common .ncnca-meta { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; } .tribe-common .ncnca-meta-town { display: inline; color: var(--ink); font-weight: 600; } .tribe-common .ncnca-meta-town:has(+ .ncnca-meta-text:not(:empty))::after { content: " · "; color: var(--muted); font-weight: 400; } .tribe-common .ncnca-meta-town-end { display: none; } .tribe-common .ncnca-cue { display: flex; width: fit-content; margin-top: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--blue-tag-bg); color: var(--blue-tag); font-size: 12px; font-weight: 600; line-height: 1.3; } .tribe-common .ncnca-cue svg { width: 12px; height: 12px; flex: 0 0 12px; } /* Buttons: a full-width row under the date tile and text, as on the home page */ .tribe-common .ncnca-list-links { align-items: center; gap: 5px; margin: 12px 0 0 -68px; } .tribe-common .ncnca-list-links a.ncnca-ql { gap: 4px; height: 34px; min-height: 34px; min-width: 0; padding: 0 9px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; } .tribe-common .ncnca-list-links a.ncnca-ql-reg { font-weight: 700; } .tribe-common .ncnca-list-links a.ncnca-ql-map { padding: 0 9px; } .tribe-common .ncnca-list-links a.ncnca-ql-map .ncnca-ql-text { display: inline; } .tribe-common .ncnca-list-links .ncnca-ql-pin { width: 13px; height: 13px; color: var(--red); } .tribe-common .ncnca-list-links .ncnca-ql-more { display: inline; } .tribe-common .ncnca-list-links .ncnca-ql-route { display: block; width: 13px; height: 13px; } .tribe-common .ncnca-list-links .ncnca-ql-none { display: inline; margin-right: 4px; font-size: 13px; color: var(--muted); } .tribe-common .ncnca-list-links a.ncnca-ext::after { content: none !important; } /* no new-tab arrows on these buttons */ } /* ===== Home page preview "home-v2" (2026-10-27, Lloyd) ===== Only applies when the address ends in ?preview=home-v2 (front-page.php adds the body class "home-v2"); the normal home page is unchanged. 1. Upcoming races, NCNCA news and Instagram as sideways carousels (browser scroll-snap; a small script in front-page.php adds the < > buttons on PC). 2. Cards lift slightly on mouse hover; on phones/touch they shrink slightly when tapped and show a small >. 3. More space between sections: 92px PC (was 60), 52px phones (was 36). No motion for people who turn motion off on their device. To roll out: front-page.php $ncnca_v2 = true. To remove: delete this block and the $ncnca_v2 lines in front-page.php. */ /* 3. Spacing */ .home-v2 .section { padding-top: 92px; } .home-v2 .band-red { margin-top: 92px; } .home-v2 .band-red .section-pad { padding-top: 80px; padding-bottom: 80px; } .home-v2 .site-footer { margin-top: 92px; } @media (max-width: 760px) { .home-v2 .section { padding-top: 52px; } .home-v2 .band-red { margin-top: 52px; } .home-v2 .band-red .section-pad { padding-top: 48px; padding-bottom: 48px; } .home-v2 .site-footer { margin-top: 52px; } } /* 1. Carousels: a row that scrolls sideways and stops on a card. Padding inside the row leaves room for the hover lift and shadow. */ .home-v2 .carousel { position: relative; } .home-v2 .is-carousel { display: flex !important; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 6px; scrollbar-width: none; margin-left: -6px; margin-right: -6px; padding: 10px 6px 18px; } .home-v2 .is-carousel::-webkit-scrollbar { display: none; } .home-v2 .is-carousel > * { flex-shrink: 0; scroll-snap-align: start; } .home-v2 .is-carousel:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } .home-v2 .home-races.is-carousel, .home-v2 .card-grid.is-carousel { margin-top: 26px; } /* Upcoming races: 4 showing on PC (same card width as before), 2 and a bit on tablets, 1 and a bit on phones */ .home-v2 .home-races.is-carousel > .hr-card { flex-basis: calc((100% - 32px) / 2.15); } @media (min-width: 1200px) { .home-v2 .home-races.is-carousel > .hr-card { flex-basis: calc((100% - 30px) / 4); } } @media (max-width: 760px) { .home-v2 .home-races.is-carousel { margin-top: 10px; } .home-v2 .home-races.is-carousel > .hr-card { flex-basis: calc(100% - 36px); } } /* NCNCA news: 3 showing on PC, 2 and a bit on tablets; on phones picture-on-top cards, 1 and a bit showing */ .home-v2 .card-grid.is-carousel > .card { flex-basis: calc((100% - 40px) / 3); } @media (max-width: 1000px) { .home-v2 .card-grid.is-carousel > .card { flex-basis: calc((100% - 28px) / 2.3); } } @media (max-width: 760px) { .home-v2 .card-grid.is-carousel { margin-top: 10px; } .home-v2 .card-grid.is-carousel > .card { flex-basis: 78%; flex-direction: column; align-items: stretch; } .home-v2 .card-grid.is-carousel .card-media { flex: none; height: auto; aspect-ratio: 16 / 9; } .home-v2 .card-grid.is-carousel .card-body { padding: 12px 14px 14px; } } /* Instagram (Smash Balloon feed): its grid becomes a row; 6 showing on PC, 3 and a bit on tablets, 2 and a bit on phones */ .home-v2 .insta-feed #sb_instagram #sbi_images.is-carousel { display: flex !important; gap: 0 !important; grid-template-columns: none !important; padding-top: 10px !important; padding-bottom: 14px !important; } .home-v2 .insta-feed #sb_instagram #sbi_images.is-carousel > .sbi_item { flex: 0 0 calc(100% / 6) !important; width: auto !important; max-width: none !important; display: block !important; } @media (max-width: 1000px) { .home-v2 .insta-feed #sb_instagram #sbi_images.is-carousel > .sbi_item { flex-basis: calc(100% / 3.4) !important; } } @media (max-width: 760px) { .home-v2 .insta-feed #sb_instagram #sbi_images.is-carousel > .sbi_item { flex-basis: calc(100% / 2.4) !important; } } /* < > buttons: PC / mouse only (phones swipe). Hidden at each end of the row. */ .home-v2 .carousel-btn { display: none; } @media (hover: hover) and (pointer: fine) { .home-v2 .carousel-btn { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; z-index: 5; width: 42px; height: 42px; margin-top: -21px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #FFF; color: var(--navy); box-shadow: 0 2px 10px rgba(1, 30, 65, .18); cursor: pointer; transition: opacity .15s, background-color .15s; } .home-v2 .carousel-btn svg { width: 18px; height: 18px; } .home-v2 .carousel-btn:hover { background: var(--soft); } .home-v2 .carousel-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } .home-v2 .carousel-prev { left: -18px; } .home-v2 .carousel-next { right: -18px; } .home-v2 .carousel.at-start .carousel-prev, .home-v2 .carousel.at-end .carousel-next, .home-v2 .carousel.no-scroll .carousel-btn { opacity: 0; pointer-events: none; } } /* 2. Hover lift (mouse) */ .home-v2 .hr-card, .home-v2 .card, .home-v2 .champ-card, .home-v2 .panel-clickable, .home-v2 .insta-feed .sbi_item { transition: transform .18s ease, box-shadow .18s ease, border-color .15s, background-color .15s; } @media (hover: hover) and (pointer: fine) { .home-v2 .hr-card:hover, .home-v2 .card:hover, .home-v2 .panel-clickable:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(1, 30, 65, .14); } .home-v2 .champ-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); text-decoration: none; } .home-v2 .insta-feed .sbi_item:hover { transform: translateY(-4px) scale(1.02); } } /* 2. Phones / touch: shrink slightly when tapped, and a small > on each card */ @media (hover: none) { .home-v2 .hr-card:active, .home-v2 .card:active, .home-v2 .champ-card:active, .home-v2 .panel-clickable:active, .home-v2 .insta-feed .sbi_item:active { transform: scale(.98); } .home-v2 .hr-card::before, .home-v2 .card .card-body::after { content: ""; position: absolute; width: 8px; height: 8px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); } .home-v2 .hr-card::before { top: 22px; right: 16px; } .home-v2 .hr-body { padding-right: 16px; } .home-v2 .card .card-body { position: relative; padding-right: 30px; } .home-v2 .card .card-body::after { top: 50%; right: 14px; margin-top: -5px; } } /* No motion for people who turn motion off on their device */ @media (prefers-reduced-motion: reduce) { .home-v2 .hr-card, .home-v2 .card, .home-v2 .champ-card, .home-v2 .panel-clickable, .home-v2 .insta-feed .sbi_item { transition: none; } .home-v2 .hr-card:hover, .home-v2 .card:hover, .home-v2 .champ-card:hover, .home-v2 .panel-clickable:hover, .home-v2 .insta-feed .sbi_item:hover, .home-v2 .hr-card:active, .home-v2 .card:active, .home-v2 .champ-card:active, .home-v2 .panel-clickable:active, .home-v2 .insta-feed .sbi_item:active { transform: none; } } /* Home page Member clubs + Newsletter boxes (2026-10-27): box titles are real h2 headings (screen readers can jump to them); the Newsletter box is clickable like the Member clubs box, its Sign up pill is a visual cue only. */ .split-pair h2.panel-title { margin-bottom: 0; } .panel-navy.panel-clickable:hover { background: var(--navy-2); } @media (hover: hover) { .panel-navy.panel-clickable:hover .panel-link { color: var(--pink); } } .panel-clickable .pill { pointer-events: none; } .panel-clickable a.panel-link.ncnca-ext::after { content: "" !important; margin: 0; } /* external-link arrow would otherwise sit on the box's click layer */ /* Home preview "home-v2", round 2 (2026-10-27, Lloyd, phones): - Touch screens: no snapping on the carousel rows, so a swipe coasts as far as the flick carries it (snapping acted as a brake, stopping at the next card). - Phones: Upcoming races two cards high (10 races = 5 columns), each column 72px narrower than the row so a good slice of the next column shows. - Phones: news cards 70% of the row (was 78%) so about a third of the next card shows, even on 360px phones. */ @media (hover: none) { .home-v2 .is-carousel, .home-v2 .insta-feed #sb_instagram #sbi_images.is-carousel { scroll-snap-type: none !important; } } @media (max-width: 760px) { .home-v2 .home-races.is-carousel { display: grid !important; grid-auto-flow: column; grid-template-rows: auto auto; grid-template-columns: none; grid-auto-columns: calc(100% - 72px); gap: 10px; } .home-v2 .card-grid.is-carousel > .card { flex-basis: 70%; } } /* Home carousels, mouse drag (2026-10-27, Lloyd): grab-hand cursor on the rows (cards and buttons keep the pointing hand); while dragging: no snapping (it would fight the drag), no text selection, grabbing hand everywhere. Snapping returns when the row stops. */ @media (hover: hover) and (pointer: fine) { .home-v2 .is-carousel { cursor: grab; } .home-v2 .carousel.is-dragging .is-carousel { scroll-snap-type: none !important; user-select: none; -webkit-user-select: none; } .home-v2 .carousel.is-dragging .is-carousel, .home-v2 .carousel.is-dragging .is-carousel * { cursor: grabbing !important; } .home-v2 .is-carousel img { -webkit-user-drag: none; } } /* ===== Design ideas round (2026-10-27, Lloyd): #1 card feedback site-wide, #2 header photos, #3 step list + back to top, #4 Championships cards, #5 calendar months, #6 points table, #7 more news + page numbers, #9 countdown. ===== */ /* #1 Cards react everywhere, as on the home page: lift + soft shadow on mouse hover; shrink a little while tapped on touch screens. */ .card, .hr-card, .race-card, .bb-card, .cv-card, .history-card-link, .champ-card, .panel-clickable, .entry-content .wp-block-gallery figure:has(> a), .tribe-common .tribe-events-calendar-list__event-row { transition: transform .18s ease, box-shadow .18s ease, border-color .15s, background-color .15s; } @media (hover: hover) and (pointer: fine) { .card:hover, .hr-card:hover, a.race-card:hover, .race-card.has-links:hover, .bb-card:hover, .cv-card:hover, .history-card-link:hover, .panel-clickable:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(11, 27, 63, .14); } .champ-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); } .entry-content .wp-block-gallery figure:has(> a):hover { transform: translateY(-3px) scale(1.03); } } @media (hover: hover) and (pointer: fine) and (min-width: 761px) { /* Calendar on wide screens is a list, not cards: a light tint instead of a lift. */ .tribe-common .tribe-events-calendar-list__event-row:hover { background: var(--soft); } } @media (hover: none) { .card:active, .hr-card:active, a.race-card:active, .race-card.has-links:active, .bb-card:active, .cv-card:active, .history-card-link:active, .champ-card:active, .panel-clickable:active, .entry-content .wp-block-gallery figure:has(> a):active, .tribe-common .tribe-events-calendar-list__event-row:active { transform: scale(.98); } } /* #2 Header photo behind the page title (photo chosen per page; the site default otherwise - see ncnca_band_attrs()). */ .page-band.has-photo { background: linear-gradient(90deg, rgba(1, 30, 65, .94) 0%, rgba(1, 30, 65, .72) 50%, rgba(1, 30, 65, .35) 100%), var(--band) var(--band-pos, 50% 50%) / cover no-repeat, var(--navy); padding: 96px 0 80px; } @media (max-width: 760px) { .page-band.has-photo { background: linear-gradient(180deg, rgba(1, 30, 65, .55) 0%, rgba(1, 30, 65, .85) 100%), var(--band-sm) var(--band-pos, 50% 50%) / cover no-repeat, var(--navy); padding: 64px 0 40px; } } /* #3 "On this page" list beside the text (wide screens), fold-out box at the top (narrower screens). Built by assets/site.js. */ .page-toc { display: none; } .page-toc-mobile { margin: 0 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); } .page-toc-mobile summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--ink); } .page-toc-mobile ul { margin: 0; padding: 0 16px 14px 34px; } .page-toc-mobile li { margin: 6px 0; } .page-toc-mobile .toc-sub { margin-left: 14px; font-size: 15px; } @media (min-width: 1100px) { .entry.has-page-toc { display: grid; grid-template-columns: minmax(0, 860px) 220px; column-gap: 56px; align-items: start; } .entry.has-page-toc > * { grid-column: 1; } .entry.has-page-toc > .page-toc { display: block; grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 24px; padding: 4px 0 4px 18px; border-left: 2px solid var(--line); } .page-toc-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .page-toc ul { list-style: none; margin: 0; padding: 0; } .page-toc li { margin: 0 0 8px; line-height: 1.3; } .page-toc .toc-sub { margin-left: 12px; font-size: 14px; } .page-toc a { color: var(--text); text-decoration: none; font-size: 15px; } .page-toc a:hover { color: var(--red); } .page-toc a.is-current { color: var(--red); font-weight: 700; } .page-toc-mobile, .entry-content .toc-inline { display: none; } } .to-top { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--navy); color: #FFF; box-shadow: 0 4px 14px rgba(11, 27, 63, .3); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s, background-color .15s; } .to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { background: var(--red); } .to-top:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } /* #4 Championships page: four cards (District / State / National / World), each with its level's colours along the top. */ .entry-content .champ-hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; max-width: 1136px; } .entry-content .champ-hub-card { position: relative; margin: 0; padding: 30px 26px 24px; background: #FFF; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .entry-content .champ-hub-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--red); } .entry-content .champ-hub-state::before { background: linear-gradient(90deg, #003262 0 50%, #FDB515 50% 100%); } .entry-content .champ-hub-national::before { background: linear-gradient(90deg, #0A3161 0 33.3%, #FFF 33.3% 66.6%, #B31942 66.6% 100%); box-shadow: inset 0 -1px 0 var(--line); } .entry-content .champ-hub-world::before { background: linear-gradient(90deg, #0081C8 0 20%, #EE334E 20% 40%, #000 40% 60%, #FCB131 60% 80%, #00A651 80% 100%); } .entry-content .champ-hub-card > * + * { margin-top: 10px; } .entry-content .champ-hub-level { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .entry-content .champ-hub-card h2 { margin-top: 4px; font-size: 30px; } .entry-content .champ-hub-links { list-style: none; margin-top: 16px; padding: 0; border-top: 1px solid var(--line); } .entry-content .champ-hub-links li { margin: 0; border-bottom: 1px solid var(--line); } .entry-content .champ-hub-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 2px; font-weight: 700; color: var(--ink); text-decoration: none; } .entry-content .champ-hub-links a::after { content: "\2192"; color: var(--red); transition: transform .15s; } .entry-content .champ-hub-links a:hover { color: var(--red); } .entry-content .champ-hub-links a:hover::after { transform: translateX(4px); } @media (max-width: 760px) { .entry-content .champ-hub { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; } .entry-content .champ-hub-card { padding: 24px 18px 16px; } .entry-content .champ-hub-card h2 { font-size: 26px; } } /* #5 Race calendar: month headings stay at the top while scrolling; month buttons above the list (assets/site.js). */ .tribe-common .tribe-events-calendar-list__month-separator { position: sticky; top: 0; z-index: 4; background: #FFF; } .cal-months { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; } .cal-months button { min-height: 34px; padding: 0 12px; border: 1.5px solid var(--navy); border-radius: 999px; background: #FFF; color: var(--navy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .cal-months button:hover { background: var(--navy); color: #FFF; } @media (max-width: 760px) { .cal-months { flex-wrap: nowrap; overflow-x: auto; margin: 2px -16px 14px; padding: 0 16px 4px; scrollbar-width: none; } .cal-months::-webkit-scrollbar { display: none; } .cal-months button { flex: none; } } /* #6 Juniors Series points table (a real table instead of a picture). Scrolls sideways inside itself on phones; place column stays put. */ .entry-content .points-table { overflow-x: auto; max-width: 100%; } .entry-content .points-table table { width: auto; min-width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; } .entry-content .points-table th, .entry-content .points-table td { padding: 7px 9px; text-align: center; border: 1px solid var(--line); white-space: nowrap; } .entry-content .points-table thead th { background: var(--navy); color: #FFF; letter-spacing: 0; } .entry-content .points-table tbody th { position: sticky; left: 0; background: var(--soft); color: var(--ink); text-align: left; } .entry-content .points-table tbody td:empty { background: #FAFBFC; } .entry-content .points-table tbody tr:first-child td { font-weight: 700; } .entry-content .points-table figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); text-align: left; } /* #7 "More news" row at the end of news posts (carousel from the home page), and the news list's page numbers as buttons. */ .more-news { padding-top: 72px; text-align: center; } .more-news .card-grid { text-align: left; } @media (max-width: 760px) { .more-news { padding-top: 48px; } } .pager .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; } .pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1.5px solid var(--navy); border-radius: 999px; color: var(--navy); font-weight: 700; text-decoration: none; } .pager a.page-numbers:hover { background: var(--navy); color: #FFF; } .pager .page-numbers.current { background: var(--navy); color: #FFF; } .pager .page-numbers.dots { border-color: transparent; } /* #9 Countdown badge (assets/site.js fills it in). */ .countdown { display: inline-flex; align-items: center; width: fit-content; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; } .countdown[hidden] { display: none; } .countdown-hero { margin: 14px auto 0; background: #FFF; color: var(--red); } .countdown-list { margin-top: 6px; background: #FDE3E4; color: #A30F17; } @media (prefers-reduced-motion: reduce) { .card, .hr-card, .race-card, .bb-card, .cv-card, .history-card-link, .champ-card, .panel-clickable, .to-top, .entry-content .wp-block-gallery figure:has(> a), .tribe-common .tribe-events-calendar-list__event-row { transition: none; } .card:hover, .hr-card:hover, a.race-card:hover, .race-card.has-links:hover, .bb-card:hover, .cv-card:hover, .history-card-link:hover, .champ-card:hover, .panel-clickable:hover, .card:active, .hr-card:active, a.race-card:active, .race-card.has-links:active, .bb-card:active, .cv-card:active, .history-card-link:active, .champ-card:active, .panel-clickable:active, .entry-content .wp-block-gallery figure:has(> a):hover, .tribe-common .tribe-events-calendar-list__event-row:active { transform: none; } } /* #4 fix: this theme wraps group blocks in .wp-block-group__inner-container, so the card grid and spacing go on that wrapper. */ .entry-content .champ-hub > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .entry-content .champ-hub-card > .wp-block-group__inner-container > * + * { margin-top: 10px; } @media (max-width: 760px) { .entry-content .champ-hub > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 14px; } } .entry-content .champ-hub:has(> .wp-block-group__inner-container) { display: block; } /* Fixes (2026-10-27, Lloyd 13:11) */ /* Calendar month headings: stick below the WordPress admin bar when logged in (it covered them), and stand out more while stuck. */ .tribe-common .tribe-events-calendar-list__month-separator { padding-top: 8px; padding-bottom: 8px; box-shadow: 0 1px 0 var(--line); } .tribe-common .tribe-events-calendar-list__month-separator-text { color: var(--ink); font-weight: 800; } body.admin-bar .tribe-common .tribe-events-calendar-list__month-separator { top: 32px; } body.admin-bar .entry.has-page-toc > .page-toc { top: 56px; } @media (max-width: 782px) { body.admin-bar .tribe-common .tribe-events-calendar-list__month-separator { top: 46px; } } @media (max-width: 600px) { body.admin-bar .tribe-common .tribe-events-calendar-list__month-separator { top: 0; } } /* admin bar scrolls away on small phones */ /* Juniors page: the Hellyer Velodrome logo gets the same white box, border and hover as the junior club logos above it. */ .entry-content .wp-block-media-text.hellyer-intro .wp-block-media-text__media { padding: 14px 18px; background: #FFF; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(1, 30, 65, .05); transition: box-shadow .15s, transform .15s; } .entry-content .wp-block-media-text.hellyer-intro .wp-block-media-text__media:has(> a:hover) { box-shadow: 0 3px 10px rgba(1, 30, 65, .14); transform: translateY(-1px); } /* Juniors Series points table: no boxes where a place gets no points (empty cells). */ .entry-content .points-table tbody td:empty { background: transparent; border-style: none; } /* Board Meetings page: Add to calendar / Subscribe menus (2026-10-27) */ .ncnca-next-meeting .ncnca-next-meeting-actions { align-items: flex-start; } .meet-cal { position: relative; } .meet-cal > summary { list-style: none; cursor: pointer; user-select: none; } .meet-cal > summary::-webkit-details-marker { display: none; } .meet-cal > summary::after { content: "\25BE"; font-size: .9em; } .meet-cal[open] > summary::after { content: "\25B4"; } .meet-cal-menu { position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); width: 300px; max-width: calc(100vw - 32px); background: #FFF; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 8px 0; } .ncnca-next-meeting .meet-cal-menu p { margin: 0; } .meet-cal-menu .meet-cal-head { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 6px 16px 6px; } .meet-cal-menu a { display: block; padding: 9px 16px; color: var(--navy); font-weight: 600; text-decoration: none; } .meet-cal-menu a:hover, .meet-cal-menu a:focus { background: var(--soft); text-decoration: none; } .ncnca-next-meeting .meet-cal-menu .meet-cal-note { font-size: 13px; line-height: 1.4; color: var(--muted); padding: 8px 16px 4px; border-top: 1px solid var(--line); margin-top: 6px; } .meet-cal-menu .meet-cal-url { display: block; width: calc(100% - 32px); margin: 4px 16px 6px; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); color: var(--ink); } .meet-cal-menu .meet-cal-url + .meet-cal-note { border-top: 0; margin-top: 0; padding-top: 2px; padding-bottom: 6px; } @media (max-width: 600px) { .meet-cal { width: 100%; } .meet-cal > summary { width: 100%; } .meet-cal-menu { position: static; width: auto; max-width: none; margin-top: 8px; box-shadow: none; } } /* Commissaires page: upcoming officials events (2026-10-27) */ .ncnca-officials-events { background: var(--soft); border-left: 4px solid var(--navy); border-radius: var(--radius); padding: 18px 22px; margin: 24px 0; } .entry-content .ncnca-officials-events h2 { margin: 0 0 6px; font-size: 22px; } .ncnca-off-list { list-style: none; margin: 0; padding: 0; } .entry-content .ncnca-off-list li { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); } .entry-content .ncnca-off-list li:first-child { border-top: 0; } .ncnca-off-list .off-date { font-weight: 700; color: var(--red); margin-right: 8px; } .ncnca-off-list .off-tbc { display: inline-block; vertical-align: 1px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: #FFF; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; line-height: 1.4; } .ncnca-off-list .off-title { display: block; font-weight: 700; color: var(--ink); margin-top: 2px; } .ncnca-off-list .off-sum { display: block; color: var(--muted); font-size: 15px; } .entry-content .ncnca-off-note { margin: 8px 0 0; font-size: 14px; } /* Calendar "Clear all filters" (2026-10-28): red text link at the end of the Series & more row; under the chips on phones. Appears only when a chip is picked or a search is active. The phone "Filter" button and the "All races" chip were removed the same day. */ .cal-clear { margin-left: auto; align-self: flex-start; padding-top: 10px; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--red); } .cal-clear:hover { color: var(--navy); text-decoration: underline; } @media (max-width: 760px) { .cal-clear { margin-left: 0; padding-top: 4px; } } /* Picked chips: the check mark turns into an X under the mouse, so it reads as "click to remove" (PC only; phones have no hover). */ @media (hover: hover) { .cal-chip.is-current:not(.cal-chip-all):hover::before { content: "\2715"; width: auto; height: auto; margin: 0 7px 0 0; border: 0; transform: none; font-size: 12px; line-height: 1; } } /* Calendar list spacing (2026-10-28): smaller gap between the rule under the chips and "Previous Events" on PC (was 124px; 64px, then 42px on Lloyd's request), and a gap between "Previous Events" and the month buttons (was 0). */ @media (min-width: 761px) { .tribe-events-view--list .tribe-events-l-container { padding-top: 14px !important; } .tribe-events .cal-months { margin-top: 12px; } } /* Calendar date tile on every screen size (2026-10-28): PC and tablets now use the phone's "quiet" tile (light grey-blue, red month, navy day, weekday underneath). Same-month multi-day races show "7–8" / "SAT–SUN" in the tile and the separate date line is hidden; races crossing a month end keep the first day in the tile plus the "Oct 26 – Nov 1" line. Calendar list only; home/search cards stay red. */ .tribe-common .ncnca-list-date .chip { width: 56px; flex-basis: 56px; align-items: center; gap: 1px; padding: 8px 2px 9px; border-radius: 8px; background: #EEF1F6; color: var(--ink); } .tribe-common .ncnca-list-date .chip-mon { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--red); } .tribe-common .ncnca-list-date .chip-day { font-size: 26px; line-height: 1; color: var(--ink); white-space: nowrap; } .tribe-common .ncnca-list-date .chip-day-end { display: inline; } .tribe-common .ncnca-list-date .chip-dow { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--muted); white-space: nowrap; } .tribe-common .ncnca-dt-tile { display: none; } /* Phone "Filter" button brought back (2026-10-28 pm). The chips fold away behind one button so the first race shows on screen; the button shows "Filter (n)" and the picks; "Clear all" sits beside it when something is picked; the panel reopens after a chip tap (?fo=1). Uses the older .cal-filter-cb / .cal-filter-toggle rules (Option A block above). PC and tablets unchanged. */ .cal-clear-m { display: none; } @media (max-width: 760px) { .cal-filter-wrap { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; } .cal-filter-wrap .cal-filter-toggle { flex: 1 1 0; min-width: 0; width: auto; } .cal-filter-toggle-word { white-space: nowrap; } .cal-clear-m { display: inline-flex; align-items: center; gap: 5px; flex: none; min-height: 46px; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--red); white-space: nowrap; } .cal-clear-m:hover { color: var(--navy); text-decoration: underline; } .cal-filter-wrap .cal-filters { flex: 0 0 100%; min-width: 0; } .cal-filters .cal-clear { display: none; } /* Month buttons on one line that scrolls sideways (meant since 22 Oct, but TEC's ".tribe-common nav { display: block }" won). */ .tribe-common .cal-months { display: flex; } } /* Race page: compact Race history — one year chip per season (2026-11-02) */ .yr-intro { margin: 18px 0 0; } .yr-list { list-style: none; margin: 20px auto 0; padding: 0; max-width: 820px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .yr-list li { margin: 0; padding: 0; } .yr { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--navy); font-weight: 800; font-size: 15px; line-height: 1; font-variant-numeric: tabular-nums; } a.yr:hover, a.yr:focus-visible { background: var(--navy); border-color: var(--navy); color: #FFF; text-decoration: none; } a.yr.ncnca-ext::after { content: none !important; } .yr-off { background: transparent; border-style: dashed; color: var(--muted); font-weight: 600; } .yr-key { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; } .yr-key-chip { min-width: 0; padding: 4px 10px; font-size: 12px; } @media (max-width: 600px) { .yr-list { gap: 6px; } .yr { min-width: 56px; padding: 7px 10px; font-size: 14px; } } /* ========================================================================== Home page inline newsletter sign-up (2026-11-02) Replaces the click-through Newsletter box; posts the email straight to Brevo. ========================================================================== */ .panel-newsletter .nl-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .panel-newsletter .nl-form[hidden] { display: none; } .panel-newsletter .nl-input { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 17px; line-height: 22px; color: var(--navy, #011E41); background: #fff; border: 2px solid #fff; border-radius: 999px; padding: 12px 20px; } .panel-newsletter .nl-input::placeholder { color: #8a93a6; opacity: 1; } .panel-newsletter .nl-input:focus { outline: 3px solid #FFB3BC; outline-offset: 2px; } .panel-newsletter .nl-button { flex: 0 0 auto; margin-top: 0; border: 0; cursor: pointer; font-family: inherit; } .panel-newsletter .nl-button:hover { filter: brightness(1.08); } .panel-newsletter .nl-button:disabled { opacity: .7; cursor: wait; } .panel-newsletter .nl-button:focus-visible { outline: 3px solid #FFB3BC; outline-offset: 2px; } .panel-newsletter .nl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .panel-newsletter .nl-fine { font-size: 14px; color: #9FB0D0; margin-top: 10px; } .panel-newsletter .nl-fine.nl-done { font-size: 17px; color: #fff; font-weight: 700; margin-top: 18px; } .panel-newsletter .nl-fine.nl-error { color: #FFB3BC; } .panel-newsletter .nl-fine a { color: #fff; text-decoration: underline; } /* Phones: a half-width box is too narrow for an email field, so the two boxes stack (clubs first). */ @media (max-width: 760px) { .split-pair { grid-template-columns: minmax(0, 1fr); } .split-pair .panel p.nl-fine { display: block; margin-top: 8px; } .panel-newsletter .nl-form { margin-top: 12px; gap: 8px; } .panel-newsletter .nl-input { flex-basis: 160px; font-size: 16px; padding: 10px 16px; } .panel-newsletter .nl-button { margin-top: 0; padding: 12px 18px; } } /* Photo credit in header bands (2026-11-02): from the photo's Media Library Caption */ .page-band.has-photo { position: relative; } .page-band.has-photo[data-credit]::after { content: attr(data-credit); position: absolute; right: 12px; bottom: 8px; font-size: 11px; line-height: 1.2; letter-spacing: .02em; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none; } @media (max-width: 600px) { .page-band.has-photo[data-credit]::after { font-size: 10px; right: 8px; bottom: 6px; } } /* ------------------------------------------- Canceled / postponed races (2026-11-02) Badge: ncnca_status_badge() and The Events Calendar's own list label. Rows/cards: class ncnca-is-canceled / ncnca-is-postponed. */ .ncnca-evstatus, .tribe-common .tribe-events-status-label__text { display: inline-block; margin-right: 8px; padding: 3px 8px; border-radius: 4px; background: var(--red); color: #FFF; font-family: var(--font); font-size: 12px; font-weight: 800; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; vertical-align: middle; } .ncnca-evstatus-postponed, .tribe-common .tribe-events-status-label__text--postponed { background: #B45309; } .tribe-common .tribe-events-status-label { display: inline; margin: 0; } .hr-card .ncnca-evstatus { align-self: flex-start; margin: 0 0 4px; } .race-hero .ncnca-evstatus { font-size: 15px; padding: 5px 12px; margin-right: 0; box-shadow: 0 0 0 2px #FFF; } /* Calendar list row, home card, other-race cards: greyed, date struck through. */ .tribe-events-calendar-list__event-row:has(.ncnca-is-canceled) .ncnca-list-date .chip, .hr-card.ncnca-is-canceled .hr-date, .race-card.ncnca-is-canceled .chip { opacity: .55; text-decoration: line-through; text-decoration-thickness: 2px; } .tribe-common .tribe-events-calendar-list__event.ncnca-is-canceled .tribe-events-calendar-list__event-title-link, .hr-card.ncnca-is-canceled .hr-name, .race-card.ncnca-is-canceled .race-card-name { color: var(--muted) !important; } .tribe-events-calendar-list__event.ncnca-is-canceled .tribe-events-calendar-list__event-featured-image-wrapper img { filter: grayscale(1); opacity: .5; } .hr-card.ncnca-is-canceled, .race-card.ncnca-is-canceled { background: var(--soft); } .champ-card.ncnca-is-canceled { opacity: .7; } .ncnca-is-canceled .countdown, .ncnca-is-postponed .countdown { display: none !important; } .champ-card .ncnca-evstatus { background: #FFF; color: var(--red); } /* Race page. */ .race-page.ncnca-is-canceled .race-when { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .85; } /* No weather, live-results bar or Add to calendar for a canceled race. */ .race-page.ncnca-is-canceled #race-weather, .race-page.ncnca-is-canceled .raceday-bar, .race-page.ncnca-is-canceled .cal-add, .race-page.ncnca-is-postponed #race-weather, .race-page.ncnca-is-postponed .raceday-bar, .race-page.ncnca-is-postponed .cal-add { display: none !important; } /* "Flyer coming soon" / "Course map coming soon" make no sense for a canceled race. */ .race-page.ncnca-is-canceled .action-bar .pill-disabled:not(.action-main) { display: none; } .race-page.ncnca-is-canceled .fact-grid .fact:first-child .fact-v { text-decoration: line-through; } .race-status { margin: 0 0 16px; padding: 14px 18px; border-left: 6px solid var(--red); border-radius: 6px; background: #FDECEE; color: #7A0A12; font-size: 17px; line-height: 1.45; } .race-status strong { display: block; font-size: 20px; color: var(--red); } .race-status-postponed { border-left-color: #B45309; background: #FFF4E5; color: #6B3A06; } .race-status-postponed strong { color: #B45309; } /* Race page with the "Event Site (USAC)" button (2026-11-03, Lloyd): five buttons. Wide PC (1180px+): one row of 5 equal buttons (Register · Flyer · Strava · Event Site (USAC) · Map). 761-1179px: 3 + 2. Phones: Register / Flyer + Strava / Event Site (USAC) + Map. */ @media (min-width: 761px) { /* Round 2 (2026-11-03 19:55): 14px text so "Register on Webscorer" etc. fit on one line (Stafford Lake, Annadel); the Map button fills its cell so all five stay the same height if a long label still wraps. */ .action-bar.action-bar-5 { gap: 8px; padding: 22px 16px; } .action-bar.action-bar-5 .pill { padding-left: 7px; padding-right: 7px; letter-spacing: .02em; } .action-bar.action-bar-5 .pill:not(.pill-disabled) { font-size: 14px; } .action-bar.action-bar-5 .action-map .pill { flex: 1 1 auto; } } @media (min-width: 1180px) { .action-bar.action-bar-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 761px) and (max-width: 1179px) { .action-bar.action-bar-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .action-bar.action-bar-5 > :nth-child(-n+3) { grid-column: span 2; } .action-bar.action-bar-5 > :nth-child(n+4) { grid-column: span 3; } } @media (max-width: 760px) { .action-bar.action-bar-5 .pill:nth-child(4), .action-bar.action-bar-5 .action-map { grid-column: auto; } } /* The map cell can include the address under its button (touch screens); keep the USAC button button-sized. */ @media (max-width: 1179px) { .action-bar.action-bar-5 .action-usac { align-self: start; } } /* Calendar pills spacing (2026-11-04, Lloyd): The Events Calendar's own reset (".tribe-common nav", ".tribe-common span") was beating the month-button and countdown rules above. PC: month buttons now sit 6px apart (flex, as phones already were). PC and phones: the "In 3 days" countdown badge gets back its 3px/10px padding. */ .tribe-common .cal-months { display: flex; } .tribe-common .countdown-list { padding: 3px 10px; } /* Home page Upcoming races (2026-11-04, Lloyd): no "Registration not open yet" text on the cards, as on the PC calendar. With it, Map and Strava wrapped onto extra lines. The text is still in the HTML (functions.php ncnca_home_race_card), only hidden here. */ .hr-none { display: none; } /* Calendar on phones (2026-11-04, Lloyd): no "Registration not open yet" text either, so phones match PC and the home page. */ .tribe-common .ncnca-list-links .ncnca-ql-none { display: none; } /* Home page Instagram row (2026-11-04, Lloyd): 8px between the photos so they don't merge into each other (was gap 0). Tile widths allow for the gaps so the same number shows as before: 6 on PC, ~3.4 on tablets, ~2.4 on phones. */ .home-v2 .insta-feed #sb_instagram #sbi_images.is-carousel { gap: 8px !important; } .home-v2 .insta-feed #sb_instagram #sbi_images.is-carousel > .sbi_item { flex-basis: calc((100% - 5 * 8px) / 6) !important; } @media (max-width: 1000px) { .home-v2 .insta-feed #sb_instagram #sbi_images.is-carousel > .sbi_item { flex-basis: calc((100% - 3 * 8px) / 3.4) !important; } } @media (max-width: 760px) { .home-v2 .insta-feed #sb_instagram #sbi_images.is-carousel > .sbi_item { flex-basis: calc((100% - 2 * 8px) / 2.4) !important; } }