/* ─── Google Fonts ──────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap'); /* ─── Design Tokens — MNDB Brand (Light) ────────────────────── */ :root { --bg: #FFFFFF; --bg-2: #F4F7FA; --bg-alt: #EDF1F7; --bg-card: #FFFFFF; --border: #DAE2ED; --border-hover:#B8C6D8; --brand-blue: #4EC5F1; --brand-blue-d: #1EA8D8; --brand-blue-dd: #0C7BA8; --brand-red: #EF1A1A; --brand-red-d: #D01515; --brand-red-l: #FF4545; --navy: #0B1A3B; --navy-l: #122650; --navy-xl: #1A3568; --purple: #7C3AED; --purple-l: #9461F7; --green: #059669; --green-l: #10B981; --orange: #D97706; --orange-l: #F59E0B; --text: #0B1A3B; --text-2: #1A3568; --text-muted: #5A6E87; --text-dim: #8D9DB3; --font-display: 'Oswald', sans-serif; --font-body: 'DM Sans', sans-serif; --radius: 12px; --radius-lg: 20px; --shadow-sm: 0 1px 3px rgba(11, 26, 59, 0.06), 0 1px 2px rgba(11, 26, 59, 0.04); --shadow-md: 0 4px 12px rgba(11, 26, 59, 0.08), 0 2px 4px rgba(11, 26, 59, 0.04); --shadow-lg: 0 12px 40px rgba(11, 26, 59, 0.1), 0 4px 12px rgba(11, 26, 59, 0.05); /* Accent — site default. Each league page overrides via a body class below. --accent : the on-navy (dark-bg) tone, must stay light enough to read on --navy --accent-ink : the on-white (light-bg) tone, darkened for AA body-text contrast --accent-rgb : same hue as --accent, for rgba() washes */ --accent: var(--brand-blue); --accent-ink: var(--brand-blue-dd); --accent-rgb: 78, 197, 241; } /* ─── Per-league accents ──────────────────────────────────────── Each league's accent is taken from its own logo, so the page and the mark in its hero agree. Set on so it cascades to the header, chips, division rungs, and CTAs in one place. */ body.league-open { --accent: var(--brand-red-l); --accent-ink: var(--brand-red-d); --accent-rgb: 255, 69, 69; } body.league-lavender { /* Lighter than --purple-l (#9461F7), which only reaches 4.34:1 on --navy. This clears AA for the small uppercase tag text at 5.20:1, same hue. */ --accent: #A174F8; --accent-ink: var(--purple); --accent-rgb: 161, 116, 248; } body.league-wtnb { --accent: var(--brand-blue); --accent-ink: var(--brand-blue-dd); --accent-rgb: 78, 197, 241; } /* ─── Reset & Base ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ─── Navigation ────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 72px; display: flex; align-items: center; padding: 0 2rem; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,0.08); transition: box-shadow 0.3s; } .nav.scrolled { box-shadow: 0 4px 20px rgba(11, 26, 59, 0.25); } /* logo-dark-bg.png is cropped to its ink bounds, so this height is the height you actually see. It used to be 32% ink on a padded canvas, which rendered a 42px box as ~13px of visible logo. */ .nav-logo-img { height: 46px; width: auto; flex-shrink: 0; } .nav-links { display: flex; align-items: center; gap: 0.2rem; margin-left: auto; list-style: none; } .nav-links > li { position: relative; } .nav-links > li > a, .nav-links > li > button { display: flex; align-items: center; gap: 4px; padding: 0.4rem 0.7rem; font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.65); border-radius: 8px; transition: color 0.2s, background 0.2s; white-space: nowrap; cursor: pointer; } .nav-links > li > a:hover, .nav-links > li > button:hover { color: #fff; background: rgba(255,255,255,0.08); } .nav-cta { margin-left: 0.5rem; padding: 0.5rem 1.15rem !important; background: var(--brand-red) !important; color: #fff !important; border-radius: 8px !important; font-weight: 600 !important; transition: background 0.2s, transform 0.15s !important; } .nav-cta:hover { background: var(--brand-red-l) !important; transform: translateY(-1px); } .dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem; min-width: 200px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; box-shadow: var(--shadow-lg); } .dropdown a { display: block; padding: 0.55rem 0.85rem; font-size: 0.85rem; color: var(--text-muted); border-radius: 8px; transition: color 0.15s, background 0.15s; } /* The panel sits 8px below the trigger. That gap is outside the

, so without a bridge the pointer leaves the li on its way down, :hover goes false, and the menu fades out before it can be clicked. This fills the gap with a hoverable band that is itself a descendant of the li, so hover never breaks. It inherits pointer-events from .dropdown, so it stays inert while the menu is closed and can't create a phantom hover zone. */ .dropdown::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .dropdown a:hover { color: var(--text); background: var(--bg-2); } /* focus-within keeps the menu reachable by keyboard, which hover alone never was */ .nav-links > li:hover .dropdown, .nav-links > li:focus-within .dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .chevron { width: 14px; height: 14px; transition: transform 0.2s; } .nav-links > li:hover .chevron, .nav-links > li:focus-within .chevron { transform: rotate(180deg); } .nav-hamburger { display: none; margin-left: auto; padding: 0.4rem; color: rgba(255,255,255,0.7); border-radius: 8px; } .mobile-menu { display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: #fff; z-index: 99; overflow-y: auto; padding: 1.5rem; } .mobile-menu.open { display: block; } .mobile-menu a { display: block; padding: 0.9rem 0; font-size: 1rem; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border); transition: color 0.2s; } .mobile-menu a:hover { color: var(--text); } .mobile-menu .section-label { font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-top: 1.25rem; margin-bottom: 0.25rem; } .mobile-cta-row { display: flex; gap: 0.75rem; margin-top: 1.5rem; } /* ─── Buttons ───────────────────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.75rem; background: var(--brand-red); color: #fff; font-weight: 600; font-size: 0.95rem; border-radius: var(--radius); transition: background 0.2s, transform 0.15s, box-shadow 0.2s; cursor: pointer; } .btn-primary:hover { background: var(--brand-red-d); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(239, 26, 26, 0.25); } .btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.75rem; border: 2px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.9); font-weight: 500; font-size: 0.95rem; border-radius: var(--radius); transition: border-color 0.2s, color 0.2s, transform 0.15s, background 0.2s; cursor: pointer; } .btn-secondary:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-2px); } .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.75rem; border: 2px solid var(--border); color: var(--text-2); font-weight: 600; font-size: 0.95rem; border-radius: var(--radius); transition: border-color 0.2s, color 0.2s, transform 0.15s; cursor: pointer; } .btn-outline:hover { border-color: var(--brand-blue-d); color: var(--brand-blue-dd); transform: translateY(-2px); } /* ─── Hero ──────────────────────────────────────────────────── */ .hero { min-height: 100vh; padding-top: 72px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; background: var(--navy); color: #fff; } .hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .hero-bg::before { content: ''; position: absolute; top: -60%; left: 10%; width: 300px; height: 250%; background: linear-gradient(to right, rgba(78,197,241,0.1) 0%, rgba(78,197,241,0.04) 100%); transform: rotate(-20deg); } .hero-bg::after { content: ''; position: absolute; top: -60%; left: 30%; width: 150px; height: 250%; background: linear-gradient(to right, rgba(78,197,241,0.06) 0%, transparent 100%); transform: rotate(-20deg); } .hero-glow { position: absolute; bottom: -30%; right: -5%; width: 50%; height: 80%; background: radial-gradient(ellipse, rgba(78,197,241,0.12) 0%, transparent 60%); pointer-events: none; } .hero-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: 1280px; margin: 0 auto; padding: 4rem 2rem 5rem; width: 100%; align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; background: rgba(78, 197, 241, 0.12); border: 1px solid rgba(78, 197, 241, 0.3); border-radius: 100px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-blue); margin-bottom: 2rem; } .hero-badge .dot { width: 6px; height: 6px; background: #34D399; border-radius: 50%; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } .hero-headline { font-family: var(--font-display); font-size: clamp(4.5rem, 8vw, 9rem); font-weight: 700; line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase; color: #fff; margin-bottom: 1.75rem; } .hero-headline .accent { color: var(--brand-blue); } .hero-headline .accent-red { color: var(--brand-red); text-shadow: 0 0 50px rgba(239, 26, 26, 0.35); } .hero-sub { max-width: 480px; font-size: 1.1rem; color: rgba(255,255,255,0.6); line-height: 1.7; margin-bottom: 2.25rem; } .hero-sub strong { color: #fff; font-weight: 600; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .hero-photos { position: relative; min-height: 480px; } .hero-photo-main { width: 100%; height: 420px; border-radius: var(--radius-lg); overflow: hidden; position: relative; border: 2px solid rgba(255,255,255,0.1); } .hero-photo-main img { width: 100%; height: 100%; object-fit: cover; } .photo-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--navy-l) 0%, var(--navy-xl) 50%, var(--navy-l) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; color: rgba(255,255,255,0.25); } .photo-placeholder svg { opacity: 0.4; } .photo-placeholder span { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.05em; } .light-placeholder { background: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg-2) 50%, var(--bg-alt) 100%); color: var(--text-dim); } .hero-photo-accent { position: absolute; bottom: -20px; left: -20px; width: 180px; height: 180px; border-radius: var(--radius-lg); overflow: hidden; border: 4px solid var(--navy); box-shadow: 0 8px 32px rgba(0,0,0,0.35); } .hero-photo-accent img { width: 100%; height: 100%; object-fit: cover; } /* Sits before .hero-photo-main in the DOM, and that photo is positioned with no z-index, so without this the photo paints over the badge and only the 12px above the frame shows. */ .hero-photo-badge { position: absolute; z-index: 2; top: -12px; right: 20px; background: var(--brand-red); color: #fff; font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; padding: 0.5rem 1.2rem; border-radius: 100px; box-shadow: 0 4px 16px rgba(239, 26, 26, 0.4); } /* ─── Registration Banner ───────────────────────────────────── */ .register-banner { background: var(--brand-blue); padding: 1.6rem 2rem; } .register-banner-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; } .register-banner-text { font-family: var(--font-display); font-size: clamp(1.4rem, 3.4vw, 2.1rem); font-weight: 700; letter-spacing: 0.06em; line-height: 1.15; color: var(--navy); } .register-banner-links { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; } /* The banner is the one thing on the page with a deadline on it, so its pills are sized as real buttons rather than the small pills used elsewhere. */ .register-banner .pill-link { font-size: clamp(0.95rem, 1.5vw, 1.1rem); padding: 0.6rem 1.35rem; } .pill-link { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 100px; font-size: 0.78rem; font-weight: 600; transition: opacity 0.2s, transform 0.15s; cursor: pointer; } .pill-link:hover { opacity: 0.9; transform: translateY(-1px); } /* Solid pills carry white text, so each background must clear AA on its own: brand-red 4.35:1 and brand-blue-d 2.75:1 both fail, hence the darker tones. */ .pill-brand { background: var(--navy); color: var(--brand-blue); } .pill-red { background: var(--brand-red-d); color: #fff; } .pill-blue { background: var(--brand-blue-dd); color: #fff; } .pill-purple { background: var(--purple); color: #fff; } .pill-green { background: var(--green); color: #fff; } .pill-orange { background: var(--orange); color: #fff; } /* ─── Section Base ──────────────────────────────────────────── */ .section { padding: 5rem 2rem; } .section-inner { max-width: 1280px; margin: 0 auto; } .section-eyebrow { font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-blue-d); margin-bottom: 0.75rem; } .section-title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; color: var(--navy); margin-bottom: 1rem; } .section-desc { font-size: 1rem; color: var(--text-muted); max-width: 540px; line-height: 1.65; margin-bottom: 3rem; } /* ─── Photo Gallery Strip ───────────────────────────────────── */ .photo-strip { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4rem 2rem; overflow: hidden; } .photo-strip-inner { max-width: 1280px; margin: 0 auto; } .photo-strip-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; } .photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 220px 220px; gap: 0.75rem; } .photo-grid-item { border-radius: var(--radius); overflow: hidden; position: relative; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform 0.3s, box-shadow 0.3s; } .photo-grid-item:hover { transform: scale(1.02); box-shadow: var(--shadow-lg); } .photo-grid-item:first-child { grid-row: 1 / 3; grid-column: 1 / 2; } .photo-grid-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .photo-grid-item:hover img { transform: scale(1.05); } .photo-grid-item .photo-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 26, 59, 0.7) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s; display: flex; align-items: flex-end; padding: 1rem; } .photo-grid-item:hover .photo-overlay { opacity: 1; } .photo-overlay-text { font-size: 0.82rem; font-weight: 600; color: #fff; } .photo-link-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 600; color: var(--brand-blue-dd); transition: gap 0.2s; cursor: pointer; } .photo-link-btn:hover { gap: 0.75rem; } /* ─── League Cards ──────────────────────────────────────────── */ .leagues-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } .league-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; cursor: pointer; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); } .league-card-photo { width: 100%; height: 160px; overflow: hidden; position: relative; } .league-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .league-card:hover .league-card-photo img { transform: scale(1.05); } .league-card-photo .league-color-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; } .league-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; } .league-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .league-card.brand-blue:hover { border-color: var(--brand-blue); } .league-card.purple:hover { border-color: var(--purple); } .league-card.green:hover { border-color: var(--green); } .league-card.orange:hover { border-color: var(--orange); } .league-card.red:hover { border-color: var(--brand-red); } .bar-brand { background: var(--brand-blue); } .bar-purple { background: var(--purple); } .bar-green { background: var(--green); } .bar-orange { background: var(--orange); } .bar-red { background: var(--brand-red); } .league-season-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 6px; margin-bottom: 0.85rem; width: fit-content; } .tag-brand { background: #E8F8FE; color: var(--brand-blue-dd); } .tag-purple { background: #F0E8FE; color: var(--purple); } .tag-green { background: #E4F9F1; color: var(--green); } .tag-orange { background: #FEF3E0; color: var(--orange); } .tag-red { background: #FDE8E8; color: var(--brand-red-d); } .league-name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.1; color: var(--navy); margin-bottom: 0.5rem; } .league-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.25rem; flex: 1; } .league-meta { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1.25rem; } .meta-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-muted); } .meta-row svg { flex-shrink: 0; opacity: 0.5; } .league-register-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.25rem; border-radius: 10px; font-weight: 600; font-size: 0.88rem; color: #fff; transition: opacity 0.2s, transform 0.15s; } .league-register-btn:hover { opacity: 0.9; transform: translateY(-1px); } /* These carry white label text. brand-blue-d was 2.75:1 and brand-red 4.35:1; both now use the darker tone to clear AA. */ .btn-brand-blue { background: var(--brand-blue-dd); } .btn-purple { background: var(--purple); } /* A league that is not taking registrations yet still needs a way in, but it must not look like a Register button — nothing on this site offers a checkout for something you cannot actually buy today. */ .btn-purple-ghost, .btn-red-ghost, .btn-brand-blue-ghost, .btn-orange-ghost { background: transparent; border: 1.5px solid currentColor; border-color: color-mix(in srgb, currentColor 38%, transparent); } .btn-purple-ghost { color: var(--purple); } .btn-red-ghost { color: var(--brand-red-d); } .btn-brand-blue-ghost { color: var(--brand-blue-dd); } .btn-orange-ghost { color: var(--orange); } .btn-purple-ghost:hover, .btn-red-ghost:hover, .btn-brand-blue-ghost:hover, .btn-orange-ghost:hover { background: color-mix(in srgb, currentColor 9%, transparent); border-color: currentColor; } .btn-green { background: var(--green); } .btn-orange { background: var(--orange); } .btn-red { background: var(--brand-red-d); } /* ─── Programs ──────────────────────────────────────────────── */ .programs-bg { background: var(--bg-2); } .programs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } .program-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem 1.5rem; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; cursor: pointer; box-shadow: var(--shadow-sm); } .program-card:hover { border-color: var(--border-hover); transform: translateY(-3px); box-shadow: var(--shadow-md); } .program-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; } .icon-brand { background: #E8F8FE; } .icon-purple { background: #F0E8FE; } .icon-green { background: #E4F9F1; } .icon-orange { background: #FEF3E0; } .icon-red { background: #FDE8E8; } .program-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.5rem; } .program-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1rem; } .program-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--brand-blue-dd); transition: gap 0.2s; } .program-link:hover { gap: 0.6rem; } /* ─── Open Gym CTA ──────────────────────────────────────────── */ .open-gym-strip { position: relative; overflow: hidden; padding: 4rem 2rem; background: var(--navy); color: #fff; } .open-gym-bg { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(78, 197, 241, 0.08) 0%, transparent 50%); } .open-gym-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; text-align: center; } .open-gym-eyebrow { font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; color: var(--brand-blue); text-transform: uppercase; margin-bottom: 0.75rem; } .open-gym-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; line-height: 1.05; margin-bottom: 0.85rem; } .open-gym-desc { font-size: 1rem; color: rgba(255,255,255,0.6); line-height: 1.65; margin-bottom: 1.75rem; } /* ─── Mission & Community ───────────────────────────────────── */ .mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .mission-body { font-size: 1rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 1.75rem; } .mission-values { display: flex; flex-direction: column; gap: 0.75rem; } .value-item { display: flex; align-items: flex-start; gap: 0.85rem; } .value-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-blue-d); margin-top: 0.45rem; flex-shrink: 0; } .value-item p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; } .value-item strong { color: var(--navy); font-weight: 600; } .dei-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; } .dei-card-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.6rem; } .dei-card-body { font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.5rem; } .league-tags-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .league-tag-chip { padding: 0.35rem 0.8rem; border-radius: 100px; font-size: 0.78rem; font-weight: 600; } .chip-brand { background: #E8F8FE; color: var(--brand-blue-dd); } .chip-navy { background: var(--bg-alt); color: var(--navy); } .chip-purple { background: #F0E8FE; color: var(--purple); } .chip-green { background: #E4F9F1; color: var(--green); } .chip-orange { background: #FEF3E0; color: var(--orange); } /* ─── Resources ─────────────────────────────────────────────── */ .resources-bg { background: var(--bg-2); } .resources-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.85rem; } .resource-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; display: flex; align-items: center; gap: 0.85rem; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; cursor: pointer; box-shadow: var(--shadow-sm); } .resource-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); } .resource-icon { width: 38px; height: 38px; border-radius: 10px; background: #E8F8FE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand-blue-d); } .resource-name { font-size: 0.88rem; font-weight: 600; color: var(--navy); } .resource-desc { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.1rem; } /* ─── Footer ────────────────────────────────────────────────── */ .footer { background: var(--navy); color: #fff; padding: 3.5rem 2rem 2rem; /* The footer and the open-gym strip are the same navy. Without a seam the schedule appears to run straight into the footer. */ border-top: 1px solid rgba(255,255,255,0.14); } .footer-inner { max-width: 1280px; margin: 0 auto; } .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; } .footer-logo-img { height: 42px; width: auto; margin-bottom: 1rem; } .footer-tagline { font-size: 0.88rem; color: rgba(255,255,255,0.55); line-height: 1.65; max-width: 280px; margin-bottom: 1.25rem; } .social-links { display: flex; gap: 0.6rem; } .social-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); transition: border-color 0.2s, color 0.2s, background 0.2s; cursor: pointer; } .social-btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); background: rgba(78,197,241,0.1); } .footer-col-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .footer-col ul li a { font-size: 0.85rem; color: rgba(255,255,255,0.5); transition: color 0.2s; } .footer-col ul li a:hover { color: #fff; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); } .footer-copy { font-size: 0.8rem; color: rgba(255,255,255,0.3); } .footer-legal-links { display: flex; gap: 1.5rem; } .footer-legal-links a { font-size: 0.8rem; color: rgba(255,255,255,0.3); transition: color 0.2s; } .footer-legal-links a:hover { color: rgba(255,255,255,0.6); } /* ─── Scroll Animations ─────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* ─── Page Header (subpages) ────────────────────────────────── */ .page-header { padding-top: 72px; background: var(--navy); color: #fff; position: relative; overflow: hidden; } .page-header-bg { position: absolute; inset: 0; pointer-events: none; } .page-header-bg::before { content: ''; position: absolute; top: -60%; left: 5%; width: 400px; height: 300%; background: linear-gradient(to right, rgba(var(--accent-rgb), 0.08) 0%, transparent 100%); transform: rotate(-20deg); } /* Second, wider wash — only rendered on league pages, where it gives each hero a colour cast distinct enough to tell apart at a glance. */ .page-header-bg::after { content: ''; position: absolute; top: -40%; right: -10%; width: 620px; height: 260%; background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.16) 0%, transparent 65%); transform: rotate(18deg); opacity: 0; transition: opacity 0.3s; } body.league-open .page-header-bg::after, body.league-lavender .page-header-bg::after, body.league-wtnb .page-header-bg::after { opacity: 1; } .page-header-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 4rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .page-header-inner.no-photo { grid-template-columns: 1fr; max-width: 800px; padding: 3.5rem 2rem; } .page-header-tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: 100px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem; } .page-header-title { font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 700; line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; margin-bottom: 1.25rem; } /* League hero lockup — the league's own mark stands in for the H1 text. Height-normalised (not width) so the three logos, which have different aspect ratios, sit at the same optical weight across pages. */ .page-header-logo { margin-bottom: 1.5rem; line-height: 0; } .page-header-logo img { height: 132px; width: auto; max-width: 100%; filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.35)); } .page-header-desc { font-size: 1.05rem; color: rgba(255,255,255,0.6); line-height: 1.7; max-width: 480px; margin-bottom: 2rem; } .page-header-photo { border-radius: var(--radius-lg); overflow: hidden; height: 340px; border: 2px solid rgba(255,255,255,0.1); } .page-header-photo img { width: 100%; height: 100%; object-fit: cover; } .page-meta-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; } .meta-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 100px; font-size: 0.8rem; color: rgba(255,255,255,0.75); } /* On league pages the chips pick up the league's accent so the whole hero reads as one colour, not navy with a coloured logo dropped in. */ body.league-open .meta-chip, body.league-lavender .meta-chip, body.league-wtnb .meta-chip { background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.28); color: rgba(255,255,255,0.85); } /* Accent-coloured CTA — used on league pages so the primary action matches the league rather than the site-wide red. */ .btn-accent { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.75rem; background: var(--accent-ink); color: #fff; font-weight: 600; font-size: 0.95rem; border-radius: var(--radius); transition: filter 0.2s, transform 0.15s, box-shadow 0.2s; cursor: pointer; } .btn-accent:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.3); } /* ─── Content Sections (subpages) ───────────────────────────── */ .content-section { padding: 4rem 2rem; } .content-inner { max-width: 1280px; margin: 0 auto; } .content-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); } .content-card + .content-card { margin-top: 1rem; } /* ...but not when they are side by side. The adjacent-sibling selector above is for STACKED cards; in a grid it fires too, giving the second card a 16px top margin so it renders shorter than its neighbour and sits low in the row. */ .content-grid-2 > .content-card + .content-card, .content-grid-3 > .content-card + .content-card { margin-top: 0; } .content-card-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.85rem; } .content-card-body { font-size: 0.92rem; color: var(--text-muted); line-height: 1.7; } .content-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .cta-strip { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 3.5rem 2rem; text-align: center; } .cta-strip-inner { max-width: 640px; margin: 0 auto; } .cta-strip-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.75rem; } .cta-strip-desc { font-size: 1rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.75rem; } /* width:fit-content keeps the hit area tight to the text while still forcing the tag that follows onto its own line. */ .back-link { display: flex; width: fit-content; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.55); margin-bottom: 1.5rem; transition: color 0.2s; } .back-link:hover { color: #fff; } /* ─── Divisions ───────────────────────────────────────────────── Every league runs the same three divisions. The cards stay neutral so the tier ladder never competes with the league's own colour — only the filled rungs take the accent, which inherits per league page. */ /* The nav is position:fixed at 72px, so any in-page anchor target needs to clear it or the section heading lands underneath. */ section[id] { scroll-margin-top: 88px; } .divisions-bg { background: var(--bg-2); } /* Section eyebrows follow the league accent on league pages only; every other page keeps the site-default blue. */ body.league-open .section-eyebrow, body.league-lavender .section-eyebrow, body.league-wtnb .section-eyebrow { color: var(--accent-ink); } .divisions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: division; } .division-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; overflow: hidden; transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s; } .division-card:hover { border-color: rgba(var(--accent-rgb), 0.55); transform: translateY(-3px); box-shadow: var(--shadow-md); } /* Top edge fills further across as the tier climbs */ .division-card::before { content: ''; position: absolute; top: 0; left: 0; height: 3px; background: var(--accent-ink); border-radius: 0 3px 3px 0; } .division-card.tier-1::before { width: 33%; } .division-card.tier-2::before { width: 66%; } .division-card.tier-3::before { width: 100%; } .division-rungs { display: flex; align-items: flex-end; gap: 4px; height: 22px; margin-bottom: 1rem; } .division-rungs i { display: block; width: 9px; border-radius: 2px; background: var(--border); } .division-rungs i:nth-child(1) { height: 40%; } .division-rungs i:nth-child(2) { height: 70%; } .division-rungs i:nth-child(3) { height: 100%; } .division-card.tier-1 .division-rungs i:nth-child(-n+1), .division-card.tier-2 .division-rungs i:nth-child(-n+2), .division-card.tier-3 .division-rungs i:nth-child(-n+3) { background: var(--accent-ink); } .division-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 0.4rem; } .division-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.6rem; } /* How you get on a team in this division. Registration-critical, so it sits up with the name rather than down in the body copy. */ .division-format { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; background: var(--navy); color: #fff; border-radius: 100px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 0.9rem; } .division-format svg { flex-shrink: 0; opacity: 0.75; } .division-desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1rem; } .division-for { font-size: 0.82rem; color: var(--text-2); line-height: 1.55; padding-top: 0.9rem; border-top: 1px solid var(--border); } .division-for strong { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.3rem; } .divisions-note { margin-top: 1.5rem; padding: 1rem 1.25rem; background: rgba(var(--accent-rgb), 0.06); border: 1px solid rgba(var(--accent-rgb), 0.2); border-radius: var(--radius); font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; text-align: center; } .divisions-note strong { color: var(--navy); font-weight: 600; } /* ─── Responsive ────────────────────────────────────────────── */ @media (max-width: 1024px) { .hero-content { grid-template-columns: 1fr; gap: 2.5rem; } .hero-photos { min-height: auto; max-width: 500px; } .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; } .mission-grid { grid-template-columns: 1fr; gap: 2.5rem; } .photo-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: 200px 200px; } .photo-grid-item:first-child { grid-row: 1 / 3; } .page-header-inner { grid-template-columns: 1fr; } .page-header-photo { height: 280px; max-width: 560px; } .content-grid-2 { grid-template-columns: 1fr; } .divisions-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .nav-links { display: none; } .nav-hamburger { display: flex; align-items: center; justify-content: center; } .hero-headline { font-size: clamp(3.5rem, 15vw, 6rem); } .section { padding: 3.5rem 1.5rem; } .footer-top { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom { flex-direction: column; align-items: flex-start; } .resources-grid { grid-template-columns: 1fr 1fr; } .photo-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 200px; } .photo-grid-item:first-child { grid-row: 1 / 2; grid-column: 1 / 3; } .photo-strip { padding: 3rem 1.5rem; } .content-section { padding: 3rem 1.5rem; } .page-header-inner { padding: 3rem 1.5rem; } .page-header-logo img { height: 104px; } } @media (max-width: 400px) { .page-header-logo img { height: 84px; } } @media (max-width: 480px) { .hero-content { padding: 3rem 1.25rem 4rem; } .leagues-grid { grid-template-columns: 1fr; } .programs-grid { grid-template-columns: 1fr 1fr; } .resources-grid { grid-template-columns: 1fr; } .photo-grid { grid-template-columns: 1fr; grid-template-rows: auto; } .photo-grid-item:first-child { grid-row: auto; grid-column: auto; } .photo-grid-item { height: 200px; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ═══════════════════════════════════════════════════════════════ PHOTO SYSTEM Every photo on the site is cropped with object-fit: cover, which means the browser throws away part of the frame. --fx/--fy carry the focal point that tools/build_photos.py computed from the faces it detected, so what gets thrown away is never the players. Set per image as style="--fx:42%;--fy:28%". ═══════════════════════════════════════════════════════════════ */ .ph { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 45%); background: var(--navy-l); /* --z is a hand-set close-up crop, scaled about the focal point so zooming keeps the chosen subject fixed. Every .ph wrapper clips overflow. */ transform: scale(var(--z, 1)); transform-origin: var(--fx, 50%) var(--fy, 45%); } /* Photos fade up as they decode so a half-loaded gallery never flashes. */ .ph[data-loaded="0"] { opacity: 0; } .ph { transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1); } /* ─── Marquee ribbon ───────────────────────────────────────── Two rows drifting in opposite directions. The track holds the photo list twice so the -50% loop is seamless. */ .marquee { position: relative; background: var(--navy); padding: 1.4rem 0; overflow: hidden; } .marquee-row { overflow: hidden; } .marquee-row + .marquee-row { margin-top: 0.75rem; } .marquee-track { display: flex; gap: 0.75rem; width: max-content; animation: marquee-slide 78s linear infinite; will-change: transform; } .marquee-row-b .marquee-track { animation-duration: 96s; animation-direction: reverse; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } .marquee-item { flex: 0 0 auto; width: 236px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; position: relative; filter: saturate(1.04); } .marquee-item::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); border-radius: 10px; pointer-events: none; } /* Feather the ends so photos enter and leave instead of popping. The fade belongs to the photo rows, not the whole component — when it covered the caption too, the caption's first and last words washed out. */ .marquee-row { position: relative; } .marquee-row::before, .marquee-row::after { content: ''; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none; } .marquee-row::before { left: 0; background: linear-gradient(90deg, var(--navy), transparent); } .marquee-row::after { right: 0; background: linear-gradient(270deg, var(--navy), transparent); } .marquee-caption { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; gap: .6rem; padding: 0 1.25rem; margin-top: 1.15rem; font-family: var(--font-body); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); } .marquee-caption .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-blue); } /* ─── Mosaic collage ────────────────────────────────────────── */ /* The mosaic packs into repeating full-width bands so there are never holes: band A = one 4x4 hero beside two 2x2 squares, band B = three 2x3 thirds, band C = two 3x3 halves. Every band consumes all six columns exactly. */ .mosaic { display: grid; grid-template-columns: repeat(6, 1fr); /* Columns are fluid, so the rows have to be too. A fixed 108px row against a narrowing column turned the 2x3 tiles into 0.66 letterboxes at tablet width, cropping away more than half the frame. */ grid-auto-rows: clamp(66px, 7.6vw, 108px); grid-auto-flow: row dense; gap: 12px; } .mosaic-tile { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--navy-l); cursor: zoom-in; border: 0; padding: 0; display: block; width: 100%; min-width: 0; grid-column: span 2; grid-row: span 3; } .mosaic-tile.m-hero { grid-column: span 4; grid-row: span 4; } .mosaic-tile.m-sq { grid-column: span 2; grid-row: span 2; } .mosaic-tile.m-half { grid-column: span 3; grid-row: span 3; } .mosaic-tile.m-third { grid-column: span 2; grid-row: span 3; } .mosaic-tile:hover .ph, .mosaic-tile:focus-visible .ph { transform: scale(1.06); } .mosaic-tile:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 3px; } .photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem .9rem .8rem; background: linear-gradient(to top, rgba(6,14,32,.88), rgba(6,14,32,.35) 55%, transparent); color: #fff; text-align: left; opacity: 0; transition: opacity .3s ease; pointer-events: none; } .mosaic-tile:hover .photo-cap, .mosaic-tile:focus-visible .photo-cap, .gal-slide:hover .photo-cap { opacity: 1; } .photo-cap-title { display: block; font-family: var(--font-display); font-size: .95rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .photo-cap-sub { display: block; font-size: .74rem; color: rgba(255,255,255,.72); margin-top: .1rem; } /* ─── Crossfade stack (league + program cards) ──────────────── */ .fade-stack { position: relative; overflow: hidden; } .fade-stack .ph { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; } .fade-stack .ph.is-on { opacity: 1; } .fade-stack .fade-dots { position: absolute; right: .6rem; bottom: .6rem; display: flex; gap: 4px; z-index: 2; } .fade-stack .fade-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.45); transition: background .3s ease, width .3s ease; } .fade-stack .fade-dots i.is-on { background: #fff; width: 14px; border-radius: 3px; } /* ─── Scroll-snap gallery carousel ──────────────────────────── */ .gallery { position: relative; } .gal-track { display: flex; /* Without this, flex stretches every slide to the height of the tallest one: a portrait slide made its landscape neighbours 640x770 instead of 640x427, overriding aspect-ratio and squeezing the crop until faces were cut. */ align-items: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: .5rem; scrollbar-width: none; min-width: 0; } .gal-track::-webkit-scrollbar { display: none; } .gal-slide { position: relative; flex: 0 0 auto; width: min(62vw, 640px); aspect-ratio: 3 / 2; scroll-snap-align: center; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-l); cursor: zoom-in; border: 0; padding: 0; } .gal-slide.portrait { width: min(42vw, 420px); aspect-ratio: 2 / 3; } .gal-slide:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 3px; } .gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255,255,255,.94); color: var(--navy); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-md); z-index: 3; transition: transform .2s ease, background .2s ease; } .gal-nav:hover { transform: translateY(-50%) scale(1.08); background: #fff; } .gal-nav:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; } .gal-prev { left: -14px; } .gal-next { right: -14px; } .gal-nav[disabled] { opacity: .32; cursor: default; } .gal-nav[disabled]:hover { transform: translateY(-50%); } /* On navy sections the arrows invert. */ .on-navy .gal-nav { background: rgba(11,26,59,.82); border-color: rgba(255,255,255,.22); color: #fff; } .on-navy .gal-nav:hover { background: rgba(11,26,59,.96); } /* ─── Photo band (divisions, mission, open gym) ─────────────── */ .photo-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 2.2rem; } .photo-band-item { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--navy-l); cursor: zoom-in; border: 0; padding: 0; display: block; width: 100%; } .photo-band-item:hover .ph { transform: scale(1.05); } .photo-band-item:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 3px; } /* ─── Photo backdrop (a section that sits on a photo) ───────── */ .photo-backdrop { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .photo-backdrop .ph { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; } .photo-backdrop .ph.is-on { opacity: 1; } .photo-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(8,18,42,.95) 0%, rgba(8,18,42,.78) 46%, rgba(8,18,42,.62) 100%), linear-gradient(to top, rgba(8,18,42,.9), transparent 55%); } /* ─── Lightbox ──────────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(5,10,22,.94); display: none; align-items: center; justify-content: center; padding: 2.5rem 1rem 4.5rem; backdrop-filter: blur(6px); } .lightbox.open { display: flex; } .lightbox img { max-width: min(96vw, 1400px); max-height: 86vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,.6); object-fit: contain; } .lb-meta { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); text-align: center; color: rgba(255,255,255,.82); font-size: .82rem; letter-spacing: .04em; padding: 0 1rem; } .lb-meta strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: #fff; display: block; font-size: .95rem; } .lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s ease, transform .2s ease; } .lb-btn:hover { background: rgba(255,255,255,.2); transform: scale(1.07); } .lb-btn:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; } .lb-close { top: 1.1rem; right: 1.1rem; } .lb-prev { left: 1.1rem; top: 50%; margin-top: -24px; } .lb-next { right: 1.1rem; top: 50%; margin-top: -24px; } /* ─── Photo-forward hero ────────────────────────────────────── */ .hero-collage { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 92px; gap: 12px; width: 100%; } .hero-collage .hc { position: relative; border-radius: 14px; overflow: hidden; background: var(--navy-l); box-shadow: 0 18px 44px rgba(3,9,24,.5); animation: hc-float 9s ease-in-out infinite; } .hero-collage .hc::after { content: ''; position: absolute; inset: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } .hc-1 { grid-column: 1 / 5; grid-row: 1 / 4; animation-delay: -.4s; } .hc-2 { grid-column: 5 / 7; grid-row: 1 / 3; animation-delay: -2.6s; } .hc-3 { grid-column: 5 / 7; grid-row: 3 / 5; animation-delay: -4.1s; } .hc-4 { grid-column: 1 / 3; grid-row: 4 / 6; animation-delay: -5.7s; } .hc-5 { grid-column: 3 / 5; grid-row: 4 / 6; animation-delay: -1.5s; } @keyframes hc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .hero-photo-tag { position: absolute; z-index: 3; left: .7rem; bottom: .7rem; font-family: var(--font-display); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(6,14,32,.66); border: 1px solid rgba(255,255,255,.2); padding: .26rem .6rem; border-radius: 100px; backdrop-filter: blur(4px); } /* ─── Section helper: full-bleed photo section on navy ──────── */ .photo-feature { position: relative; background: var(--navy); color: #fff; padding: 4.5rem 0; overflow: hidden; } .photo-feature .section-eyebrow { color: var(--brand-blue); } .photo-feature .section-title { color: #fff; } .photo-feature .section-desc { color: rgba(255,255,255,.72); } .photo-feature-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 2rem; min-width: 0; } /* ─── Counters strip ────────────────────────────────────────── */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.6rem; } .stat-cell { text-align: center; padding: 1.1rem .6rem; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); } .stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: #fff; line-height: 1; } .stat-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: .45rem; } /* The same facts sitting on a light section ("who we are"), where they belong — they describe the organisation, not the open gym they used to sit under. */ .stat-row-light { margin-top: 0; margin-bottom: 2rem; gap: .75rem; } .stat-row-light .stat-cell { background: var(--bg-2); border-color: var(--border); } .stat-row-light .stat-num { color: var(--navy); } .stat-row-light .stat-label { color: var(--text-muted); } /* ─── Responsive ────────────────────────────────────────────── */ @media (max-width: 1024px) { /* row height now comes from the fluid clamp above */ .gal-slide { width: min(74vw, 520px); } .hero-collage { grid-auto-rows: 78px; } } @media (max-width: 768px) { /* Four columns: every tile is a half, the hero is full width. */ .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 92px; gap: 9px; } .mosaic-tile, .mosaic-tile.m-sq, .mosaic-tile.m-half, .mosaic-tile.m-third { grid-column: span 2; grid-row: span 2; } .mosaic-tile.m-hero { grid-column: span 4; grid-row: span 3; } .photo-band { grid-template-columns: 1fr 1fr; } .photo-band-item:nth-child(3) { grid-column: span 2; } .marquee-item { width: 168px; } /* Full-bleed backdrop is far too tall on a phone; show it as a banner across the top of the strip instead, where its aspect stays sane. */ .photo-backdrop { bottom: auto; height: 46%; } .photo-backdrop::after { background: linear-gradient(to top, var(--navy) 2%, rgba(8,18,42,.72) 45%, rgba(8,18,42,.55) 100%); } .marquee-caption { font-size: .68rem; letter-spacing: .1em; } .gal-slide { width: 82vw; } .gal-slide.portrait { width: 66vw; } .gal-prev { left: 2px; } .gal-next { right: 2px; } .stat-row { grid-template-columns: 1fr 1fr; } .photo-feature { padding: 3.2rem 0; } .photo-feature-inner { padding: 0 1.25rem; } } @media (max-width: 520px) { /* Two columns, two photos per row, hero across both. Row height is tuned so a tile lands near 1.25 rather than 0.96 — close enough to its desktop shape that one focal point can serve both. */ .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 62px; } .mosaic-tile, .mosaic-tile.m-sq, .mosaic-tile.m-half, .mosaic-tile.m-third { grid-column: span 1; grid-row: span 2; } .mosaic-tile.m-hero { grid-column: span 2; grid-row: span 3; } .hero-collage { grid-auto-rows: 62px; gap: 8px; } .lb-btn { width: 42px; height: 42px; } .lb-prev { left: .4rem; } .lb-next { right: .4rem; } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .hero-collage .hc { animation: none; } .ph { transition: none; } .gal-track { scroll-behavior: auto; } .fade-stack .ph { transition: none; } .photo-backdrop .ph { transition: none; } } /* ─── Photo-system fixes to existing components ─────────────── */ /* League cards now hold a small crossfading stack rather than one photo, and they carry more of the card's weight, so they get more height. */ .league-card-photo { height: 210px; } .photo-strip-desc { margin-top: .55rem; font-size: .95rem; color: var(--text-muted); max-width: 46ch; } /* The open-gym strip sits on photos now; its old tint layer has to ride above them instead of being painted over. */ .open-gym-strip .open-gym-bg { z-index: 1; } .open-gym-inner { z-index: 2; } /* The mission column stacks a small collage above the DEI card. */ /* The mission column is narrow, so its collage is a flat 2x2. Fixing the tile aspect instead of the row height keeps it the same shape at every width — the row-height version letterboxed to 2.4:1 once the column went full-width, which is exactly the crop that decapitates people. */ .mission-visual .mosaic { margin-bottom: 1.25rem; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; } .mission-visual .mosaic-tile, .mission-visual .mosaic-tile.m-sq, .mission-visual .mosaic-tile.m-hero, .mission-visual .mosaic-tile.m-half, .mission-visual .mosaic-tile.m-third { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; } /* The hero's decorative glow is wider than the phone viewport and was pushing the page 13px sideways. */ .hero { overflow-x: clip; } /* Two program cards do not fit in 375px: each card's min-content width is ~182px against a 335px column, so the grid overflowed rather than shrank. */ @media (max-width: 560px) { .programs-grid { grid-template-columns: 1fr; } } .program-card { min-width: 0; } /* ─── Season information pages ──────────────────────────────── */ .season-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .season-fact { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent-ink); border-radius: var(--radius); padding: 1.1rem 1.2rem; min-width: 0; } .season-fact-label { font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: .35rem; } .season-fact-value { font-size: .98rem; font-weight: 600; color: var(--navy); } .season-fact-note { font-size: .84rem; color: var(--text-muted); margin-top: .3rem; line-height: 1.55; } .season-fact a { color: var(--accent-ink); } /* Who the league is for. This is the part people most need to read, so it gets its own weight rather than sitting inside a paragraph. */ .eligibility { border: 1px solid var(--border); border-left: 3px solid var(--accent-ink); background: rgba(var(--accent-rgb), 0.06); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-top: 1.5rem; } .eligibility-title { font-family: var(--font-display); font-size: .95rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); margin-bottom: .5rem; } .eligibility p { font-size: .92rem; line-height: 1.7; color: var(--text-muted); } .eligibility p + p { margin-top: .7rem; } /* Schedule: one row per week, so a season reads as a list of dates rather than a paragraph somebody has to parse. */ .schedule { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); } .schedule-row { display: grid; grid-template-columns: 132px 1fr auto; gap: 1rem; align-items: baseline; padding: .8rem 1.2rem; border-bottom: 1px solid var(--border); } .schedule-row:last-child { border-bottom: 0; } .schedule-date { font-family: var(--font-display); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-variant-numeric: tabular-nums; } .schedule-name { font-weight: 600; color: var(--navy); font-size: .96rem; } .schedule-tag { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .18rem .55rem; border-radius: 100px; white-space: nowrap; } .schedule-row.is-key { background: rgba(var(--accent-rgb), 0.07); } .schedule-row.is-key .schedule-name { color: var(--accent-ink); } .schedule-row.is-key .schedule-tag { background: var(--accent-ink); color: #fff; } .schedule-row.is-off { background: var(--bg-2); } .schedule-row.is-off .schedule-name, .schedule-row.is-off .schedule-date { color: var(--text-dim); } .schedule-row.is-off .schedule-tag { background: var(--border); color: var(--text-muted); } .time-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; margin-top: 1rem; } .time-block { border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; background: var(--bg-card); text-align: center; } .time-block-label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .25rem; } .time-block-value { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .schedule-row { grid-template-columns: 1fr auto; row-gap: .2rem; } .schedule-date { grid-column: 1 / -1; } } /* Registration button before the link exists. It occupies the same space and weight as the live one so nothing shifts when the real URL is dropped in, but it cannot be clicked or tabbed to. */ .btn-pending { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: .95rem; font-weight: 600; letter-spacing: .03em; padding: .85rem 1.6rem; border-radius: 100px; background: var(--bg-alt); color: var(--text-muted); border: 1.5px dashed var(--border-hover); cursor: not-allowed; user-select: none; } .btn-pending svg { opacity: .7; } /* No dark-strip override here: .cta-strip is --bg-2, a light surface. Painting this button white-on-white made it effectively invisible (1.05:1). */ .register-note { font-size: .82rem; color: var(--text-muted); margin-top: .75rem; } /* ─── Season pricing ────────────────────────────────────────── */ .price-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: 1.6rem; } .price-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1.3rem; text-align: center; min-width: 0; } .price-card.is-best { border-color: var(--accent-ink); box-shadow: var(--shadow-md); } .price-tier { font-family: var(--font-display); font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); } .price-amount { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--navy); line-height: 1.1; margin: .35rem 0 .3rem; font-variant-numeric: tabular-nums; } .price-note { font-size: .84rem; color: var(--text-muted); line-height: 1.55; } .price-flag { display: inline-block; font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: var(--accent-ink); color: #fff; border-radius: 100px; padding: .15rem .5rem; margin-bottom: .5rem; } /* Season pages sit under their league in the Adult Leagues menu. */ .dropdown a.submenu-item { padding-left: 1.9rem; font-size: .92em; opacity: .86; } .dropdown a.submenu-item::before { content: ''; position: absolute; left: 1rem; top: 50%; width: .5rem; height: 1px; background: currentColor; opacity: .45; } .dropdown a.submenu-item { position: relative; } /* Hall of Fame + Membership Terms */ .hof-h, .terms-h { font-family: var(--font-display, inherit); font-size: 1.02rem; letter-spacing: .02em; margin: 1.75rem 0 .6rem; color: var(--brand-blue); } .hof-captains { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .hof-captains li { display: inline-flex; align-items: baseline; gap: .45rem; padding: .4rem .7rem; background: rgba(255,255,255,.04); border-radius: 999px; } .hof-cap-wins { opacity: .7; font-size: .88em; white-space: nowrap; } .hof-table-wrap { overflow-x: auto; } .hof-table { width: 100%; border-collapse: collapse; font-size: .95rem; } .hof-table th, .hof-table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid rgba(255,255,255,.10); } .hof-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; } .hof-team { font-weight: 600; } .hof-note { margin-top: 1rem; font-size: .9rem; opacity: .7; } .terms-body ul { margin: .4rem 0 .9rem; padding-left: 1.15rem; } .terms-body li { margin: .3rem 0; } .terms-body p { margin: .55rem 0; } .terms-meta { opacity: .75; font-size: .92rem; } .terms-ack { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); } /* Tournament pages */ .tourn-index { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; } /* The whole three-line block used to be one link, which is a lot of target for one destination. The card is the LIST ITEM now; only the name is a link. */ .tourn-index li { display: grid; gap: .15rem; padding: .9rem 1.05rem; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); } .tourn-index-name a { color: var(--brand-blue-dd); text-decoration: none; } .tourn-index-name a:hover { color: var(--brand-red); text-decoration: underline; } .tourn-index-when { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-blue-dd, var(--brand-blue)); font-weight: 700; } .tourn-index-name { font-family: var(--font-display, inherit); font-size: 1.12rem; font-weight: 700; } .tourn-index-desc { font-size: .92rem; opacity: .78; } .tourn-editions { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; } .tourn-editions a { display: block; padding: .6rem .8rem; border-radius: 9px; color: inherit; background: rgba(18,23,52,.05); text-decoration: none; } .tourn-editions a:hover { background: rgba(52,176,229,.10); } .tourn-h { font-family: var(--font-display, inherit); font-size: 1rem; letter-spacing: .02em; margin: 1.5rem 0 .5rem; color: var(--brand-blue-dd, var(--brand-blue)); } .tourn-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: .5rem 0 0; } .tourn-facts dt { font-weight: 700; opacity: .7; } .tourn-facts dd { margin: 0; } .tourn-note { font-size: .9rem; opacity: .72; margin-top: .8rem; } .tourn-past { padding: .6rem .8rem; border-radius: 9px; background: rgba(52,176,229,.10); border-left: 3px solid var(--brand-blue); } .tourn-todo { padding: .6rem .8rem; border-radius: 9px; background: rgba(237,34,42,.07); border-left: 3px solid var(--brand-red); font-size: .93rem; } @media (min-width: 720px) { .tourn-index { grid-template-columns: repeat(3, 1fr); } } .tourn-upcoming { padding: .7rem .9rem; border-radius: 9px; background: rgba(237,34,42,.08); border-left: 3px solid var(--brand-red); } /* Edition status badge. The dates alone do not tell someone whether a tournament has already happened, and that is the first thing they need. */ .edition-status { display: inline-block; margin-right: .55rem; padding: .12rem .5rem; border-radius: 100px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: .08em; } .edition-status.is-done { background: #1f8f4e; color: #fff; } .edition-status.is-upcoming { background: var(--brand-red); color: #fff; } /* Several cards in a row are one section, not one section each. At 4rem of padding per section, a page of five cards put 8rem of empty space between every pair of them. */ /* Space every block from the one above it, whatever it is. This was `.reveal + .reveal`, which only matched a reveal directly after another reveal — so a `.card-grid` row (not a reveal) broke the chain on BOTH sides and its neighbours sat flush against it, or overlapped by the negative margin below. */ .card-stack .content-inner > * + * { margin-top: 1.5rem; } /* Third-party embeds (calendar, forms) need to stay inside the page on a phone. */ .embed-frame { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; aspect-ratio: 5 / 3; border-radius: 12px; overflow: hidden; border: 1px solid rgba(18,23,52,.12); background: #fff; } .embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 700px) { .embed-frame { aspect-ratio: 3 / 4; } } /* Season pages are a stack of short blocks. One tinted accent per card gives the eye somewhere to land, and the short ones pair up instead of each taking a full row of its own. */ .card-stack .content-card { border-top: 4px solid var(--brand-blue); } .card-stack .reveal:nth-child(6n+2) .content-card { border-top-color: var(--brand-red); } .card-stack .reveal:nth-child(6n+3) .content-card { border-top-color: #1f8f4e; } .card-stack .reveal:nth-child(6n+4) .content-card { border-top-color: #8b5cf6; } .card-stack .reveal:nth-child(6n+5) .content-card { border-top-color: #f0a020; } .card-stack .reveal:nth-child(6n+6) .content-card { border-top-color: #0ea5a4; } /* Cards in a row are the same height. `align-items: start` collapsed each grid cell to its own content, so the `height: 100%` below had nothing to fill and a three-card row rendered 291 / 267 / 235. Stretch is the grid default; a one-column row is unaffected either way. */ .card-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: stretch; } .card-grid .reveal + .reveal { margin-top: 0; } .card-grid .content-card { height: 100%; } /* A lone card in a two- or three-column grid rendered at a third or half the width with dead space beside it, which reads as a layout bug rather than a deliberate single card. Let it span the row. */ .card-grid > :only-child { grid-column: 1 / -1; } @media (min-width: 800px) { .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } } /* Open gym schedule on the homepage. This is the lowest-commitment way in for a new player, so it carries the actual dates rather than a link away. */ .open-gym-inner.og-wide { max-width: 1180px; } .og-prices { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1.4rem 0 0; } .og-price { padding: .45rem 1rem; border-radius: 100px; font-size: .86rem; font-weight: 700; letter-spacing: .02em; background: rgba(255,255,255,.10); color: #fff; } .og-price-hero { background: var(--brand-red); } .og-months { display: grid; gap: 1rem; margin: 2rem 0 0; text-align: left; } @media (min-width: 900px) { .og-months { grid-template-columns: repeat(3, 1fr); } } .og-month { background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.12); border-top: 3px solid var(--brand-red); border-radius: 12px; padding: 1.1rem 1.2rem; } .og-month h3 { font-family: var(--font-display, inherit); font-size: 1.35rem; margin: 0; color: #fff; } .og-when { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; opacity: .65; margin: .15rem 0 .7rem; color: #fff; } .og-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .9rem; } .og-tag { padding: .28rem .6rem; border-radius: 6px; font-size: .74rem; font-weight: 700; background: rgba(255,255,255,.12); color: #fff; } .og-tag-red { background: var(--brand-red); } .og-tag-blue { background: var(--brand-blue); color: var(--navy); } .og-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .og-dates li { color: #fff; font-size: .93rem; } .og-dates strong { display: inline-block; font-family: var(--font-display, inherit); font-size: 1.02rem; letter-spacing: .01em; } .og-kind { display: block; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-blue); } .og-note { display: block; margin-top: .3rem; padding-left: .6rem; border-left: 2px solid rgba(255,255,255,.25); font-size: .82rem; opacity: .78; } .og-off { opacity: .45; } .og-off .og-kind { color: rgba(255,255,255,.6); } .og-party { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; margin: 1.4rem 0 0; padding: .8rem 1.1rem; border-radius: 10px; background: var(--brand-red); color: #fff; } .og-party-tag { padding: .2rem .55rem; border-radius: 5px; background: rgba(0,0,0,.35); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .og-party strong { font-family: var(--font-display, inherit); font-size: 1.2rem; } .og-venue { margin: 1.2rem 0 1.4rem; font-size: .88rem; opacity: .72; color: #fff; } /* ─── Links in body copy ───────────────────────────────────── Content links carried no colour, weight or underline, so a Discord invite read exactly like the sentence around it and nobody could tell it was clickable. Scoped to unclassed anchors so buttons and nav keep their own styling. */ .content-card-body a:not([class]), .content-inner > p a:not([class]), .tourn-facts a:not([class]) { color: var(--brand-blue-dd); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; transition: color 0.15s ease; } .content-card-body a:not([class]):hover, .content-inner > p a:not([class]):hover, .tourn-facts a:not([class]):hover { color: var(--brand-red); } /* A link that leads somewhere substantial (a whole season's schedule) should look like a destination, not a word in a sentence. */ .link-cta { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border: 1.5px solid var(--brand-blue-d); border-radius: 100px; color: var(--brand-blue-dd); font-weight: 700; font-size: 0.86rem; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .link-cta:hover { background: var(--brand-blue-d); color: #fff; } /* ─── Seasons: current one first, past ones by year ────────── A league that has run since 2023 turns into a single column of ten near-identical rows, where the season happening NOW looks exactly like one from three years ago. The current season gets its own block; the rest group by year across three columns so the list stops growing downward forever. */ .season-now { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 1.1rem 1.3rem; border: 2px solid var(--brand-blue-d); border-radius: 12px; text-decoration: none; transition: background 0.15s ease; } .season-now:hover { background: var(--brand-blue-d); } .season-now:hover .season-now-name, .season-now:hover .season-now-go { color: #fff; } .season-now-tag { padding: 0.22rem 0.6rem; border-radius: 100px; background: var(--brand-red); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .season-now-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--navy); letter-spacing: 0.02em; } .season-now-go { margin-left: auto; font-weight: 700; font-size: 0.88rem; color: var(--brand-blue-dd); } .season-years { display: grid; gap: 1rem; /* Three years across a 1200px card gave 390px columns holding 90px of text, so the years read as unrelated islands. Cap the run instead. */ grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); max-width: 880px; } .season-year { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1.1rem 1rem; } .season-year h3 { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.08em; color: var(--navy); margin: 0 0 0.6rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--brand-blue); } .season-list { list-style: none; margin: 0; padding: 0; } .season-list li + li { border-top: 1px solid var(--border); } .season-list a { display: block; padding: 0.5rem 0; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; } .season-list a:hover { color: var(--brand-red); } /* ─── Body copy inside cards ───────────────────────────────── Paragraphs in a content card had no margin, so every page carried an inline style="margin-top: 1rem" on each one to fake it, and any block that forgot ran its paragraphs together into a wall. Space them here instead. Inline styles still win where a page wants something tighter. */ .content-card-body p + p, .content-card-body p + ul, .content-card-body p + ol, .content-card-body ul + p, .content-card-body ol + p { margin-top: 1rem; } .content-card-body li + li { margin-top: 0.4rem; } .content-card-body ul, .content-card-body ol { padding-left: 1.15rem; } /* ─── One card treatment, everywhere ───────────────────────── The 4px accent bar only existed under .card-stack, so a page built as a grid (FAQ, the DEI statement) looked like a different site from one built as a stack (committees, seasons). Give every content card the bar and rotate the colour so neighbours differ. */ .content-card { border-top: 4px solid var(--brand-blue); } .content-grid-2 > .content-card:nth-child(2n), .content-grid-2 > *:nth-child(2n) > .content-card { border-top-color: var(--brand-red); } .content-grid-3 > .content-card:nth-child(3n+2), .content-grid-3 > *:nth-child(3n+2) > .content-card { border-top-color: var(--brand-red); } .content-grid-3 > .content-card:nth-child(3n), .content-grid-3 > *:nth-child(3n) > .content-card { border-top-color: #1f8f4e; } /* .card-stack spaces stacked .reveal wrappers by 1.5rem. Inside a grid those same wrappers are columns, not a stack, so the second one was pushed 24px down and every row rendered with mismatched card heights. */ .content-grid-2 > .reveal + .reveal, .content-grid-3 > .reveal + .reveal { margin-top: 0; } /* ─── Sponsor logo tiles ───────────────────────────────────── A white plate per logo, because most sponsor marks are drawn for one. Fowling is the exception. The only asset we have is white ink with a red MINNEAPOLIS (pulled from their site; there are no official files), so it needs a dark plate. Navy was not dark enough and the mark is low resolution to begin with, so it also gets more room: the partnership collateral sets it on #0e0e10 at a decent size, and that is the treatment that reads. */ .sponsor-logo { display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; padding: 1.1rem; margin-bottom: 1.1rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; } .sponsor-logo.is-dark { background: #0e0e10; border-color: #0e0e10; padding: 0.85rem 1rem; } .sponsor-logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; } /* ─── Season navigation ───────────────────────────────────────── A season page used to be a dead end: you could reach Spring 2025 from the league page but not Spring 2025 from Summer 2025. tools/set_seasons.py writes this strip into every one of them from a single spec. */ .season-nav { background: var(--bg-alt); } .season-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; } .season-chip { display: inline-block; padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--navy); font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } a.season-chip:hover { border-color: var(--brand-blue); color: var(--brand-blue-dd); background: #E8F8FE; } /* The season you are already on is not a link, so it must not look like one. */ .season-chip.is-here { background: var(--navy); border-color: var(--navy); color: #fff; cursor: default; } .season-nav-more { margin-top: 1.25rem; } .season-nav-more a { color: var(--brand-blue-dd); font-weight: 600; text-decoration: none; } .season-nav-more a:hover { text-decoration: underline; } /* A league that is not running this season. The card-stack accent colours cycle by position and mean nothing in particular; a paused league should read as a status at a glance, so it gets amber and stays amber. */ .content-card.is-hiatus { border-top-color: #f0a020 !important; background: #FFFBF3; } .content-card.is-hiatus .content-card-title { color: #8a5a00; } /* ─── Athlete portraits ───────────────────────────────────────── Two players the tournament is raising money for. Names and squads sit under the faces because "$5 of every registration" means more when you can see who it is going to. */ .athletes { display: flex; flex-wrap: wrap; gap: 1.75rem; margin: 0 0 1.25rem; } .athlete { margin: 0; display: flex; align-items: center; gap: 0.9rem; } .athlete img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid var(--brand-blue); } .athlete figcaption { display: flex; flex-direction: column; line-height: 1.35; } .athlete figcaption strong { color: var(--navy); font-size: 1.02rem; } .athlete figcaption span { color: var(--text-muted); font-size: 0.92rem; }