/* =========================================
HEADER IMAGE + BADGE CONTROL (SAFE)
- Keeps HOME page exactly as-is
- Hides header image + badge on all other pages
Requires the Advanced JS snippet that adds:
body.weho-hide-header
========================================= */
/* When JS adds the class to BODY, hide the full header set */
body.weho-hide-header #HeaderImageRotator,
body.weho-hide-header #Banner2,
body.weho-hide-header #BadgesPanel,
body.weho-hide-header .badgesContainer2,
body.weho-hide-header #Logo2Image {
display: none !important;
}
/* Remove leftover spacing when hidden */
body.weho-hide-header #HeaderImageRotator,
body.weho-hide-header #Banner2,
body.weho-hide-header #BadgesPanel,
body.weho-hide-header .badgesContainer2 {
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* =========================================================
Youth Basketball top section
========================================================= */
.weho-youth-hero {
max-width: 1200px;
margin: 0 auto;
padding: 30px 16px;
box-sizing: border-box;
}
.weho-youth-hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 36px;
align-items: stretch;
}
.weho-youth-hero-image {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 24px rgba(0,0,0,0.12);
min-height: 420px;
}
.weho-youth-hero-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
.weho-youth-hero-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.weho-youth-hero-title {
font-family: "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
font-weight: 700;
letter-spacing: 1px;
font-size: 34px;
line-height: 1.15;
margin: 0 0 14px 0;
color: #1b1b1b;
}
.weho-youth-hero-buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 0 0 16px 0;
}
.weho-youth-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
border-radius: 999px;
text-decoration: none !important;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 13px;
border: 2px solid #0b3a67;
color: #0b3a67 !important;
background: #ffffff;
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.weho-youth-btn:hover {
transform: translateY(-1px);
background: #0b3a67;
color: #ffffff !important;
}
.weho-youth-hero-text {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
line-height: 1.55;
color: #4d4d4d;
margin: 0;
}
@media (max-width: 980px) {
.weho-youth-hero-grid { grid-template-columns: 1fr; }
.weho-youth-hero-image { min-height: 320px; }
.weho-youth-hero-title { font-size: 30px; }
}
/* =========================================================
HEADER IMAGE ROTATOR FIX (NO body.home DEPENDENCY)
========================================================= */
:root {
--weho-rotator-h-desktop: 420px;
--weho-rotator-h-mobile: 260px;
}
#HeaderImageRotator,
#HeaderImageRotator #header-carousel,
#HeaderImageRotator .carousel-inner,
#HeaderImageRotator .carousel-item {
height: var(--weho-rotator-h-desktop) !important;
max-height: var(--weho-rotator-h-desktop) !important;
overflow: hidden !important;
}
#HeaderImageRotator .carousel-item img,
#HeaderImageRotator img.d-block.w-100 {
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: cover !important;
object-position: center center !important;
}
@media (max-width: 980px) {
#HeaderImageRotator,
#HeaderImageRotator #header-carousel,
#HeaderImageRotator .carousel-inner,
#HeaderImageRotator .carousel-item {
height: var(--weho-rotator-h-mobile) !important;
max-height: var(--weho-rotator-h-mobile) !important;
}
}
/* =========================================================
PROGRAM CARDS (3-UP, WIDE, AUTO HEIGHT, FULL IMAGE, NO ELLIPSIS)
========================================================= */
/* Wide section with ~0.5 inch side padding */
.weho-programs-wrap {
width: 100% !important;
max-width: 1600px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 48px !important;
padding-right: 48px !important;
box-sizing: border-box !important;
}
/* Don’t let TeamSideline wrappers squeeze things */
.weho-programs-wrap .row,
.weho-programs-wrap .row.clearfix,
.weho-programs-wrap .row.clearfix.relative,
.weho-programs-wrap .column {
width: 100% !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
box-sizing: border-box !important;
}
/* 3-up on desktop, but DO NOT stretch heights */
.weho-programs-wrap .weho-programs-grid {
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 28px !important;
/* Key: prevents giant equal-height cards */
align-items: start !important;
}
/* Tablet / phone */
@media (max-width: 980px) {
.weho-programs-wrap {
padding-left: 24px !important;
padding-right: 24px !important;
}
.weho-programs-wrap .weho-programs-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 22px !important;
}
}
@media (max-width: 520px) {
.weho-programs-wrap {
padding-left: 18px !important;
padding-right: 18px !important;
}
.weho-programs-wrap .weho-programs-grid {
grid-template-columns: 1fr !important;
}
}
/* Card should size to its content (no forced height) */
.weho-programs-wrap .weho-program-card {
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
display: block !important; /* removes the flex fill behavior */
}
/* IMAGE: fixed top box height, show full image with NO crop */
.weho-programs-wrap .weho-program-image {
height: 220px !important;          /* adjust 200–260 if you want */
overflow: hidden !important;
background: #f3f3f3 !important;
}
/* These selectors are intentionally aggressive to beat TeamSideline rules */
.weho-programs-wrap .weho-program-card .weho-program-image img,
.weho-programs-wrap .weho-program-card img {
width: 100% !important;
height: 220px !important;          /* match the container height */
object-fit: contain !important;    /* KEY: no cropping */
object-position: center center !important;
display: block !important;
}
/* Content should expand naturally (no clamping, no ellipses) */
.weho-programs-wrap .weho-program-content {
padding: 18px 22px 14px !important;
box-sizing: border-box !important;
}
/* Remove any truncation / ellipsis behavior */
.weho-programs-wrap .weho-program-content p,
.weho-programs-wrap .weho-program-card p,
.weho-programs-wrap .weho-program-description,
.weho-programs-wrap .description {
overflow: visible !important;
text-overflow: clip !important;
white-space: normal !important;
-webkit-line-clamp: unset !important;
display: block !important;
}
/* Learn more should follow content naturally (NOT forced to bottom) */
.weho-programs-wrap .weho-learn-more {
margin-top: 0 !important;
}
/* Overlay link behavior */
.weho-program-card.weho-card-has-overlay { position: relative; }
.weho-program-card .weho-card-overlay-link {
position: absolute;
inset: 0;
z-index: 1;
display: block;
}
.weho-program-card .weho-learn-more {
position: relative;
z-index: 2;
}
.weho-program-card.weho-card-has-overlay { cursor: pointer; }
/* =========================================================
EQUAL HEIGHT CARDS + LEARN MORE STICKS TO BOTTOM
(while keeping tight spacing and full images)
========================================================= */
/* Make grid items stretch to the height of the tallest card */
.weho-programs-wrap .weho-programs-grid {
align-items: stretch !important;
}
/* Card becomes a flex column so we can push Learn More to bottom */
.weho-programs-wrap .weho-program-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important;       /* match the tallest card in the row */
}
/* Content should take available space, but with tighter padding */
.weho-programs-wrap .weho-program-content {
flex: 1 1 auto !important;
padding: 14px 20px 10px !important;  /* tighter than before */
}
/* Reduce spacing under headings/paragraphs if TeamSideline adds big margins */
.weho-programs-wrap .weho-program-content h3,
.weho-programs-wrap .weho-program-content h4,
.weho-programs-wrap .weho-program-content p {
margin-bottom: 10px !important;
}
/* Pin Learn More to bottom, and reduce its top spacing */
.weho-programs-wrap .weho-learn-more {
margin-top: auto !important;
padding-top: 10px !important;   /* reduces the “gap” above the bar */
}
/* HOME ONLY combined carousel */
body.weho-home-combined-carousel .weho-home-carousel-wrap {
max-width: 1600px !important;
margin: 0 auto !important;
padding-left: 48px !important;
padding-right: 48px !important;
box-sizing: border-box !important;
}
body.weho-home-combined-carousel .weho-home-carousel-nav {
position: relative;
}
body.weho-home-combined-carousel .weho-home-carousel-track {
display: flex !important;
flex-wrap: nowrap !important;
gap: 28px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory !important;
scroll-padding-left: 48px !important;
padding-right: 90px !important; /* peek */
padding-bottom: 10px !important;
scrollbar-width: none !important;
}
body.weho-home-combined-carousel .weho-home-carousel-track::-webkit-scrollbar {
display: none !important;
}
body.weho-home-combined-carousel .weho-home-carousel-card {
flex: 0 0 calc((100% - (28px * 2)) / 3) !important; /* 3-up */
scroll-snap-align: start !important;
}
/* Buttons */
body.weho-home-combined-carousel .weho-carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 40px;
height: 40px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.12);
background: rgba(255,255,255,0.92);
box-shadow: 0 8px 18px rgba(0,0,0,0.12);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
body.weho-home-combined-carousel .weho-carousel-btn.prev { left: -12px; }
body.weho-home-combined-carousel .weho-carousel-btn.next { right: -12px; }
/* Responsive */
@media (max-width: 980px) {
body.weho-home-combined-carousel .weho-home-carousel-wrap {
padding-left: 24px !important;
padding-right: 24px !important;
}
body.weho-home-combined-carousel .weho-home-carousel-track {
scroll-padding-left: 24px !important;
padding-right: 60px !important;
}
body.weho-home-combined-carousel .weho-home-carousel-card {
flex-basis: calc((100% - 28px) / 2) !important;
}
}
@media (max-width: 520px) {
body.weho-home-combined-carousel .weho-home-carousel-wrap {
padding-left: 18px !important;
padding-right: 18px !important;
}
body.weho-home-combined-carousel .weho-home-carousel-track {
scroll-padding-left: 18px !important;
padding-right: 40px !important;
}
body.weho-home-combined-carousel .weho-home-carousel-card {
flex-basis: 85% !important; /* 1-up with peek */
}
}
/* Hide the two original rows on LIVE HOME only (JS adds this class) */
body.weho-home-combined-carousel .weho-hide-on-home-live {
display: none !important;
}
/* =========================================
HIDE BANNER IMAGE AREA ON NON-HOME PAGES
(Uses the JS-added class: weho-hide-header)
Targets what your Inspect shows:
#HeaderImagePanel > img#Banner
========================================= */
.bodyContainer.weho-hide-header #HeaderImagePanel,
.bodyContainer.weho-hide-header #HeaderImagePanel #Banner,
.bodyContainer.weho-hide-header img#Banner {
display: none !important;
}
/* Remove leftover spacing when hidden */
.bodyContainer.weho-hide-header #HeaderImagePanel {
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* =========================================
BANNER VISIBILITY (CSS-ONLY, NO JS CLASS NEEDED)
Hide banner everywhere, show only on Home.aspx
Targets: #HeaderImagePanel > img#Banner
========================================= */
/* 1) Hide banner everywhere */
#HeaderImagePanel,
#HeaderImagePanel #Banner,
img#Banner {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* 2) Show banner only on Home.aspx */
form[action*="/Layouts/minimalist/Home.aspx"] #HeaderImagePanel,
form[action*="/Layouts/minimalist/Home.aspx"] #HeaderImagePanel #Banner,
form[action*="/Layouts/minimalist/Home.aspx"] img#Banner {
display: block !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}