:root{ color-scheme:light; --navy:#1B2A6B; --navy-dark:#141F52; --red:#D7282F; --red-dark:#B01F26; --paper:#FFFFFF; --wash:#F7F8FB; --ink:#1C2333; --muted:#6B7385; --line:#E4E7EF; } *{margin:0;padding:0;box-sizing:border-box} html{background:#FFFFFF} body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit} h1,h2,h3{font-family:'Oswald',sans-serif;text-transform:uppercase;line-height:1.08} .lbl{font-family:'Oswald';font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase} /* ---------- Top nav ---------- */ nav{position:sticky;top:0;z-index:100;background:var(--navy);border-bottom:3px solid var(--red)} .nav-inner{max-width:1220px;margin:0 auto;display:flex;align-items:center;padding:0 24px;height:66px;gap:4px} .brand{display:flex;align-items:center;margin-right:auto;cursor:pointer;text-decoration:none} .dmark{width:60px;height:60px;display:block} .wordmark{display:flex;flex-direction:column;justify-content:center;margin-left:12px;font-family:'Oswald';font-weight:600;font-size:19px;line-height:1.15;letter-spacing:1.5px;text-transform:uppercase;color:#fff} .nav-link{background:none;border:none;border-bottom:2px solid transparent;font-family:'Oswald';font-weight:600;font-size:15.5px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.92);padding:9px 13px;cursor:pointer;transition:all .15s} .nav-link:hover{color:#fff} .nav-link.active{color:#fff;border-bottom-color:var(--red)} .nav-link .car{font-size:11px;opacity:.7;margin-left:3px} .nav-link.has-caret{padding-right:0} .nav-ticket-btn{font-family:'Oswald';font-weight:600;font-size:15.5px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:transparent;border:2px solid #fff;padding:8px 16px;margin-left:20px;text-decoration:none;display:inline-flex;align-items:center;transition:all .15s} .nav-ticket-btn:hover{background:rgba(255,255,255,.12)} button:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:2px} .hamburger{display:none;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;padding:8px} .nav-links{display:flex;align-items:center;gap:2px} .nav-item{position:relative} .nav-item-row{display:flex;align-items:center} .nav-item-row .nav-link{padding-right:0} .nav-caret{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:11px;padding:9px 5px 9px 0;transition:color .15s} .nav-caret:hover{color:#fff} .nav-dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;border:1.5px solid var(--line);min-width:230px;z-index:60} .nav-dropdown.open{display:block} .nav-dropdown a{display:block;padding:12px 16px;font-family:'Oswald';font-size:12.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--navy);border-bottom:1.5px solid var(--line);text-decoration:none} .nav-dropdown a:last-child{border-bottom:none} .nav-dropdown a:hover{background:var(--wash);color:var(--red)} /* The horizontal nav needs ~1050px to lay out: brand lockup + six items + the tickets button. It used to collapse to the hamburger only under 700px, which left 701-1023px rendering a nav wider than the viewport — every page on the site scrolled sideways at tablet widths. The collapse breakpoint is therefore tied to what the nav actually needs, not to a phone-sized guess. NOTE: this is deliberately NOT the same breakpoint as the bottom tab bar and the install pill below, which stay at 700px because they are phone UI. A tablet gets the hamburger and no tab bar, which is correct. */ @media(max-width:1023px){ .nav-links{display:none;position:absolute;top:66px;left:0;right:0;background:var(--navy);flex-direction:column;align-items:stretch;padding:12px;border-bottom:3px solid var(--red)} .nav-links.open{display:flex} .nav-link{text-align:left;padding:13px 14px} .hamburger{display:block} .nav-item{position:static} .nav-dropdown{position:static;background:transparent;border:none;border-top:1.5px solid rgba(255,255,255,.15);margin:2px 0 6px 14px} .nav-dropdown a{color:rgba(255,255,255,.85);border-bottom:none;padding:11px 14px} .nav-dropdown a:hover{background:rgba(255,255,255,.08);color:#fff} } /* Just above the collapse point the full nav fits, but only barely — at 1024px it lands within a few pixels of the edge, which is close enough that a fallback font rendering wider than Oswald before the webfont loads can tip it back into overflow. Tightening type and padding through this band buys real headroom instead of relying on an exact fit. The band runs to 1219px rather than stopping earlier because 1220px is where .nav-inner hits its max-width and the full-size nav finally has ~62px to spare; handing back below that just recreates a tight fit one breakpoint up. */ @media(min-width:1024px) and (max-width:1219px){ .nav-link{font-size:13.5px;padding:9px 8px} .nav-ticket-btn{font-size:13.5px;padding:8px 12px;margin-left:10px} .dmark{width:46px;height:46px} .wordmark{font-size:16px;margin-left:9px} } /* ---------- Bottom tab bar (mobile) ---------- */ .tabbar{display:none} @media(max-width:700px){ body{padding-bottom:78px} .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--navy);border-top:3px solid var(--red);z-index:120;padding-bottom:env(safe-area-inset-bottom)} .tab{flex:1;background:none;border:none;color:rgba(255,255,255,.8);font-family:'Oswald';font-weight:600;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;padding:9px 4px 11px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative} .tab .ic{font-size:19px;line-height:1} .tab.active{color:#fff} .tab.active::before{content:'';position:absolute;top:-3px;left:20%;right:20%;height:3px;background:#fff} } /* ---------- Pages ---------- */ .page{display:none;animation:fade .3s ease;background:var(--paper)} .page.active{display:block} @keyframes fade{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:reduce){.page{animation:none}*{transition:none!important}} /* .wrap and .section are combined on the same element throughout the site (class="wrap section"). They must stay on longhand padding-left/right vs padding-top/bottom, never the `padding` shorthand — two shorthand rules of equal specificity on one element fully overwrite each other on all four sides, not just the sides each rule cares about, so whichever was declared later in the stylesheet silently zeroed out the other's spacing. That bug was invisible on desktop, where .wrap's max-width + margin:auto centering fakes horizontal whitespace even with zero padding, but on mobile nothing masks it: every wrap+section block lost its vertical gap entirely. */ .wrap{max-width:1220px;margin:0 auto;padding-left:24px;padding-right:24px} .section{padding-top:56px;padding-bottom:56px} @media(max-width:700px){.section{padding-top:48px;padding-bottom:48px}.wrap{padding-left:16px;padding-right:16px}} /* ---------- Buttons & chips ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Oswald';font-weight:600;font-size:13px;letter-spacing:2px;text-transform:uppercase;padding:14px 24px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:all .15s;min-height:48px} .btn-red{background:var(--red);color:#fff} .btn-red:hover{background:var(--red-dark)} .btn-outline{background:#fff;color:var(--navy);border-color:var(--line)} .btn-outline:hover{border-color:var(--navy)} .btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{background:var(--navy-dark)} .chip{font-family:'Oswald';font-weight:600;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;padding:10px 16px;border:1.5px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;transition:all .12s;min-height:42px} .chip:hover{background:var(--wash)} .chip.on{background:var(--red);border-color:var(--red);color:#fff} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;background:#fff} .hero-grid{position:relative;display:grid;grid-template-columns:minmax(min-content,7fr) minmax(0,9fr);gap:56px;align-items:stretch;padding-top:72px;padding-bottom:56px} .hero-text{display:flex;flex-direction:column;justify-content:center} .hero .eyebrow{margin-bottom:20px} .eyebrow{display:flex;align-items:center;gap:12px;color:var(--red);margin-bottom:14px} .eyebrow::before{content:'';width:34px;height:2.5px;background:var(--red)} #page-home .eyebrow{font-size:16.5px} /* Bleacher Bingo easter egg: the decorative dash before "Game Night at Walton" on this one eyebrow becomes a real, invisible link. A ::before pseudo-element can't be clicked, so its content is suppressed here and replaced with a real anchor sized/colored to be pixel-identical to the dash it replaces — no visual change, but it's now a functioning link. aria-hidden+tabindex=-1 keep it out of the accessibility tree and tab order entirely (fully invisible to assistive tech), while still being clickable/tappable for a sighted mouse or touch user who happens to hit it. Deliberately scoped to just this one eyebrow, not every eyebrow on the site. */ .gn-eyebrow::before{content:none} .gn-dash{display:inline-block;position:relative;width:34px;height:2.5px;background:var(--red);flex:none} /* The visible dash stays pixel-identical (34x2.5), but that's far too thin a target for a finger on a touchscreen — a mouse can land a precise click on a 2.5px line, a tap can't. This invisible ::after expands the actual tappable area to roughly 48x44px, centered on the same spot, without changing anything anyone can see. */ .gn-dash::after{content:'';position:absolute;top:-21px;bottom:-21px;left:-12px;right:-12px} /* The Aux Gym's Sponsor Match door: the en dash inside the home page's "2025-26 Sponsors" heading is a real link. Same principle as the .gn-dash above (a visible element nobody would guess is clickable, kept out of the accessibility tree and the tab order), but the target here is a real text character rather than a decorative pseudo-element, so nothing is suppressed and nothing is redrawn: color:inherit and text-decoration:none leave the glyph pixel-identical to the digits either side of it, at every width. position:relative on an inline element changes no layout; it only gives the ::after below something to be positioned against. */ .sm-dash{color:inherit;text-decoration:none;position:relative;cursor:inherit} /* cursor:inherit is the whole reason this stays hidden on a desktop. The glyph itself is pixel-identical, but a browser's default pointer cursor over a link announces it the moment anyone sweeps a mouse across the heading, which is exactly what "visibly invisible" is not. Inheriting the heading's own cursor means a hover reveals nothing. (One tell is left and cannot be removed from CSS: the status bar previews the URL on hover. It needs a deliberate hover in the right spot to appear, which is already most of the way to finding the door on purpose.) */ /* An en dash is a couple of pixels tall and about a dozen wide: fine for a mouse, far too small for a thumb. This invisible ::after expands the tappable area without changing anything anyone can see. Vertically it is generous (the anchor's inline box is already the full font size, plus 8px each way, which clears 44px on a phone). Horizontally it is deliberately only 6px each side: the characters beside it are the "5" and the "2" of the season label, and a wider target would start sending taps on the heading itself into a game. */ .sm-dash::after{content:'';position:absolute;top:-8px;bottom:-8px;left:-6px;right:-6px} /* min-width:0 lets the link shrink as a flex item instead of being pinned to its content's natural width; overflow-wrap:anywhere is the actual fix — an unbroken string like an @handle has no space to wrap on, so without this a narrow viewport just lets it overflow past the edge instead of wrapping. */ .eyebrow a{color:inherit;text-decoration:none;min-width:0;overflow-wrap:anywhere} .eyebrow a:hover{text-decoration:underline;text-underline-offset:3px} .hero h1{font-size:clamp(42px,5.6vw,68px);font-weight:700;letter-spacing:-.5px;line-height:.94;color:var(--navy)} .hero h1 .red{color:var(--red)} .hero p{margin:14px 0 40px;color:var(--muted);font-family:'Oswald';font-weight:500;font-size:17px;letter-spacing:1.6px;text-transform:uppercase;max-width:440px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap} .hero-actions .btn{font-size:17px;padding:16px 28px} .hero-actions .btn-outline{border:2px solid var(--navy);padding:14.5px 28px} .hero-photo{background:var(--wash);aspect-ratio:16/10;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line);padding:14px} .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} .hero-photo .bg-img{object-fit:cover;object-position:center 70%} .hero-photo .ph{font-family:'Oswald';font-weight:600;font-size:clamp(22px,2.6vw,32px);letter-spacing:2px;text-transform:uppercase;color:var(--navy);text-align:center;opacity:.85} .hero-credit{position:absolute;right:6px;bottom:6px;z-index:2;background:rgba(27,42,107,.45);color:rgba(255,255,255,.85);font-family:'Oswald';font-weight:500;font-size:9.5px;letter-spacing:.3px;padding:3px 7px;text-decoration:none;text-transform:none} .hero-credit:hover{background:rgba(27,42,107,.82);color:#fff;text-decoration:underline} @media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:40px;padding-top:44px;padding-bottom:56px}.hero-photo{aspect-ratio:16/10}} @media(max-width:700px){.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}} /* ---------- Status banner ---------- */ .status-banner{background:var(--red);color:#fff} /* Announcement is the calmer, non-urgent tone (see loadStatusBanner() in app.js) — same layout, navy instead of red, so routine news like "tryout info is up" doesn't read as an emergency the way the Alert/weather tone deliberately does. */ /* An Announcement is deliberately NOT a full-bleed bar. It used to be, in this same navy, sitting directly under a navy nav whose only separator was the 3px red rule, so it read as part of the header rather than as a message (chair, 2026-09-07). Containing it and giving it air above turns it into an object on the page. The navy + 4px red left accent is not a new invention: it is exactly the .coming-soon-banner treatment already used on the Jr Raiders page. The red Alert stays full bleed on purpose. Shape is doing real work here: urgent spans the whole viewport, informational sits inside the page, so the two are told apart before the label is read. Don't "unify" these. */ .status-banner.info{background:transparent;padding:22px 24px 0} .status-banner.info .status-banner-inner{background:var(--navy);border-left:4px solid var(--red);padding:15px 20px} .status-banner.info .lbl{color:var(--navy)} .status-banner-inner{max-width:1220px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .status-banner .lbl{color:var(--red);background:#fff;padding:6px 12px;flex-shrink:0} .status-banner .msg{font-size:14.5px;font-weight:600;line-height:1.4;flex:1;min-width:220px} .status-banner .msg a{color:#fff;text-decoration:underline} .status-banner .updated{font-family:'Oswald';font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.8);white-space:nowrap} @media(max-width:760px){.status-banner-inner{gap:8px;padding:14px 16px} .status-banner.info{padding:14px 16px 0} .status-banner.info .status-banner-inner{padding:13px 16px}} /* ---------- Install app banner ---------- */ /* Small floating pill, mobile only — must not push page content or compete for attention like a top banner does; sits above the bottom tab bar. */ .install-banner{display:none;position:fixed;right:14px;bottom:calc(64px + env(safe-area-inset-bottom) + 12px);z-index:110;max-width:240px;background:var(--navy);border:1.5px solid rgba(255,255,255,.2)} .install-banner.show{display:block} .install-banner-inner{display:flex;align-items:flex-start;gap:8px;padding:12px 12px 12px 14px} .install-banner .ib-text{flex:1;font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.85)} .install-banner .ib-text b{display:block;font-family:'Oswald';font-weight:700;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:#fff;margin-bottom:3px} .install-banner .ib-btn{display:block;margin-top:8px;font-family:'Oswald';font-weight:600;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--navy);background:#fff;border:none;padding:7px 12px;cursor:pointer;white-space:nowrap} .install-banner .ib-btn:hover{background:var(--wash)} .install-banner .ib-close{background:none;border:none;color:rgba(255,255,255,.5);font-size:16px;cursor:pointer;padding:0 2px;line-height:1;flex-shrink:0} .install-banner .ib-close:hover{color:#fff} @media(min-width:701px){.install-banner{display:none!important}} /* ---------- Instagram follow prompt ---------- */ .ig-follow{display:flex;gap:12px;align-items:center;margin-top:6px;flex-wrap:wrap} @media(max-width:700px){.ig-follow .btn{width:100%}} /* ---------- Audience cards ---------- */ .cards4{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--line)} .acard{display:flex;flex-direction:column;padding:28px 26px;border-right:1.5px solid var(--line);cursor:pointer;transition:background .15s;background:#fff} .acard:last-child{border-right:none} .acard:hover{background:var(--wash)} .acard .who{color:var(--muted);font-size:11.5px;letter-spacing:2px;font-weight:600;margin-bottom:8px} .acard h3{font-size:38.4px;font-weight:700;letter-spacing:-.3px;line-height:1.08;color:var(--navy);margin:0 0 10px} .acard p{font-size:14.5px;color:var(--muted);line-height:1.5} .acard .go{font-family:'Oswald';font-size:16px;font-weight:700;letter-spacing:1.5px;color:var(--red);margin-top:auto;padding-top:16px;display:inline-block} @media(max-width:900px){.cards4{grid-template-columns:1fr 1fr}.acard:nth-child(2){border-right:none}.acard:nth-child(-n+2){border-bottom:1.5px solid var(--line)}} @media(max-width:540px){.cards4{grid-template-columns:1fr}.acard{border-right:none;border-bottom:1.5px solid var(--line);padding:22px 20px}.acard:last-child{border-bottom:none}} /* ---------- Sponsor showcase ---------- */ .sponsor-tier-group{margin-top:32px} .sponsor-tier-group:first-child{margin-top:8px} .sponsor-tier-label{font-family:'Oswald';font-weight:700;font-size:21px;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);padding-bottom:12px;border-bottom:1.5px solid var(--line);margin-bottom:20px} .sponsor-tier-platinum .sponsor-tier-label,.sponsor-tier-silver .sponsor-tier-label{color:#fff;background:var(--navy);border-bottom:none;padding:14px 20px;margin-bottom:20px} .sponsor-tier-silver .sponsor-tier-label{background:var(--red)} .sponsor-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} @media(max-width:900px){.sponsor-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:700px){.sponsor-grid{grid-template-columns:1fr 1fr;gap:10px}} .sponsor-tile{height:130px;perspective:1000px} .sponsor-tier-platinum .sponsor-tile{height:150px} .sponsor-flip-inner{position:relative;width:100%;height:100%;transition:transform .4s;transform-style:preserve-3d;border:1.5px solid var(--line);background:#fff} .sponsor-tile.flippable{cursor:pointer} @media(hover:hover){ .sponsor-tile.flippable:hover .sponsor-flip-inner{transform:rotateY(180deg)} .sponsor-tile.flippable:hover .sponsor-face.back{opacity:1;pointer-events:auto} } .sponsor-tile.flippable.flipped .sponsor-flip-inner{transform:rotateY(180deg)} .sponsor-tile.flippable.flipped .sponsor-face.back{opacity:1;pointer-events:auto} .sponsor-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;padding:16px} /* opacity:0 here is a second, independent way of hiding the back face, redundant with backface-visibility:hidden above for any renderer that honors it correctly. It's not redundant everywhere: Safari's print engine ignores backface-visibility inside a preserve-3d context (see the print block below) and paints the mirrored back face on top of the front — and the same failure showed up outside of print too, in a full 8000px-tall capture from Safari's "capture entire page" screenshot feature, which apparently shares that print engine's flattening behavior. Gating on opacity as well means the back face stays genuinely invisible by default in either case, not just rotated-and-hidden. */ .sponsor-face.back{transform:rotateY(180deg);background:var(--navy);opacity:0;pointer-events:none} .sponsor-face img{max-width:100%;max-height:100%;object-fit:contain} .sponsor-face .name-fallback{font-family:'Oswald';font-weight:700;color:var(--navy);text-align:center;font-size:14px;letter-spacing:.5px;text-transform:uppercase;line-height:1.3} .sponsor-back-links{display:flex;gap:18px;align-items:center;justify-content:center;width:100%} .sponsor-back-links a{color:#fff;font-family:'Oswald';font-weight:600;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px} .tile-tap-hint{display:none} /* Desktop hover already reveals the back face when the cursor lands on a tile — that's affordance enough. Touch devices have no hover, so the flip is invisible until tapped once by accident; this badge only renders where hover doesn't exist, so it never shows on desktop. */ @media(hover:none){ .sponsor-tile.flippable .tile-tap-hint{ display:block;position:absolute;bottom:8px;right:8px; font-family:'Oswald';font-weight:600;font-size:9px;letter-spacing:1.5px;text-transform:uppercase; color:var(--muted);background:var(--wash);border:1px solid var(--line); padding:2px 7px;pointer-events:none; } .sponsor-tile.flippable.flipped .tile-tap-hint{display:none} } @media(prefers-reduced-motion:reduce){ .sponsor-face{backface-visibility:visible} .sponsor-face.back{transform:none;opacity:0;pointer-events:none} .sponsor-tile.flippable.flipped .sponsor-flip-inner{transform:none} .sponsor-tile.flippable.flipped .sponsor-face.front{opacity:0} .sponsor-tile.flippable.flipped .sponsor-face.back{opacity:1;pointer-events:auto} } @media(prefers-reduced-motion:reduce) and (hover:hover){ .sponsor-tile.flippable:hover .sponsor-flip-inner{transform:none} .sponsor-tile.flippable:hover .sponsor-face.front{opacity:0} .sponsor-tile.flippable:hover .sponsor-face.back{opacity:1;pointer-events:auto} } /* ---------- Featured Sponsor spotlight ---------- One sponsor told editorially above the logo grid. Red top rule marks it as the section's lead without borrowing the navy the tier labels use. */ .spotlight{border:1.5px solid var(--line);border-top:3px solid var(--red);background:#fff;margin-bottom:36px} .spot-inner{display:grid;grid-template-columns:280px 1fr} .spot-logo{display:flex;align-items:center;justify-content:center;padding:30px;border-right:1.5px solid var(--line);background:var(--wash)} .spot-logo img{max-width:100%;max-height:120px;object-fit:contain} .spot-text{padding:30px 34px} .spot-label{font-family:'Oswald';font-weight:600;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--red);margin-bottom:8px} .spot-text h3{font-family:'Oswald';font-weight:700;font-size:24px;letter-spacing:1px;text-transform:uppercase;color:var(--navy);margin:0 0 10px} .spot-note{font-size:15px;color:var(--ink);line-height:1.65;margin:0 0 14px;max-width:560px} .spot-link{display:inline-block;font-family:'Oswald';font-weight:600;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--red);text-decoration:none;border-bottom:1.5px solid var(--red);padding-bottom:2px} .spot-link:hover{color:var(--navy);border-color:var(--navy)} @media(max-width:700px){.spot-inner{grid-template-columns:1fr}.spot-logo{border-right:none;border-bottom:1.5px solid var(--line);padding:24px}.spot-text{padding:22px 20px}.spot-text h3{font-size:20px}.spot-note{font-size:14.5px}} /* Sponsors who gave neither a logo nor a blurb (the family sponsors) still take their turn, since the spotlight is listed as a tier benefit. Without either, the two-column card would be a name stranded next to an empty logo well, so it collapses to a centered dedication: the name IS the content, and reads as a thank-you rather than a half-filled ad. */ /* No logo, but a real write-up (a sponsor who never sent artwork, or one whose file failed to load). .spot-inner is a two-column grid, so without this the lone text block lands in the 280px column meant for the logo and the write-up renders as a narrow ribbon beside a wide empty gap. Collapse to one column, but keep the text left-aligned: .spot-plain's centering is for a name-only dedication, and centering a paragraph is worse to read. */ .spot-nologo .spot-inner{grid-template-columns:1fr} .spot-plain .spot-inner{grid-template-columns:1fr} .spot-plain .spot-text{padding:34px 30px;text-align:center} .spot-plain .spot-text h3{margin-bottom:0} .sponsor-invite{display:block;text-align:center;padding:34px 28px;margin-top:36px;border:1.5px solid var(--line);background:#fff;font-family:'Oswald';font-weight:600;font-size:17px;letter-spacing:.3px;color:var(--navy);text-decoration:none;transition:background .15s} .sponsor-invite:hover{background:var(--wash)} .sponsor-invite .accent{color:var(--red);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px} @media(max-width:700px){.sponsor-invite{padding:24px 18px;font-size:15px}} #sponsorShowcase,#fridge-schedule{scroll-margin-top:var(--nav-h,64px)} /* ---------- Instagram feed placeholder (future Behold embed) ---------- */ .ig-feed-placeholder{border:1.5px solid var(--line);background:var(--wash);padding:24px;margin-top:24px} .ig-feed-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px} .ig-tile{aspect-ratio:1;background:linear-gradient(150deg,#1B2A6B,#141F52)} .ig-feed-label{text-align:center;font-family:'Oswald';font-weight:600;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)} @media(max-width:700px){.ig-feed-grid{grid-template-columns:repeat(3,1fr)}} /* ---------- Section headers ---------- */ .sec-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap} h2{font-size:clamp(26px,3.6vw,40px);font-weight:700;letter-spacing:1px;color:var(--navy)} .sec-sub{color:var(--muted);font-size:15px;max-width:560px;margin-top:8px} /* ---------- Sponsorship page hero (same side-by-side treatment as the home hero) ---------- */ .sponsor-hero-grid{display:grid;grid-template-columns:minmax(min-content,6fr) minmax(0,6fr);gap:40px;align-items:center;margin-bottom:44px} .sponsor-hero{position:relative;overflow:hidden;border:1.5px solid var(--line);aspect-ratio:16/10} .sponsor-hero .bg-img{object-fit:cover;object-position:center 58%} .sponsor-hero-caption{position:absolute;right:6px;bottom:6px;z-index:2;background:rgba(27,42,107,.45);color:rgba(255,255,255,.85);font-family:'Oswald';font-weight:500;font-size:9.5px;letter-spacing:.3px;padding:3px 7px} @media(max-width:860px){.sponsor-hero-grid{grid-template-columns:1fr;gap:24px}} /* ---------- Stats band ---------- */ .band{background:var(--wash);border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)} .stats{display:grid;grid-template-columns:repeat(4,1fr)} .stat{padding:36px 26px;border-right:1.5px solid var(--line);text-align:center} .stat:last-child{border-right:none} .stat b{font-family:'Oswald';font-weight:700;font-size:42px;color:var(--red);display:block;line-height:1} .stat span{color:var(--navy);margin-top:10px;display:inline-block} @media(max-width:760px){.stats{grid-template-columns:1fr 1fr}.stat{padding:26px 18px}.stat b{font-size:34px}.stat:nth-child(2){border-right:none}.stat:nth-child(-n+2){border-bottom:1.5px solid var(--line)}} /* ---------- Filters ---------- */ .filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} .filter-bar .lbl{color:var(--muted);margin-right:4px;min-width:70px} @media(max-width:700px){ .filter-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px} .filter-bar::-webkit-scrollbar{display:none} .filter-bar .lbl{min-width:auto;flex:none} .chip{flex:none;white-space:nowrap} } /* ---------- Schedule: view toggle ---------- */ .seg{display:inline-flex;border:1.5px solid var(--navy)} .seg button{font-family:'Oswald';font-weight:600;font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:11px 22px;background:#fff;color:var(--navy);border:none;cursor:pointer;min-height:44px} .seg button.on{background:var(--navy);color:#fff} .seg button:not(:last-child){border-right:1.5px solid var(--navy)} @media(max-width:700px){.seg{width:100%}.seg button{flex:1}} /* ---------- Schedule: game day cards ---------- */ #page-schedule{background:var(--wash)} .gday{border:1.5px solid var(--line);margin-bottom:28px;background:#fff} .gday.next{border:2px solid var(--red)} .gday-head{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:2px solid var(--navy);background:var(--wash);flex-wrap:wrap} .gday.next .gday-head{background:var(--red);border-bottom-color:var(--red-dark);color:#fff} .gday-date{font-family:'Oswald';font-weight:700;font-size:18px;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy)} .gday.next .gday-date{color:#fff} .gday-venue{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px} .gday.next .gday-venue{color:#fff} .gday-venue a{color:inherit;text-decoration:underline;text-underline-offset:2px} .region-flag{font-family:'Oswald';font-weight:600;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;background:var(--red);color:#fff;padding:4px 10px} .next-flag{font-family:'Oswald';font-weight:600;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;background:#fff;color:var(--red);padding:4px 10px} /* On the day itself the flag flips to "Game Day" (see isGameDayToday) — same chip, navy so it reads as a different state at a glance. */ .next-flag.today{background:var(--navy);color:#fff} /* "Last Night" strip above the home Next Up card. Rendered only within six days of a recorded varsity result (renderHomeLatest), so most of the year this element is empty and the section is unchanged. */ .home-latest{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;background:#fff;border:1.5px solid var(--line);border-left:4px solid var(--red);padding:16px 22px;margin-bottom:18px} .hl-when{font-family:'Oswald';font-weight:600;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--red)} .hl-item{display:inline-flex;align-items:center;gap:9px} .hl-item .g-score{font-size:17px} .hl-opp{font-size:13.5px;color:var(--muted)} .hl-link{margin-left:auto;font-family:'Oswald';font-weight:600;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--navy);text-decoration:none;border-bottom:1.5px solid var(--line);padding-bottom:2px} .hl-link:hover{color:var(--red);border-color:var(--red)} @media(max-width:700px){.home-latest{gap:10px 16px;padding:14px 16px}.hl-link{margin-left:0}} .event-flag{font-family:'Oswald';font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;background:var(--navy);color:#fff;padding:5px 11px} .gday.next .event-flag{background:#fff;color:var(--red)} /* The region badge is red-on-red inside the featured card's red header, which erases its badge shape — outline it instead of filling it, and keep it visually distinct from the solid-white .event-flag sitting beside it. */ .gday.next .region-flag{background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff;padding:2.5px 8.5px} .gday-count{flex-basis:100%;font-family:'Oswald';font-weight:700;font-size:22px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);padding:10px 16px;display:flex;align-items:center;gap:8px;margin:2px 0} .gday-actions{margin-left:auto;display:flex;gap:8px} .gday.next .gday-actions{margin-left:0} .mini-btn{font-family:'Oswald';font-weight:600;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;padding:9px 14px;border:1.5px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:40px} .mini-btn:hover{border-color:var(--red);color:var(--red)} .mini-btn.solid{background:var(--navy);border-color:var(--navy);color:#fff} .mini-btn.solid:hover{background:var(--navy-dark)} .gday.next .mini-btn{border-color:rgba(255,255,255,.5);background:transparent;color:#fff} .gday.next .mini-btn:hover{background:#fff;color:var(--red)} @media(max-width:700px){ .gday-head{padding:14px 16px;gap:10px} .gday-count{font-size:18px;padding:8px 14px} .gday-actions{margin-left:0;width:100%;flex-wrap:wrap} .gday-actions .mini-btn{flex:1 1 auto;min-width:130px} } .gline{display:grid;grid-template-columns:150px 90px 1fr auto;gap:16px;align-items:center;padding:14px 22px;border-bottom:1.5px solid var(--line)} .gline:last-child{border-bottom:none} .tbadge{font-family:'Oswald';font-weight:600;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;padding:4px 10px;display:inline-block;text-align:center} .tb-vb{background:var(--navy);color:#fff} .tb-vg{background:var(--red);color:#fff} .tb-jb,.tb-fb{background:#fff;color:var(--navy);border:1.5px solid var(--navy)} .tb-jg{background:#fff;color:var(--red);border:1.5px solid var(--red)} .gline .time{font-family:'Oswald';font-weight:700;font-size:15px;letter-spacing:1px;color:var(--ink)} .gline .opp{font-size:14px;color:var(--muted)} .gline .opp b{font-family:'Oswald';font-weight:600;font-size:15px;letter-spacing:1px;text-transform:uppercase;color:var(--ink)} .gline .right,.grow-right{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;text-align:right} /* Per-team game day wallpaper, rendered inside its own team's row rather than as a full button in the card header (see teamWallpaperHTML in app.js). Deliberately lighter than .mini-btn: it shares a row with the game's time and status, so a full-height button would make the varsity rows visibly taller than the JV rows beside them. The right-hand cell is a wrapping flex, so on a narrow phone the chip drops under the status instead of squeezing the time column. */ .wp-chip{display:inline-flex;align-items:center;gap:6px;font-family:'Oswald';font-weight:600;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--navy);border:1.5px solid var(--line);background:#fff;padding:6px 10px;text-decoration:none;white-space:nowrap;transition:border-color .15s,color .15s} .wp-chip:hover{border-color:var(--red);color:var(--red)} .wp-btn{gap:7px} .wp-chip svg,.wp-btn svg{flex:none} /* Per-team wallpaper chip gets its own grid column, but only on a day that actually has one (.has-wp), so the ~95% of cards without wallpapers keep their original 4-column rows untouched. Always emitting the cell on a has-wp card, even when empty, keeps every row's columns aligned: the JV rows leave a gap exactly where the varsity chips sit. */ .gday.has-wp .gline{grid-template-columns:150px 90px 1fr auto auto} .gacc.has-wp .grow{grid-template-columns:110px 148px 1fr auto auto} .gline-wp,.grow-wp{justify-self:end} @media(max-width:700px){ /* On a phone the chip is far wider than the status text it would sit beside, and letting it share that column squeezed the team badge and tip-off time onto two lines each. Give it its own row instead, and drop empty ones entirely so rows without a wallpaper gain no height. */ .gline-wp,.grow-wp{grid-column:1/-1;grid-row:3;justify-self:start;margin-top:2px} .gline-wp:empty,.grow-wp:empty{display:none} } @media(max-width:700px){.wp-chip{font-size:10.5px;padding:9px 12px}} .g-status{font-family:'Oswald';font-weight:600;font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted)} .g-score{font-family:'Oswald';font-weight:700;font-size:18px;letter-spacing:1px} /* Win green, loss dark slate. Losses used to be var(--red), which read as emphasis rather than a result: red is the brand accent (active nav, the featured card, every CTA), so a red score looked highlighted, not lost. Deliberately NOT var(--muted) either, which is the token for secondary supporting text and would sink the score to the weight of the "Final" label beside it. A score is primary content. */ .g-score.w{color:#1E7A38}.g-score.l{color:#4A5263} /* Desktop hides the stacked opponent line. This MUST stay above the mobile override below: both selectors are (0,2,0) and a media query adds no specificity, so when this rule sat after the query it won at every width and the opponent never appeared on a phone. */ .gline .opp-mobile{display:none} @media(max-width:700px){ .gline{grid-template-columns:auto 1fr auto;gap:12px;padding:13px 16px} .gline .time{font-size:16px} .gline .opp{display:none} .gline .opp-mobile{display:block;grid-column:1/-1;grid-row:2;font-size:13px;color:var(--muted);margin-top:-6px} .gline .opp-mobile b{font-family:'Oswald';letter-spacing:1px;text-transform:uppercase;color:var(--ink)} } /* ---------- Collapsible game-day rows (schedule list) ---------- Flat treatment per the design system: hairline rules, squared corners, no shadows. Hierarchy comes from type scale + a team-colored left rule. */ .gacc{border-bottom:1.5px solid var(--line);background:#fff} .gacc:first-of-type{border-top:1.5px solid var(--line)} .gacc-head{width:100%;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap; padding:22px 24px;border:none;cursor:pointer;text-align:left; font:inherit;color:inherit;transition:background .15s; /* Pins under the sticky nav while you scroll an expanded day, so the date you are looking at is always on screen. A collapsed .gacc is barely taller than its own header, so sticky has no range there and those scroll away normally — no stack of pinned bars, without needing a JS toggle. Must be opaque and above .grow rows since it now overlaps its own body. z-index stays under the nav's 100. */ position:sticky;top:var(--nav-h,66px);z-index:5;background:#fff} .gacc-head:hover{background:var(--wash)} .gacc.open .gacc-head{background:var(--wash);border-bottom:1.5px solid var(--line)} .gacc-date{font-family:'Oswald';font-weight:700;font-size:23px;letter-spacing:.5px; text-transform:uppercase;color:var(--navy);line-height:1.1} .gacc-opp{font-family:'Oswald';font-weight:500;font-size:16px;letter-spacing:.8px;color:var(--ink)} .gacc-count{font-family:'Oswald';font-weight:600;font-size:11px;letter-spacing:2px; text-transform:uppercase;color:var(--muted)} .gacc-res{display:inline-flex;gap:14px;flex-wrap:wrap} .gacc-res-item{font-family:'Oswald';font-weight:600;font-size:11px;letter-spacing:2px; text-transform:uppercase;color:var(--muted)} .gacc-res-item b{font-weight:700;font-size:14px;letter-spacing:.5px} .gacc-res-item b.w{color:#1E7A38} .gacc-res-item b.l{color:#4A5263} .gacc-venue{font-size:12.5px;color:var(--muted);margin-left:auto;white-space:nowrap} .gacc-chev{width:11px;height:11px;flex-shrink:0;align-self:center; border-right:2px solid var(--navy);border-bottom:2px solid var(--navy); transform:rotate(45deg) translate(-2px,-2px);transition:transform .28s ease} .gacc.open .gacc-chev{transform:rotate(-135deg) translate(-2px,-2px)} /* grid-rows 0fr -> 1fr animates height without hardcoding a max-height that would clip a game day with an unusual number of games. */ .gacc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease} .gacc.open .gacc-body{grid-template-rows:1fr} .gacc-body>div{overflow:hidden} .grow{display:grid;grid-template-columns:110px 148px 1fr auto;gap:18px;align-items:center; padding:14px 24px 14px 21px;border-top:1.5px solid var(--line);border-left:3px solid var(--line)} /* "Freshman Boys" is the longest label — let it size the column rather than wrapping to two lines and making that one row taller than its neighbours. */ .grow .tbadge{white-space:nowrap;justify-self:start} .grow[data-team=vb]{border-left-color:var(--navy)} .grow[data-team=vg]{border-left-color:var(--red)} .grow[data-team=jvb]{border-left-color:rgba(27,42,107,.32)} .grow[data-team=jvg]{border-left-color:rgba(215,40,47,.32)} .grow-time{font-family:'Oswald';font-weight:600;font-size:15px;letter-spacing:.8px;color:var(--muted)} /* Varsity reads first: heavier, inked time + the filled team badge it already gets from .tb-vb/.tb-vg. JV/9th stay full-size and legible — lighter, not smaller. */ .grow.varsity .grow-time{font-weight:700;font-size:18px;color:var(--ink)} .grow-opp{font-size:14px;color:var(--muted)} .grow-opp b{font-family:'Oswald';font-weight:600;font-size:15px;letter-spacing:.8px; text-transform:uppercase;color:var(--ink)} .gacc-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:16px 24px 22px;border-top:1.5px solid var(--line);background:var(--wash)} .gacc-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} @media(max-width:700px){ .gacc-head{padding:18px 16px;gap:8px} .gacc-date{font-size:19px;flex-basis:100%} .gacc-venue{margin-left:0;flex-basis:100%;white-space:normal} .gacc-chev{position:absolute;right:16px;top:22px} .gacc{position:relative} /* Stack: time + badge + status share row 1, opponent spans row 2. Placement is explicit — with auto-flow the full-width .grow-opp lands before .grow-right in DOM order and pushes the status onto a wasted third row. */ .grow{grid-template-columns:auto auto 1fr;gap:5px 10px;padding:13px 16px 13px 13px} .grow-time{grid-column:1;grid-row:1} .grow .tbadge{grid-column:2;grid-row:1} .grow-right{grid-column:3;grid-row:1} .grow-opp{grid-column:1/-1;grid-row:2;font-size:13px} .gacc-foot{padding:14px 16px 18px} .gacc-actions{margin-left:0;width:100%} .gacc-actions .mini-btn{flex:1 1 auto;min-width:130px} } @media(prefers-reduced-motion:reduce){ .gacc-body,.gacc-chev{transition:none} } /* Expand/Collapse all — sits just above the game-day list, right-aligned so it reads as a control for the list rather than another filter. */ .list-tools{display:flex;justify-content:flex-end;gap:8px;margin-bottom:12px} /* subscribe row */ .subscribe{border:1.5px dashed var(--navy);padding:20px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:32px;background:#fff} .subscribe .txt{font-size:14px;color:var(--ink);flex:1;min-width:220px} .subscribe .txt b{font-family:'Oswald';font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--navy)} /* Compact variant for #subscribeRow: one line — label, the two feed buttons, then a muted hint. The old block spent a full paragraph explaining itself and still left the "filter to subscribe per team" path undiscoverable. */ #subscribeRow{padding:12px 16px;gap:10px 14px;margin-bottom:20px} #subscribeRow .sub-lead{font-family:'Oswald';font-weight:600;font-size:12.5px;letter-spacing:1.5px; text-transform:uppercase;color:var(--navy)} #subscribeRow .mini-btn{min-height:36px;padding:7px 14px} #subscribeRow .sub-hint{font-size:12.5px;color:var(--muted);flex:1;min-width:200px} /* Deliberately quiet: one muted, underlined line that most visitors will scroll straight past, since only Google Calendar users need it. Native
so it costs no JS and stays keyboard accessible. */ .sub-gcal{flex:0 0 100%;margin-top:2px} .sub-gcal summary{cursor:pointer;list-style:none;display:inline-block;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);padding:2px 0} .sub-gcal summary::-webkit-details-marker{display:none} .sub-gcal summary:hover{color:var(--navy);text-decoration-color:var(--navy)} .sub-gcal p{margin:9px 0 2px;font-size:12.5px;color:var(--ink);line-height:1.6;max-width:600px;display:flex;flex-wrap:wrap;align-items:center;gap:10px} @media(max-width:700px){ #subscribeRow .sub-lead{flex:0 0 100%} /* Must be the `flex` shorthand, not flex-basis + flex:none — the shorthand resets basis to auto, which left the hint unable to shrink and clipped it. */ #subscribeRow .sub-hint{flex:0 1 100%;min-width:0} } @media(max-width:700px){.subscribe{padding:16px}.subscribe .mini-btn{flex:1}} .results-summary{display:flex;gap:34px;flex-wrap:wrap;border:1.5px solid var(--line);padding:22px 26px;margin-bottom:28px;background:#fff} .results-summary div span{display:block;font-size:11px;font-family:'Oswald';font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted)} .results-summary div b{font-family:'Oswald';font-weight:700;font-size:26px;color:var(--navy)} @media(max-width:700px){.results-summary{gap:20px;padding:16px}.results-summary div b{font-size:22px}} /* ---------- Team header: photo, name/season, coach info ---------- */ .team-hero{position:relative;overflow:hidden;border:1.5px solid var(--line);margin-bottom:0;min-height:340px} .team-hero.varsity{min-height:420px} .team-hero .bg-img{object-fit:cover;object-position:center 22%} @media(min-width:701px){.team-hero.varsity .bg-img{object-position:center 38%}} .team-hero-placeholder{position:relative;border:1.5px solid var(--line);margin-bottom:0;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(150deg,#1B2A6B,#141F52);text-align:center;padding:20px} .team-hero-placeholder.varsity{min-height:120px} .thp-name{font-family:'Oswald';font-weight:700;font-size:16px;letter-spacing:2px;text-transform:uppercase;color:#fff} .thp-note{font-family:'Oswald';font-weight:500;font-size:12px;letter-spacing:.5px;color:rgba(255,255,255,.55)} @media(max-width:700px){.team-hero{min-height:220px}.team-hero.varsity{min-height:280px}} .team-info{border:1.5px solid var(--line);border-top:none;padding:22px 24px;background:#fff} .team-info-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:14px;margin-bottom:14px} .team-info-name{font-family:'Oswald';font-weight:700;font-size:22px;letter-spacing:1px;text-transform:uppercase;color:var(--navy)} .team-info-name.varsity{font-size:26px} .team-info-season{font-family:'Oswald';font-weight:600;font-size:13px;letter-spacing:1.5px;color:var(--muted)} .team-info-actions{margin-left:auto;display:flex;gap:8px} .team-info-actions .mini-btn{width:40px;padding:0} .team-info-actions .mini-btn svg{display:block} .team-info-coaches{display:flex;flex-wrap:wrap;gap:28px} .coach-line{display:flex;flex-direction:column;gap:2px} .ci-label{font-family:'Oswald';font-weight:600;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)} .ci-value{font-size:14px;color:var(--ink)} @media(max-width:560px){.team-info{padding:18px 18px}.team-info-actions{margin-left:0;width:100%}} @media print{.team-info-actions{display:none}} /* ---------- Documentary photo (one deliberate page break, not a gallery) ---------- */ .team-doc-photo{position:relative;overflow:hidden;border:1.5px solid var(--line);aspect-ratio:2.2/1;margin:36px 0} .team-doc-photo .bg-img{object-fit:cover} @media(max-width:700px){.team-doc-photo{aspect-ratio:4/3;margin:28px 0}} /* ---------- Roster ---------- */ .roster-landing{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px} .roster-landing-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--line);background:#fff;padding:48px 24px;cursor:pointer;transition:background .15s,border-color .15s;min-height:160px} .roster-landing-btn:hover{background:var(--wash);border-color:var(--navy)} .roster-landing-btn .rl-label{font-family:'Oswald';font-weight:700;font-size:28px;letter-spacing:2px;text-transform:uppercase;color:var(--navy);text-align:center} .roster-landing-btn .rl-sub{font-family:'Oswald';font-weight:500;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)} .roster-landing-btn.placeholder{cursor:default;border-style:dashed;background:var(--wash)} .roster-landing-btn.placeholder:hover{background:var(--wash);border-color:var(--line)} .roster-landing-btn.placeholder .rl-label{color:var(--muted)} .roster-landing-btn.plaque{background:var(--navy);border:none} .roster-landing-btn.plaque:hover{background:var(--navy);filter:brightness(1.12)} .roster-landing-btn.plaque .plaque-rule{width:34px;height:2.5px;background:var(--red);margin-bottom:4px} .roster-landing-btn.plaque .rl-label{color:#fff} .roster-landing-btn.plaque .rl-sub{color:rgba(255,255,255,.65)} .roster-landing-btn.photo{position:relative;overflow:hidden;min-height:340px;align-items:flex-start;justify-content:flex-end;padding:24px;border:none} .roster-landing-btn.photo .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform .3s} .roster-landing-btn.photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,40,0) 30%,rgba(8,12,32,.94) 100%)} .roster-landing-btn.photo .rl-label,.roster-landing-btn.photo .rl-sub{position:relative;z-index:1;text-align:left} .roster-landing-btn.photo .rl-label{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.55)} .roster-landing-btn.photo .rl-sub{color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.55)} .roster-landing-btn.photo:hover .bg-img{transform:scale(1.04)} .roster-landing-btn.photo.placeholder{cursor:default} .roster-landing-btn.photo.placeholder .bg-img{filter:grayscale(60%) brightness(.8)} .roster-landing-btn.photo.placeholder::after{background:linear-gradient(180deg,rgba(8,12,32,.2) 0%,rgba(8,12,32,.94) 100%)} .roster-landing-btn.photo.placeholder .rl-label{color:rgba(255,255,255,.9)} .roster-landing-btn.photo.placeholder:hover .bg-img{transform:none} @media(prefers-reduced-motion:reduce){.roster-landing-btn.photo .bg-img{transition:none}} @media(max-width:700px){.roster-landing{grid-template-columns:1fr;gap:20px}.roster-landing-btn.photo{min-height:220px}} .roster-subnav{position:sticky;top:69px;z-index:50;background:#fff;border-bottom:1.5px solid var(--line)} .roster-subnav-inner{padding-top:18px;padding-bottom:16px} .roster-subnav-inner .eyebrow{margin-bottom:6px} .roster-subnav-inner h2{font-size:22px;margin-bottom:14px} .roster-subnav-inner .filter-bar{margin-bottom:0} .roster-team-section{margin-bottom:44px} .roster-list{border:1.5px solid var(--line);border-top:none;background:#fff} @media(min-width:700px){.roster-list{display:grid;grid-template-columns:1fr 1fr}.roster-col:first-child{border-right:1.5px solid var(--line)}} .player{position:relative;display:flex;align-items:baseline;gap:14px;padding:15px 22px;border-bottom:1.5px solid var(--line);border-left:3px solid transparent;transition:background .15s,border-left-color .15s;break-inside:avoid-column} .player:last-child{border-bottom:none} .p-num{flex:0 0 26px;font-family:'Oswald';font-weight:700;font-size:18px;color:var(--red);text-align:center} .p-num.tbd{font-size:11px;letter-spacing:1px;color:var(--muted)} .p-name{font-family:'Oswald';font-weight:700;font-size:15px;letter-spacing:.5px;text-transform:uppercase;color:var(--navy)} .p-grade{font-family:'Oswald';font-weight:500;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)} .player.senior .p-grade{color:var(--red);font-weight:600} @media(hover:hover){.player:hover{background:var(--wash);border-left-color:var(--red)}} @media(hover:none){.player:active{background:var(--wash)}} @media(max-width:560px){.player{padding:13px 16px;gap:10px}.p-num{flex-basis:22px}.p-name{font-size:13.5px}} @media print{.player{border-left-color:transparent!important;break-inside:avoid}.roster-list{display:grid;grid-template-columns:1fr 1fr}.roster-col:first-child{border-right:1.5px solid var(--line)}} /* ---------- Coaches ---------- */ .coach-group-photo{position:relative;border:1.5px solid var(--line);min-height:400px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#1B2A6B,#141F52);margin-bottom:36px} /* With a real photo the box becomes a fixed-height crop window, same treatment as the roster pages' .team-hero. */ /* The staff photos are posed, near-square group portraits, not wide documentary frames. Cover-cropping them into a 400px banner cut the coaches off at the waist, so the photo is shown WHOLE in a centered panel instead. Sizing by HEIGHT rather than width is what keeps the two pages consistent: both sources are roughly square, so a shared height yields near-identical widths (649x680 and 706x680) without hardcoding a per-page width. */ .coach-group-photo.has-photo{height:auto;min-height:0;background:var(--wash);padding:22px;overflow:hidden;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto} .coach-group-photo.has-photo .bg-img{position:static;width:auto;max-width:100%;height:340px;object-fit:contain} @media(max-width:700px){.coach-group-photo.has-photo{padding:16px}.coach-group-photo.has-photo .bg-img{height:260px}} .coach-group-photo .ph-label{font-family:'Oswald';font-weight:600;font-size:15px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.45);text-align:center;padding:20px} @media(max-width:700px){.coach-group-photo{min-height:280px}} .coach-team-group{margin-top:40px} .coach-team-group:first-child{margin-top:0} .coach-team-label{font-family:'Oswald';font-weight:700;font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--navy);padding-bottom:10px;border-bottom:1.5px solid var(--line);margin-bottom:16px} .coach-list{border:1.5px solid var(--line);background:#fff} .coach-row{padding:18px 22px;border-bottom:1.5px solid var(--line)} .coach-row:last-child{border-bottom:none} .coach-name{font-family:'Oswald';font-weight:700;font-size:16px;letter-spacing:.5px;text-transform:uppercase;color:var(--navy)} .coach-title{font-family:'Oswald';font-weight:600;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--red);margin-top:4px} .coach-bio{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.6;white-space:pre-line} /* ---------- Jr Raiders ---------- */ /* Court logo as a faint background watermark rather than a placed photo — purely atmospheric/decorative (alt="" on the img), so it needs an explicit stacking order: the image sits behind, the inner .wrap gets its own stacking context to paint above it. `.jr-watermark-wrap` is deliberately NOT `.wrap` itself — that was the earlier bug: overflow:hidden on the same box that's already max-width:1220px clips a "full width" child right back down to that box, not the viewport. Instead it's a full-width outer element with a centered `.wrap` nested inside it for the actual content, so the image can just be `inset:0` and genuinely cover edge-to-edge on desktop. Mobile drops the watermark entirely (`display:none` under 700px — there isn't enough width for a background watermark to read as atmosphere rather than a sliver) in favor of the real, full-color `.jr-closing-photo` (a `.team-doc-photo` instance) placed at the end of the page content — mobile-only (hidden at 701px+ via `.jr-closing-photo` below), since on desktop it read as a stray, disconnected insert rather than a deliberate placement once the full-bleed watermark was already carrying the photography for that breakpoint. */ .jr-watermark-wrap{position:relative;overflow:hidden} .jr-watermark-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24;filter:grayscale(35%);pointer-events:none;z-index:0} @media(min-width:701px){.jr-closing-photo{display:none}} @media(max-width:700px){.jr-watermark-img{display:none}} .jr-watermark-wrap>.wrap{position:relative;z-index:1} .jr-watermark-wrap .jr-card{background:rgba(255,255,255,.85)} .jr-watermark-wrap .coming-soon-banner{background:rgba(27,42,107,.9)} .coming-soon-banner{background:var(--navy);color:#fff;border-left:4px solid var(--red);padding:24px 28px;margin-bottom:28px} .coming-soon-banner .cs-label{font-family:'Oswald';font-weight:700;font-size:20px;letter-spacing:2px;text-transform:uppercase;color:#fff} .coming-soon-banner p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.8)} .draft-notice{background:rgba(215,40,47,.08);border:1.5px solid var(--red);border-left:4px solid var(--red);padding:14px 20px;margin-bottom:28px;font-size:15.5px;font-weight:600;color:var(--red-dark);line-height:1.5} .jr-card{border:1.5px solid var(--line);background:#fff;padding:28px 26px;margin-bottom:24px} .jr-card .who{color:var(--red)} .jr-card h3{font-size:19px;font-weight:600;letter-spacing:1px;color:var(--navy);margin:10px 0 6px} .jr-card p{font-size:15.5px;color:var(--muted);line-height:1.6} @media(max-width:700px){.coming-soon-banner{padding:20px}.jr-card{padding:22px 20px}} /* ---------- Jr Raiders tryout schedule ---------- Hardcoded, like the sponsorship tier benefits (see CLAUDE.md): this is a once-a-year schedule, not weekly content, so a sheet tab would be more machinery than the problem needs. Session times/locations genuinely vary day to day (Wednesday alone spans two gyms across three sessions), so location is shown per session rather than once per day, rather than guess at a day-level venue that wouldn't always be accurate. */ .tryout-actions{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0 24px} .tryout-days{display:flex;flex-direction:column;gap:20px;margin-bottom:24px} .tryout-day{border:1.5px solid var(--line);padding:18px 20px} .tryout-day-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;border-bottom:1.5px solid var(--line);padding-bottom:10px;margin-bottom:10px} .tryout-date{font-family:'Oswald';font-weight:700;font-size:17px;letter-spacing:.5px;text-transform:uppercase;color:var(--navy)} .tryout-day-note{font-size:13.5px;color:var(--muted)} .tryout-session{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding:9px 0;font-size:16px} .tryout-session+.tryout-session{border-top:1px solid var(--line)} .ts-grade{font-weight:600;color:var(--ink);flex:1 1 190px} .ts-time{font-family:'Oswald';font-weight:600;font-size:15px;color:var(--navy);letter-spacing:.3px;white-space:nowrap} .ts-loc{font-size:13.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap} .tryout-arrive{margin-top:10px;font-size:13.5px;color:var(--muted);font-style:italic} .tryout-tips{border:1.5px solid var(--line);background:var(--wash);padding:16px 18px;margin-bottom:20px;font-size:15.5px;color:var(--ink);line-height:1.6} .tryout-tips strong{color:var(--navy)} @media(max-width:700px){ .tryout-actions{flex-direction:column} .tryout-actions .btn{width:100%} } /* ---------- Summer Camps ---------- */ .camp-card{border:1.5px solid var(--line);background:#fff;padding:26px} .camp-card-head{font-family:'Oswald';font-weight:700;font-size:17px;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);padding-bottom:14px;border-bottom:1.5px solid var(--line);margin-bottom:18px} .camp-notes{font-size:14px;color:var(--ink);line-height:1.7;white-space:pre-line} .camp-notes strong{color:var(--navy)} .camp-notes a{color:var(--red);text-decoration:underline;text-underline-offset:2px} @media(max-width:700px){.camp-card{padding:20px}} /* ---------- Sponsorship ---------- */ .tiers{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--line);margin:36px 0 10px} /* Two-up modifier, used while a third supporter tier is pulled pending confirmation for 2026-27. Restoring that tier = put its .tier card back in sponsor.html and drop this class from .tiers (see CLAUDE.md). */ .tiers.two-up{grid-template-columns:repeat(2,1fr)} .tier{padding:34px 30px;border-right:1.5px solid var(--line);display:flex;flex-direction:column;background:#fff;position:relative} .tier:last-child{border-right:none} /* Platinum used to be a full navy card. That made the whole column heavy and put white text on navy for four benefit rows, which is harder to read than the plain dark-on-white Silver side right next to it. Platinum now stays white like Silver; the premium treatment is concentrated in the title band below (.tier-head-band), the flag, and the .tier-lede callout instead, so both columns read as one clean comparison system rather than two systems. */ .tier .flag{position:absolute;top:0;right:0;background:var(--red);color:#fff;font-family:'Oswald';font-size:10px;font-weight:600;letter-spacing:2px;padding:6px 12px;text-transform:uppercase} .tier h3{font-size:26px;font-weight:700;letter-spacing:1.5px;color:var(--navy)} .tier .price{font-family:'Oswald';font-weight:700;font-size:44px;color:var(--red);margin:12px 0 0;line-height:1} .tier .per{font-size:13px;color:var(--muted);margin-bottom:22px} .tier ul{list-style:none;flex:1;margin-bottom:26px} .tier li{font-size:16px;line-height:1.5;padding:12px 0 12px 26px;position:relative;border-bottom:1px solid var(--line)} .tier .btn{font-size:15px;padding:16px 24px} .tier li::before{content:'—';position:absolute;left:0;color:var(--red);font-weight:700} .tier li a{color:inherit;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px} /* Platinum's title band: a solid navy strip across just the top of the card (not the whole background), holding the tier name + who-it's-for line in white. Negative margin bleeds it to the card's outer edge; the padding below re-insets the text to line up with the rest of the card's content. */ .tier-head-band{background:var(--navy);margin:-34px -30px 22px;padding:24px 30px 20px} .tier-head-band h3{color:#fff} /* `.tiers.two-up` must be repeated here, not just `.tiers`: a media query adds no specificity, so the two-class modifier above would otherwise beat this one-class rule at every width and keep the cards side by side on a phone. That exact bug shipped once, leaving two ~170px columns at 390px. */ @media(max-width:860px){.tiers,.tiers.two-up{grid-template-columns:1fr}.tier{border-right:none;border-bottom:1.5px solid var(--line);padding:26px 20px}.tier:last-child{border-bottom:none}.tier-head-band{margin:-26px -20px 20px;padding:20px 20px 16px}} /* The deadline is the one time-sensitive fact on the page, so it gets its own line rather than trailing the end of a paragraph where it read as fine print. */ .sponsor-deadline{margin-top:16px;font-size:15px;font-weight:600;color:var(--navy);border-left:3px solid var(--red);padding-left:14px;max-width:560px} /* Choose a level -> form -> pay. Replaces a stats band of numbers that did not persuade anyone. This is also the only place the split between the Google Form and Membership Toolkit payment is spelled out; a sponsor who misses it fills in the form and then has no idea how to actually pay. */ .howto{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--line);background:var(--wash);margin:40px 0 10px} .howto-step{display:flex;gap:16px;align-items:flex-start;padding:28px 26px;border-right:1.5px solid var(--line)} .howto-step:last-child{border-right:none} .howto-num{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;font-family:'Oswald';font-weight:700;font-size:16px} .howto-step h4{font-family:'Oswald';font-weight:600;font-size:14px;letter-spacing:1.6px;text-transform:uppercase;color:var(--navy);margin-bottom:7px} .howto-step p{font-size:13.5px;color:var(--muted);margin:0} .howto-link{display:inline-block;margin-top:11px;font-family:'Oswald';font-weight:600;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--red);text-decoration:none;border-bottom:1.5px solid var(--red);padding-bottom:2px} .howto-link:hover{color:var(--navy);border-color:var(--navy)} @media(max-width:860px){.howto{grid-template-columns:1fr}.howto-step{border-right:none;border-bottom:1.5px solid var(--line);padding:22px 20px}} /* Holds the benefit list + its note together so the leftover space in a shorter card falls below the note, not between the list and it. Without this the 3-item tiers open a dead gap next to Platinum's 4. */ .tier-body{flex:1} .tier-body ul{flex:none;margin-bottom:0} /* Platinum inherits Silver. Saying so beats reprinting the Silver list. Now that Platinum's card is white (see .tier-head-band above), this callout is the opaque solid-navy bar carrying that premium signal within the list, rather than a translucent overlay that only worked on a navy background. */ .tier-lede{font-family:'Oswald';font-weight:600;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;padding:10px 14px;background:var(--navy);border-left:3px solid var(--red);color:#fff;margin-bottom:14px} .tier-note{font-size:16px;font-style:italic;color:var(--muted);margin:16px 0 0;line-height:1.5} /* ---------- Sponsor trust strip ---------- One factual line under the hero, before any ask. Takes the same left-red-accent treatment the coming-soon banner used to occupy, so the page keeps one "notice" slot in the same position. The sponsor count is rendered from the Sponsors tab (see loadSponsorCount in app.js) rather than typed, so it cannot drift from the logos shown on the home page. */ .trust-strip{border:1.5px solid var(--line);border-left:3px solid var(--red);background:#fff;padding:18px 24px;margin-top:34px;font-size:15px;color:var(--ink);line-height:1.6} .trust-strip b{font-family:'Oswald';font-weight:600;letter-spacing:.5px;color:var(--navy)} @media(max-width:700px){.trust-strip{padding:16px 18px;font-size:14px}} /* ---------- Sponsor FAQ ---------- Native
/: keyboard and screen-reader support with no ARIA wiring and no JS, which is why it is not built as a custom accordion like .gacc on the schedule page (that one needs JS for its expand-all/state-preserving behaviour; this one does not). */ .faq{margin-top:56px} .faq-item{border:1.5px solid var(--line);border-bottom:none;background:#fff} .faq-item:last-of-type{border-bottom:1.5px solid var(--line)} .faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:19px 24px;font-family:'Oswald';font-weight:600;font-size:14.5px;letter-spacing:1px;text-transform:uppercase;color:var(--navy);min-height:48px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:'+';font-size:20px;color:var(--red);flex:none;line-height:1} .faq-item[open] summary::after{content:'\2013'} .faq-item[open] summary{background:var(--wash)} .faq-item p{padding:0 24px 20px;margin:10px 0 0;font-size:14.5px;color:var(--ink);line-height:1.65;max-width:640px} @media(max-width:700px){.faq-item summary{padding:16px 18px;font-size:13.5px}.faq-item p{padding:0 18px 18px;font-size:14px}} /* ---------- Main Gym Sponsorship Board ---------- Full-bleed navy band: this is the one section on the page carrying photos, and the boards themselves are navy with a red frame, so the band echoes the object it is showing. Breaks out of .wrap the same way .jr-watermark-wrap does — outer full-width element with a .wrap nested inside. */ .board-band{background:var(--navy);border-top:3px solid var(--red);padding:56px 0 60px;margin-top:20px} .board-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center} .board-band .eyebrow{color:#fff} .board-band h3{font-family:'Oswald';font-weight:700;font-size:clamp(23px,2.5vw,31px);letter-spacing:1.4px;color:#fff;line-height:1.16;text-transform:uppercase} .board-band p{color:rgba(255,255,255,.82);font-size:14.5px;margin-top:14px;max-width:470px} .board-band p.board-room{color:#fff;font-weight:600;margin-top:16px} .board-cta{background:#fff;color:var(--navy);margin-top:22px} .board-cta:hover{background:var(--wash)} .board-shots{display:grid;grid-template-columns:1fr 1fr;gap:18px} .board-shot{position:relative;margin:0;border:1.5px solid rgba(255,255,255,.26);overflow:hidden;line-height:0} .board-shot img{display:block;width:100%;height:auto} .board-cap{position:absolute;left:0;bottom:0;background:rgba(27,42,107,.86);color:rgba(255,255,255,.92);font-family:'Oswald';font-weight:500;font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;padding:5px 9px} @media(max-width:900px){.board-grid{grid-template-columns:1fr;gap:30px}} /* Side by side under ~700px leaves each board about 160px wide, at which point the sponsor plates are unreadable — and the whole reason these photos are here is that you can read the names on them. One column instead. */ @media(max-width:700px){.board-band{padding:40px 0 44px}.board-shots{grid-template-columns:1fr;gap:16px}} /* Standing program note (currently the holiday poinsettia fundraiser). Deliberately quiet — it is context, not a third call to action. */ .sponsor-note{border:1.5px solid var(--line);border-left:5px solid var(--red);background:var(--wash);padding:32px 34px;margin-top:52px} .sponsor-note h4{font-family:'Oswald';font-weight:700;font-size:clamp(20px,2.1vw,26px);letter-spacing:1.4px;text-transform:uppercase;color:var(--navy);margin-bottom:10px;line-height:1.15} .sponsor-note p{font-size:15.5px;color:var(--ink);margin:0;max-width:760px;line-height:1.6} @media(max-width:700px){.sponsor-note{padding:24px 20px}} /* Closing image: reads as the visual full stop before the final ask, so it sits flush against the CTA band rather than floating as its own section. */ .sponsor-closing-photo{margin:52px 0 0;border:1.5px solid var(--line);border-bottom:none;overflow:hidden;line-height:0} .sponsor-closing-photo img{display:block;width:100%;height:auto} .cta-band-attached{margin-top:0!important} .cta-band{background:var(--red);color:#fff;padding:46px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:46px} .cta-band h3{font-size:26px;font-weight:700;letter-spacing:1.5px} .cta-band p{color:#fff;font-size:14px;margin-top:6px;max-width:460px} .cta-band .btn{background:#fff;color:var(--red)} @media(max-width:700px){.cta-band{padding:28px 20px}.cta-band .btn{width:100%}} /* ---------- Game Night at Walton (schedule page hospitality block) ---------- */ .gamenight{margin-top:56px;border:1.5px solid var(--line);border-top:3px solid var(--red);background:#fff;padding:36px 34px 40px} .gamenight h3{font-family:'Oswald';font-weight:700;font-size:clamp(22px,2.4vw,30px);letter-spacing:1.2px;text-transform:uppercase;color:var(--navy);margin-bottom:22px} .gn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px} .gn-item h4{font-family:'Oswald';font-weight:600;font-size:13px;letter-spacing:2.2px;text-transform:uppercase;color:var(--red);margin-bottom:9px} .gn-item p{font-size:14px;color:var(--ink);line-height:1.6;margin:0 0 11px} @media(max-width:860px){.gn-grid{grid-template-columns:1fr;gap:24px}.gamenight{padding:26px 20px 30px}} /* ---------- Fridge schedule (print only) ---------- */ #printSheet{display:none} @media print{ /* #printSheet is a direct child of on schedule.html, so one rule hides everything else and only the fridge schedule prints. Scoped with :has() rather than an unscoped `body>*:not(#printSheet)`, which would match every real child of body on pages that have no print sheet at all and blank their printout instead of falling through to their own print rules (see "Print (roster pages)" below). The :not(:empty) half matters: the container ships empty and is only filled when the Print button is actually pressed. Without it, hitting Cmd+P on schedule.html without pressing that button hides the whole page in favour of an empty div and prints a blank sheet. With it, an unfilled sheet is ignored and the page prints normally. That means the container must be written with NO whitespace inside it, since a stray newline is a text node and would defeat :empty. */ body:has(#printSheet:not(:empty))>*:not(#printSheet){display:none!important} body:has(#printSheet:not(:empty)){padding:0!important;background:#fff!important} #printSheet{display:block!important} .ps-head{display:flex;align-items:center;gap:14px;border-bottom:3px solid #D7282F;padding-bottom:10px;margin-bottom:10px} .ps-head img{width:52px;height:52px} .ps-head h1{font-family:'Oswald',sans-serif;font-size:20px;letter-spacing:1.5px;text-transform:uppercase;color:#1B2A6B;margin:0} .ps-head p{font-size:10.5px;color:#555;margin:2px 0 0} .ps-note{margin-left:auto;text-align:right;font-size:9.5px;color:#555;line-height:1.5} .ps-note b{color:#1B2A6B} .ps-table{width:100%;border-collapse:collapse} /* A game day with JV/Freshman games wraps to a second line inside the same cell (.ps-extra below), making that visually two lines tall. Without this, a row landing right at a page boundary can print wrong on iPad Chrome (which, like every iOS browser, prints through WebKit rather than its own engine): confirmed on a real device, the row's wrapped second line appeared as an orphaned fragment at the top of the next page, ahead of — and duplicating — the row it belonged to. break-inside:avoid forces the whole row to move to the next page as one unit instead of splitting, which is the standard fix for exactly this class of print bug. */ .ps-table tr{break-inside:avoid;page-break-inside:avoid} .ps-table th{font-family:'Oswald',sans-serif;font-size:8.5px;letter-spacing:1.6px;text-transform:uppercase;text-align:left;color:#1B2A6B;border-bottom:1.5px solid #1B2A6B;padding:4px 6px} .ps-table td{font-size:10px;padding:4.5px 6px;border-bottom:0.75px solid #ccc;vertical-align:top} .ps-date{font-family:'Oswald',sans-serif;font-weight:600;color:#1B2A6B;white-space:nowrap} .ps-opp i{font-style:normal;font-family:'Oswald',sans-serif;font-size:8px;letter-spacing:1px;text-transform:uppercase;color:#D7282F;margin-left:4px} .ps-extra{display:block;font-size:8.5px;color:#777;margin-top:1px} .ps-loc{color:#555} .ps-t{white-space:nowrap} .ps-t .pw{color:#1E7A38}.ps-t .pl{color:#4A5263} .ps-foot{font-size:9px;color:#777;margin-top:10px;text-align:center} /* Platinum credit block. Deliberately NOT fine print: these are the people who paid for the sheet, so the names sit at the same size as the schedule rows themselves (10px) rather than shrinking below them. Set apart by a rule and an Oswald caps label so it reads as a designed credit, not a disclaimer. It may wrap to two or three lines with a full Platinum roster, which is fine; if it ever crowds the sheet, drop the label to one line or trim leading, never truncate the list, since a partial list shortchanges a sponsor who paid. */ /* A second row inside the table's , not the — see the long comment above printSchedule() in app.js for why. rows are part of the table's normal flow, so the browser accounts for this row's height the same way it already does for the column-header row above it when deciding how many body rows fit on a page — that's what makes it repeat correctly AND never overlap the schedule rows, on every engine, with no manual page-margin math required. */ .ps-sp-row td{padding:0;border-bottom:1.5px solid #1B2A6B} .ps-sponsors{padding:7px 6px 8px;text-align:center} .ps-sp-label{font-family:'Oswald',sans-serif;font-weight:600;font-size:8px;letter-spacing:1.8px;text-transform:uppercase;color:#D7282F;margin-bottom:4px} .ps-sp-names{font-size:10px;color:#1B2A6B;line-height:1.6;max-width:6.6in;margin:0 auto} @page{margin:0.55in} } /* ---------- Footer ---------- */ footer{background:var(--navy);color:rgba(255,255,255,.88);margin-top:72px;padding:46px 0 36px;font-size:13.5px;border-top:3px solid var(--red)} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px} footer h4{font-family:'Oswald';font-weight:600;color:#fff;font-size:13px;letter-spacing:2.5px;margin-bottom:14px;text-transform:uppercase} footer a{display:block;color:rgba(255,255,255,.88);text-decoration:none;padding:5px 0} footer a:hover{color:#fff} /* "Type Swish" in the footer's Community column: the door to the type-SWISH egg, hidden in plain sight (chair, 2026-09-08). Plain text, not a link, set to the same block/padding as the links around it so nothing marks it out. The only tells are the ones a non-link naturally has: no pointer, no hover brighten. Colour is inherited from footer, same as the links' own value. */ footer .foot-word{display:block;padding:5px 0} @media(max-width:680px){.foot-grid{grid-template-columns:1fr 1fr}} .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--navy);color:#fff;padding:13px 24px;font-family:'Oswald';font-size:13px;letter-spacing:1.5px;text-transform:uppercase;opacity:0;transition:all .3s;z-index:200;box-shadow:0 12px 30px rgba(0,0,0,.3);max-width:calc(100vw - 32px);text-align:center} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} @media(max-width:700px){.toast{bottom:92px}} /* ---------- Print (roster pages, plus site-wide print hygiene) ---------- The rules below the roster ones apply anywhere the elements exist. They are not a print *design* for the home page (there isn't one; only the fridge schedule and the roster pages are designed to print). They exist so that a visitor who prints any page anyway gets something merely plain rather than something visibly broken. Both were originally found by printing the home page to PDF from Safari on iPadOS, and both turned out to also affect a second context — a full-page screenshot capture, which apparently shares the print engine's rendering quirks — so the real fix for each is no longer print-only, see below: - Sponsor tiles are 3D flip cards. Safari's print renderer (and, it turns out, its full-page-capture renderer) flattens the preserve-3d context and ignores backface-visibility:hidden, so the navy .back face (which carries rotateY(180deg)) painted ON TOP of the front: every sponsor logo vanished, replaced with navy blocks showing mirror-image "WEBSITE"/"FOLLOW" text. The real fix (see .sponsor-face.back above) no longer depends on print detection at all: the back face is hidden by opacity as well as backface-visibility, so it stays invisible by default regardless of whether a given renderer honors backface- visibility correctly. The print rules below are now just extra insurance for print's flattened-transform layout specifically. - .hero-photo's decorative radial-gradient vignette printed (and screenshotted) as a hard black ellipse across the photo. A decorative gradient earns nothing on paper or in a capture tool that can't render it correctly, so instead of fighting it per-context it's removed outright — see the (lack of) .hero-photo::after rule above. */ @media print{ nav,.install-banner,.tabbar,footer,.roster-landing,.roster-subnav .filter-bar,.toast{display:none!important} .roster-subnav{position:static} body{padding-bottom:0} .print-hide{display:none!important} .sponsor-flip-inner{transform:none!important;transition:none!important;transform-style:flat!important} .sponsor-face{backface-visibility:visible!important} .sponsor-face.front{opacity:1!important} .sponsor-face.back,.tile-tap-hint{display:none!important} } /* ---------- All Time Records ---------- Deliberately narrower than .wrap's full 1220px: a 3-column board that wide puts Girls and Boys so far apart the eye can't connect them to the category between. Constraining it to a compact, centered board (like a real plaque, not a stretched-out data table) plus inline stat lines (name/value/years on ONE line, not stacked) and a row-hover to track across is what fixes both "too spread apart" and "underwhelming" at once. */ .records-board{max-width:860px;margin:0 auto} .records-table{border:1.5px solid var(--line);border-top:3px solid var(--red);background:#fff} .record-row{display:grid;grid-template-columns:1fr auto 1fr;border-bottom:1px solid var(--line);transition:background .12s} .record-row:last-child{border-bottom:none} .record-row.record-head{background:var(--navy)} .record-row.record-head .rec-cat{color:#fff;font-size:16.8px} .record-row.record-head .record-cell.category{background:var(--navy);border-color:rgba(255,255,255,.2)} .record-row:not(.record-head):nth-child(even){background:var(--wash)} .record-row:not(.record-head):nth-child(even) .record-cell.category{background:#fff} .record-row:not(.record-head):hover{background:#EFF2FA} .record-row:not(.record-head):hover .record-cell.category{background:#E7EBF7} .record-cell{padding:10px 18px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .record-cell.category{align-items:center;justify-content:center;text-align:center;background:var(--wash);border-left:1px solid var(--line);border-right:1px solid var(--line);min-width:160px;padding:10px 14px} .record-cell.girls{justify-content:flex-end;text-align:right} .record-cell.boys{justify-content:flex-start;text-align:left} .rec-gender-label{display:none} .rec-cat{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.3px;font-size:12px;color:var(--ink);line-height:1.25} .record-row:not(.record-head) .rec-cat{font-size:15px} .rec-name{font-weight:600;color:var(--ink);font-size:13.5px} .rec-value{font-family:'Oswald';font-size:17px;font-weight:700;color:var(--red);line-height:1} .rec-years{font-size:11px;color:var(--muted)} .rec-empty{color:var(--muted)} .records-note{color:var(--muted);font-size:12.5px;line-height:1.7;margin-top:22px;border-top:1px solid var(--line);padding-top:16px;text-align:center} @media(max-width:700px){ .record-row{grid-template-columns:1fr} .record-row.record-head{display:none} .record-cell.category{order:-1;border:none;border-bottom:1px solid var(--line);padding:9px 18px;justify-content:flex-start;text-align:left} .record-cell.girls,.record-cell.boys{justify-content:flex-start;text-align:left} .rec-gender-label{display:inline-block;flex-shrink:0;width:40px;font-family:'Oswald';font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)} }