/* West Georgia Misfits — STACKED layout (hamburger). * * Loaded as , so every rule in here is * unreachable above the break and a phone fix can no longer land on desktop. * The file has exactly three width sub-tiers — 1024 (tablet), 640 (phone) and * 520 (small phone) — replacing the old 960/900/860/760/700/640/620/560/520 * spread, where an iPad Mini at 768px got the stacked header from the 1240 * rule and the DESKTOP version of 25 rules from the 760 rule. No min-width * queries: the link's media attribute is the only lower bound this file has. * scripts/check-layout.mjs enforces both. */ /* ---------- the reserved header band ---------- */ /* The stacked header is TWO rows now, not three: brand+hamburger (62px + the .site-header hairline) and the fixed one-line Next Up row (2.75rem + its own border-top). The season row that used to be the third one is back in the brand row (see .na-season below) — it was 41px of decoration eating 6% of a phone viewport. These two numbers are the entire contract with tokens.css, site.js and chrome-boot.js; chrome-boot still overrides --chrome-h from the real measurement in wgm-chrome-h. */ :root{--header-h:63px} html.wgm-has-nextup{--header-h:107px} /* ---------- header: the hamburger stack ---------- */ /* This used to sit at 760px with three graduated squeeze tiers (1240/1040/860) shrinking the tab row to 11.5px type — a budget written for ten tabs while PAGES ships eleven. The row is now either full size or the hamburger. */ .nav{position:relative} .nav-brand{flex:1;justify-content:flex-start;padding:12px 14px;border-right:none} .nav-toggle{ display:inline-flex;align-items:center;gap:8px;margin:0;padding:10px 14px; border:0;border-left:1px solid var(--line);background:transparent;color:var(--silver); font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase; cursor:pointer; } .nav-toggle:hover,.nav-toggle[aria-expanded="true"]{color:var(--white)} .nav-toggle-bars{ display:block;width:18px;height:2px;background:currentColor;position:relative; box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor; } .nav-alert{order:3;width:100%;border-top:1px solid var(--line)} .nav-links{ display:none;order:4;margin:0;width:100%;flex-direction:column;flex-wrap:nowrap; border-top:1px solid var(--line);background:rgba(11,11,13,.98); } /* The panel lives inside #app-header, which is position:sticky;top:0 — a sticky box pinned at the top can never scroll its own overflow into view, so 12 links x ~50px overran a 664px iPhone viewport and "Coaches" was permanently unreachable: the page behind moved, the menu did not. Give the panel its own scroll, measured from the bar that sits above it (--chrome-h when JS has measured, --header-h before that) rather than a flat literal, so a page carrying Next Up gets the shorter panel it needs. */ .nav-links.is-open{ display:flex; max-height:calc(100vh - var(--chrome-h,var(--header-h))); max-height:calc(100dvh - var(--chrome-h,var(--header-h))); overflow-y:auto;overscroll-behavior:contain; } .nav-links a{padding:14px 16px;font-size:14px;white-space:nowrap;border-bottom:1px solid var(--line)} .nav-links a[aria-current="page"]{border-bottom-color:var(--line);box-shadow:inset 3px 0 0 var(--red)} /* No nested disclosure inside the hamburger: the panel is already a stack, so the More links are simply more rows in it. site.js un-hides the menu below this width, and the button goes away with the dropdown it opened. */ .nav-more{display:none} .nav-more-menu a{padding:14px 16px;border-bottom:1px solid var(--line)} /* ---------- header: Next Up + season ---------- */ /* Fixed one-line Next Up row — stacking 2–3 games used to grow/shrink the sticky bar after GC and make the hero jump under the header. */ .nav-alert{ order:3;flex:1 1 100%;justify-content:flex-start;flex-wrap:nowrap; padding:0 14px;border-top:1px solid var(--line); height:2.75rem;min-height:2.75rem;max-height:2.75rem;overflow:hidden; } .nav-alert:empty{display:none} /* Same-session navigations usually have Next Up — keep the second row's height while progressive chrome waits on /api/gc so the hero does not jump. */ /* (0,3,1) already outranks .nav-alert:empty's (0,2,0) — no !important. */ html.wgm-has-nextup .nav-alert:empty, html.wgm-has-nextup .nav-alert.is-empty{ display:flex;visibility:hidden;pointer-events:none; } .na-text{ white-space:nowrap;text-align:left;font-size:13px;line-height:1.3; overflow:hidden;text-overflow:ellipsis; } .na-rot{ position:relative;flex:1;min-width:0;align-self:stretch; display:flex;align-items:center; } .na-rot .na-text,.na-rot[data-n="3"] .na-text{ position:absolute;left:0;right:0;max-width:100%; } .na-game{flex:none;text-align:left;max-width:100%} /* P5: the season chip rides the brand row instead of owning a third full-width row of its own. "FALL 2026" is decoration; 41px of a 664px viewport is not. The Season label goes with it — this is what the old max-width:1280 rule did, minus the 40px band where it half-fired above the nav break. */ .na-season i{display:none} .na-season{order:1;flex:none;margin-left:auto;border-left:1px solid var(--line)} /* ---------- footer ---------- */ /* 1025-1240 still has room for the four columns; the tiers below collapse it. */ .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr} /* ---------- hero rungs ---------- */ /* Each hero exists at 800/1200/1600px next to its 2400px master; the master is 285-745 KB and a 360px phone was downloading every byte of it to sit under a 68-88% dark wash. Deliberately media queries and not image-set(): --hero-img feeds the `background` shorthand through var(), and a custom property holding an image-set() a browser does not understand is still a VALID custom property value — the failure lands later, on the background shorthand, which drops to nothing and leaves the hero blank. `resolution` picks the same rung image-set() would, and an old browser simply keeps the master. A coach-set header (--page-hero-image) is the first arm of the var chain, so it overrides all of these and is unaffected. */ @media (max-width:1024px),(max-resolution:1.5dppx){ .soc-hero{--hero-img:url("/assets/img/social-hero-1600.webp")} .sc-hero{--hero-img:url("/assets/img/scores-hero-1600.webp")} .cal-hero{--hero-img:url("/assets/img/calendar-hero-1600.webp")} .ro-hero{--hero-img:url("/assets/img/roster-hero-1600.webp")} .ph-hero{--hero-img:url("/assets/img/photos-hero-1600.webp")} .jn-hero{--hero-img:url("/assets/img/join-hero-1600.webp")} .og-hero{--hero-img:url("/assets/img/calendar-hero-1600.webp")} .sp-hero{--hero-img:url("/assets/img/sponsors-hero-1600.webp")} } /* ================= TABLET — max-width:1024px ================= */ /* The old 960 / 900 / 860 numbers, which were three different single-purpose breakpoints for the same "the two-up grids stop fitting" moment. */ @media (max-width:1024px){ .page-hero-grid,.soc-hero-grid,.ph-hero-grid,.sh-hero-grid,.jn-hero-grid,.og-hero-grid,.cal-hero-grid{grid-template-columns:1fr} .cal-hero-grid{grid-template-columns:1fr;align-items:start} .cal-hero-actions{max-width:360px} .store-layout{grid-template-columns:1fr} .store-layout .checklist-card{order:-1;position:static} .sp-policy-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .store-layout .sw-aside{order:0} .bx-swipe{display:block} .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} } /* ================= PHONE — max-width:640px ================= */ /* Everything that used to be split across 760 and 640. 760 was the worst number in the file: an iPad Mini portrait is 768px, so it took the stacked header from the 1240 rule and the desktop version of all 25 of these rules. 641-768 now reads as a tablet, which is what it is. */ @media (max-width:640px){ .section{padding:52px 0 0} .accolade .acc-line{font-size:13px;letter-spacing:.16em;gap:12px} .accolade .acc-line i{width:44px} /* Below 640 the brand row has no room for it either — logo + hamburger + "FALL 2026" is three things in ~360px. The season is on the page. */ .na-season{display:none} .affil-strip{gap:14px 20px;bottom:10px} .affil-strip img{height:19px} .affil-strip img[alt="GameChanger"]{height:10px} /* 19.6x19px logos with no padding — eight of them across the hero. */ .affil-strip a{padding:12px 6px} .hero-full{padding:84px 0 108px} .hero-content .tagline{font-size:15.5px} .page-hero,.cal-hero,.sc-hero,.ro-hero,.ph-hero,.soc-hero,.jn-hero,.sh-hero,.sp-hero,.og-hero,.adm-hero{ min-height:clamp(180px,28vh,240px); padding:40px 0 36px; } .page-body,.sc-body,.ro-body,.ph-body,.soc-body,.jn-body,.sh-body,.og-body,.adm-body,.cal-body{padding-top:28px;padding-bottom:48px} .sb{padding:16px 14px 14px} .sc-panel-head,.sc-grp-head,.sc-block{padding-left:16px;padding-right:16px} .sc-panel-head{padding-right:46px} .cal-hero-actions{max-width:none} .cal-next{padding:18px 16px 16px} .cal-cell{min-height:72px;padding:5px} .cal-cell>b{width:22px;height:22px;font-size:12px;margin-bottom:4px} /* One line per chip, always: a wrapped label made a two-event weekend three times taller than the rest of the month. The squad tag and the start of the label show; the ellipsis says "tap me" and the popup has the rest. 22px tall so the row count, not the title, sets the height. */ .cal-ev{ display:flex;flex-direction:column;gap:2px; font-size:10px;padding:3px 4px;min-height:22px;line-height:1.2; white-space:nowrap;overflow:hidden; } /* Squads on their own line so 9U and 10U on the same day both show: the tags drop their "U" (see calSquadHtml) and sit side by side in the squad colours; the time or event name is the single trimmed line under them. */ .cal-ev .cal-sqs{display:flex;gap:2px} .cal-ev .cal-sq{font-size:10px;font-weight:700;padding:0 3px;line-height:14px} .cal-ev .cal-sq i{display:none} .cal-ev .cal-lbl{display:block;overflow:hidden;text-overflow:ellipsis} .cal-more{font-size:10px;padding:3px 4px;min-height:22px} .cal-title{font-size:20px} .cal-head{padding:14px 12px} /* 48x39 prev/next and a 76x32 "Today" are the month's only controls. */ .cal-nav{padding:8px 14px;min-height:44px} .cal-today{min-height:40px} .btn-row{flex-direction:column;align-items:stretch;gap:12px} .btn{justify-content:center} .empty{padding:30px 18px} .carousel{aspect-ratio:4/3} .thumb-grid{grid-template-columns:repeat(3,1fr);gap:6px} .frow{grid-template-columns:1fr} .ro-squad-head,.ro-squad-body{padding-left:16px;padding-right:16px} .gc-bar,.ro-gc-bar{padding:12px 14px} .roster-grid{grid-template-columns:repeat(2,1fr);gap:10px} .hl-grid{grid-template-columns:repeat(2,1fr);gap:10px} .store-frame iframe{height:min(1000px,78svh)} .sp-band{padding:52px 0} .sp-story-grid{grid-template-columns:1fr;gap:18px} .sp-return > div{grid-template-columns:1fr;gap:4px} .sp-tab{padding:12px 14px;font-size:13px;letter-spacing:.12em} .sp-tiers{grid-template-columns:1fr;gap:12px} .sp-tier-card.is-featured{transform:none} .sp-tier-card.is-featured:hover{transform:none} .sp-signup-panel{padding:22px 16px} .sponsor-grid{grid-template-columns:repeat(2,1fr)} .sp-page .sponsor-card{flex-basis:calc(50% - 1px);min-width:calc(50% - 1px);min-height:120px} .sp-profile{grid-template-columns:1fr;gap:20px} /* 16-18px consent boxes on the two forms a parent must not get wrong. */ .sp-check input[type="checkbox"],.check-row input,.fan-ok input{width:22px;height:22px;margin-top:1px} .sp-check,.check-row,.fan-ok{padding:5px 0} .site-footer{margin-top:64px} .foot-grid{grid-template-columns:1fr 1fr;gap:24px 16px;text-align:left} .foot-brand{grid-column:1/-1;text-align:center} .foot-brand.foot-col{align-items:center} .f-mark{align-self:center} .foot-legal{justify-content:center;text-align:center} /* 165x21.7px links with a 7px gap, and a 14px legal row. The 640 block used to change the grid and never the row height. The TeamReach control sits in that same list as a