* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Sports Bug: photo backgrounds replace the template's background videos */ .video-stats video, .video-home video, .video-cta video { display: none !important; } /* Programme pages: hide the tile band until all four tiles are filled in */ .pt-tiles-sec:has(.w-dyn-bind-empty) { display: none; } /* Sports Bug keyboard focus and bypass navigation. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid #094469; outline-offset: 4px; box-shadow: 0 0 0 2px #ffffff; } :where(a, button, input, select, textarea, [tabindex]):focus { scroll-margin-top: 120px; scroll-margin-bottom: 32px; } .sb-skip-link { position: fixed; top: 12px; left: 12px; z-index: 2147483647; padding: 12px 20px; border-radius: 8px; background: #ffffff; color: #094469; font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: underline; transform: translateY(-200%); } .sb-skip-link:focus { transform: translateY(0) } .expandable-top[role="button"] { cursor: pointer } /* Figma finishing: keep decoration behind content, and preserve SVG proportions. */ .hero-home-section>.main-container, .blog-carousel-section>.main-container { position: relative; z-index: 1; } [data-sb-figma-art] { pointer-events: none; height: auto; } .sb-holiday-marquee .hc-strip { display: flex; width: max-content; max-width: none; margin: 0; padding: 0; gap: 16px; grid-template-columns: none; } .sb-holiday-marquee .hc-strip-item { flex: 0 0 auto; display: block; width: clamp(240px, 23.333vw, 448px); height: clamp(240px, 23.333vw, 448px); aspect-ratio: auto; } .sb-holiday-marquee .hc-strip-item:nth-child(5n+1) { width: clamp(302px, 29.375vw, 564px); } .sb-holiday-marquee .hc-strip-item:nth-child(5n+3) { width: clamp(178px, 17.292vw, 332px); } .sb-holiday-marquee .hc-strip-img { width: 100%; height: 100%; object-fit: cover; } .sb-holiday-rail { scrollbar-width: none; overscroll-behavior-x: contain; } .sb-holiday-rail::-webkit-scrollbar { display: none; } .sb-holiday-controls { display: none; } .sb-holiday-marquee[data-ready] .sb-holiday-controls { display: flex; } .sb-holiday-toggle { font-family: inherit; user-select: none; text-decoration: none; min-height: 44px; } .sb-holiday-toggle:hover { background: rgba(255, 255, 255, .12); } .sb-holiday-rail:focus-visible { outline-offset: -5px; } @media(max-width:767px) { .sb-holiday-marquee { padding-bottom: 40px; } .sb-holiday-controls { padding-right: 20px; } .sb-holiday-marquee .hc-strip { gap: 12px; } .sb-holiday-marquee .hc-strip-item { width: 240px; height: 240px; } .sb-holiday-marquee .hc-strip-item:nth-child(5n+1) { width: 302px; } .sb-holiday-marquee .hc-strip-item:nth-child(5n+3) { width: 178px; } .sb-welfare-quote-art, .sb-holiday-quote-art { width: 94%; } } @media(prefers-reduced-motion:reduce) { .sb-holiday-marquee [data-sb-clone] { display: none; } .sb-holiday-marquee[data-ready] .sb-holiday-controls { display: none; } } /* Mega navigation: states, hover and small-screen layout. Base styles live on the Webflow classes. */ .sb-nav__link, .sb-nav__panel-link, .sb-nav__card-cta, .sb-nav__burger { transition: background-color .2s, color .2s; } .sb-nav__chevron { transition: transform .25s; } .sb-nav__link[aria-expanded="true"] { background-color: rgba(32, 32, 32, .06); } .sb-nav__link[aria-expanded="true"] .sb-nav__chevron { transform: rotate(180deg); } .sb-nav__link.w--current { color: #d12426; } .sb-nav__col:last-child { border-right: 0; } .sb-nav__card-col:only-child { flex-basis: 100%; } .sb-nav .cta-small { flex: none; padding: 14px 24px; font-size: 16px; line-height: 20px; } .sb-nav .cta-small .button-text-mask { height: 20px; } .sb-nav__items>li { margin: 0; } @media (max-width: 1199px) and (min-width: 992px) { .sb-nav .cta-small { padding: 12px 18px; font-size: 15px; } } @media (max-width: 479px) { .sb-nav .cta-small { padding: 12px 16px; font-size: 15px; } } @media (hover: hover) { .sb-nav__link:hover { background-color: rgba(32, 32, 32, .06); } .sb-nav__panel-link:hover { background-color: #d8e3f1; } .sb-nav__card-cta:hover { background-color: #a81d1f; } } @media (min-width: 992px) { #sb-nav-programmes .sb-nav__panel-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; } } @media (max-width: 1199px) and (min-width: 992px) { .sb-nav__bar-inner { grid-column-gap: 8px; } .sb-nav__items { grid-column-gap: 0; } .sb-nav__link { padding: 10px 6px; font-size: 14px; } .sb-nav__logo { width: 100px; } } @media (max-width: 991px) { .sb-nav__bar-inner { min-height: 44px; } .sb-nav__list { position: fixed; z-index: 1; left: var(--grid--page-padding); right: var(--grid--page-padding); top: calc(var(--sb-nav-bottom, 80px) + 8px); bottom: var(--grid--page-padding); flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 8px 24px 24px; overflow-y: auto; overscroll-behavior: contain; border-radius: 20px; background-color: #fff; opacity: 0; visibility: hidden; } .sb-nav__items { flex-direction: column; align-items: stretch; width: 100%; } .sb-nav__link { justify-content: space-between; width: 100%; min-height: 48px; padding: 12px 0; border-radius: 0; border-bottom: 1px solid rgba(32, 32, 32, .08); font-family: "Big Shoulders", sans-serif; font-size: 22px; font-weight: 800; text-transform: uppercase; white-space: normal; } .sb-nav__link[aria-expanded="true"] { background-color: transparent; } .sb-nav__chevron { width: 20px; height: 20px; transform: rotate(-90deg); } .sb-nav__burger { display: flex; } .sb-nav__dropdown-wrap { position: fixed; z-index: 4; left: var(--grid--page-padding); right: var(--grid--page-padding); top: calc(var(--sb-nav-bottom, 80px) + 8px); bottom: var(--grid--page-padding); width: auto; } .sb-nav__dropdown { height: 100%; overflow: visible; border-radius: 20px; } .sb-nav__dropdown-bg, .sb-nav__backdrop { display: none; } .sb-nav__panel { bottom: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: 20px; background-color: #fff; } .sb-nav__panel-inner { flex-direction: column; padding-top: 0; border-top: 0; } .sb-nav__col { flex: none; padding: 24px 12px 20px; border-right: 0; border-bottom: 1px solid rgba(32, 32, 32, .08); } .sb-nav__col:last-child { border-bottom: 0; } .sb-nav__panel-link { min-height: 44px; } .sb-nav__card-col { flex: none; padding: 16px; } .sb-nav__card-img { height: 160px; } } @media (max-width: 479px) { .sb-nav__bar { padding: 8px 8px 8px 16px; } .sb-nav__logo { width: 112px; } .sb-nav__link { font-size: 20px; } } /* Designer only: set data-panel-state="active" on a panel, or data-mobile-nav="active" on the list, to edit it. */ .wf-design-mode [data-nav-content][data-panel-state="active"] { opacity: 1; visibility: visible; pointer-events: auto; position: relative; } .wf-design-mode [data-mobile-nav="active"] { opacity: 1; visibility: visible; } .w-richtext a:not([class]), p a:not([class]), .body-medium a:not([class]), .checkbox-text a { color: #a81d1f; text-decoration: underline; text-underline-offset: 2px } .about-story-section p a:not([class]) { color: #fff } .text-field::placeholder { color: #6b6b6b; opacity: 1 } .w-dyn-empty { display: none } .body-program.w-dyn-bind-empty, .content-body-program>.divider-program:first-child, .content-body-program>.divider-program:last-child, .divider-program:has(+.body-program.w-dyn-bind-empty) { display: none } .content-body-program { row-gap: 40px !important; grid-row-gap: 40px !important } .body-program h4 { margin: 40px 0 12px } .body-program>h4:first-child { margin-top: 0 } .body-program p { margin: 0 0 16px } .body-program ul, .body-program ol { margin: 0 0 16px; padding-left: 22px } .body-program li { margin-bottom: 8px } .body-program>*:last-child { margin-bottom: 0 } .body-program p:has(>strong:only-child) { margin-bottom: 8px } a[href^="tel:+447797"]:not([class]), a[href^="mailto:info@sportsbug"]:not([class]) { color: inherit; text-decoration: underline; text-underline-offset: 2px } .sb-contact-link { overflow-wrap: anywhere } .sb-prog-cta { display: flex; margin-top: 24px } .is-btn, .is-btn-1, .is-btn-light, .is-btn-ghost, .sb-cta-btn, .sb-nav__card-cta, .sb-hero-toggle { transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease } @media(hover:hover) { .is-btn:hover, .is-btn-1:hover, .sb-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(9, 68, 105, .18); filter: brightness(.92) } .is-btn-light:hover { transform: translateY(-2px); background-color: #094469; color: #fff; box-shadow: 0 6px 16px rgba(9, 68, 105, .18) } .is-btn-ghost:hover { transform: translateY(-2px); background-color: rgba(255, 255, 255, .18) } .sb-nav__card-cta:hover, .sb-hero-toggle:hover { transform: translateY(-1px) } } @media(prefers-reduced-motion:reduce) { .is-btn, .is-btn-1, .is-btn-light, .is-btn-ghost, .sb-cta-btn { transition: background-color .25s, color .25s } .is-btn:hover, .is-btn-1:hover, .is-btn-light:hover, .is-btn-ghost:hover, .sb-cta-btn:hover { transform: none } } .section.faq-section, .section.philosophy-section, .section.features-section, .section.about-description-section, .section.about-testimonial-section, .section.about-story-section, .section.team-section, .section.blog-carousel-section, .section.testimonial-home-section, .pt-gallery, .section.program-body-section, .hc-testi, .wl-testi, .sb-careers, .is-reviews { padding-top: 80px !important; padding-bottom: 80px !important } .section.program-list-section { padding-top: 64px !important; padding-bottom: 80px !important } .section.hero-gallery-section { padding-bottom: 80px !important } .section.contact-info-section, .pt-tiles-sec { padding-top: 64px !important; padding-bottom: 80px !important } .hc-day+.hc-day, .section.philosophy-section+.section.philosophy-section, .section.program-body-section+.pt-approach, .section.about-testimonial-section+.section.team-section { padding-top: 0 !important } .hc-day-inner .hc-row+.hc-h2-centre { margin-top: 48px } h3.hc-body-p, h3.jb-p, h3.wl-p { margin-top: 32px; margin-bottom: 8px } .hero-about-section, .hero-blog-section, .section.hero-blog-section { position: relative } @media(max-width:767px) { .section.faq-section, .section.philosophy-section, .section.features-section, .section.about-description-section, .section.about-testimonial-section, .section.about-story-section, .section.team-section, .section.blog-carousel-section, .section.testimonial-home-section, .pt-gallery, .section.program-body-section, .hc-testi, .wl-testi, .sb-careers, .is-reviews, .hc-intro, .hc-approach, .hc-keyinfo, .hc-activities, .hc-day, .is-intro, .is-schools, .jb-intro, .jb-gallery, .wl-body, .pt-approach, .pt-testi, .os-way { padding-top: 64px !important; padding-bottom: 64px !important } .section.contact-info-section, .pt-tiles-sec { padding-top: 48px !important; padding-bottom: 64px !important } .hc-day+.hc-day, .section.philosophy-section+.section.philosophy-section, .section.program-body-section+.pt-approach { padding-top: 0 !important } } :is(.section.features-section, .section.about-description-section, .hc-activities, .pt-approach, .section.hero-about-section, .section.about-testimonial-section, .section.hero-blog-section, .section.hero-gallery-section, .section.hero-news-section, .contact-info-tile) { background-color: #d12426 !important; color: #fff !important } :is(.section.features-section, .section.about-description-section, .hc-activities, .pt-approach, .section.hero-about-section, .section.about-testimonial-section, .section.hero-blog-section, .section.hero-gallery-section, .section.hero-news-section, .contact-info-tile) :not([class*="card"], [class*="card"] *, [class*="cta"], [class*="cta"] *, [class*="btn"], [class*="btn"] *, img) { color: #fff !important } :is(.section.features-section, .section.about-description-section, .hc-activities, .pt-approach, .section.hero-about-section, .section.about-testimonial-section, .section.hero-blog-section, .section.hero-gallery-section, .section.hero-news-section, .contact-info-tile) [class*="card"] { color: #202020 } :is(.section.program-image-section, .section.program-body-section, .section.faq-section, .section.hero-privacy-section, .section.news-body-section, .section.more-articles-section, .article-overscroll) { background-color: #f2f2f2 !important } @media(max-width:767px) { .features-grid { grid-template-columns: 1fr !important; grid-row-gap: 12px !important } .feature-card { flex-direction: row !important; align-items: flex-start; gap: 16px } .feature-card .icon-feature-card { flex: none; margin: 0 } .feature-card .text-wrap-feature-card { margin: 0 } } @media(max-width:767px) { .hero-home-section .sb-hero-toggle { top: 96px !important; bottom: auto !important; right: 16px !important } }