:root{ --navBg: #0b1220; --royal: #2563eb; --text: #0f172a; --muted: #64748b; --border: #e2e8f0; --bg: #f4f6fa; --card: #ffffff; /* Watermark */ --watermarkUrl: url("./watermark.png"); /* <-- add this file to your repo */ --watermarkOpacity: 0.06; } /* ========================= Base ========================= */ *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--text); background: var(--bg); } a{ color: var(--royal); } a:hover{ opacity:.9; } .wrap{ width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 16px 0 48px; } .muted{ color: var(--muted); } .small{ font-size: 12px; } /* ========================= Watermark page background (Apply by using class="watermarkPage" on ) ========================= */ body.watermarkPage{ position: relative; } body.watermarkPage::before{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: var(--watermarkUrl); background-repeat: no-repeat; background-position: center 180px; background-size: min(720px, 80vw); opacity: var(--watermarkOpacity); filter: grayscale(100%); } .siteHeader, .wrap, .modalOverlay{ position: relative; z-index: 1; } /* ========================= Header / Branding (compact) ========================= */ .siteHeader{ position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--border); } .brandCenter{ text-align: center; padding: 6px 16px 8px; /* compact */ } .logoImage{ width: 52px; /* compact */ height: 52px; border-radius: 12px; object-fit: cover; border: 1px solid var(--border); background: #fff; } .brandCenter h1{ margin: 6px 0 2px; font-size: 22px; /* compact */ letter-spacing: -.02em; } .tagline{ color: var(--muted); font-size: 12px; } /* ========================= Nav (Hamburger) ========================= */ .navWrap{ position: relative; padding: 10px 16px 0; } .navToggle{ display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: #fff; cursor: pointer; } .navToggle span{ display:block; height:2px; background:#0f172a; margin:6px 10px; border-radius:2px; } .navOverlay{ display:none; } .nav{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; padding: 8px 0 0; /* compact */ } .nav a{ text-decoration:none; font-weight: 800; color: #0f172a; padding: 6px 10px; border-radius: 999px; } .nav a.active, .nav a:hover{ background: rgba(37,99,235,.12); color: #1d4ed8; } @media (max-width: 820px){ /* show hamburger button */ .navToggle{ display:inline-flex; flex-direction:column; justify-content:center; } /* overlay covers whole screen and blocks ALL taps behind */ .navOverlay{ display:block; /* always exists, but hidden via opacity */ position:fixed; inset:0; background:#050914; z-index: 2147483644; opacity:0; pointer-events:none; transition: opacity 180ms ease; } /* menu panel: fixed, scrollable if long, dark theme */ .nav{ position:fixed; left:12px; right:12px; top:70px; z-index: 2147483645; display:grid; gap:10px; padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,0.14); background:#0b1220; box-shadow: 0 18px 60px rgba(0,0,0,0.60); /* hidden by default */ opacity:0; pointer-events:none; transform: translateY(-10px); transition: transform 180ms ease, opacity 180ms ease; /* allow scrolling inside menu */ max-height: calc(100vh - 92px); overflow-y:auto; -webkit-overflow-scrolling: touch; } .nav a{ display:block; text-align:center; font-size:15px; padding:14px 14px; border-radius:999px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#e5e7eb; text-decoration:none; font-weight:800; } .nav a.active{ background: rgba(37,99,235,0.45); border-color: rgba(37,99,235,0.75); color:#fff; } /* OPEN STATE (driven by nav.js adding html.navOpen) */ html.navOpen .navOverlay{ opacity:1; pointer-events:auto; } html.navOpen .nav{ opacity:1; pointer-events:auto; transform: translateY(0); } /* lock page scroll behind menu */ html.navOpen body{ overflow:hidden; touch-action:none; } /* keep hamburger visible ABOVE overlay, and white bars */ .navToggle{ position:relative; z-index: 2147483647; } html.navOpen .navToggle{ position:fixed; top:12px; left:12px; z-index:2147483647; background: rgba(0,0,0,0.35); border-radius:12px; padding:10px; } html.navOpen .navToggle span{ background:#fff; } } /* ========================= Layout Blocks / Cards ========================= */ .docSection{ margin-top: 14px; } .card{ background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 14px 40px rgba(15,23,42,.06); } .cardBody{ padding: 16px; } .btnPrimary, .btnSecondary{ display:inline-block; font-weight: 900; border-radius: 999px; padding: 10px 14px; text-decoration:none; border:1px solid var(--border); } .btnPrimary{ background: var(--royal); color:#fff; border-color: rgba(37,99,235,.35); } .btnSecondary{ background:#fff; color:#0f172a; } /* ========================= Tables ========================= */ .tableScroll{ overflow-x:auto; } .standingsTable{ width: 100%; border-collapse: collapse; min-width: 560px; } .standingsTable th, .standingsTable td{ padding: 10px 10px; border-bottom: 1px solid var(--border); } .standingsTable th{ text-align:left; font-size:12px; letter-spacing:.03em; text-transform: uppercase; color: var(--muted); } .num{ text-align:right; } /* ========================= Teams Tiles (single source of truth) ========================= */ .teamsGrid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .teamTile{ position: relative; display:block; padding: 14px; border-radius: 18px; border: 1px solid var(--border); text-decoration: none; color: #0f172a; background: #ffffff; box-shadow: 0 10px 28px rgba(15,23,42,.06); overflow:hidden; } .teamTile:hover{ transform: translateY(-2px); border-color: rgba(37,99,235,.35); box-shadow: 0 18px 44px rgba(15,23,42,.10); } .teamAccent{ position:absolute; inset:0; background: radial-gradient(900px 220px at 20% -30%, rgba(37,99,235,.12), transparent 60%); pointer-events:none; } .teamTileRow{ display:flex; gap: 12px; align-items:center; } .teamTileLogoWrap{ width: 56px; height: 56px; border-radius: 16px; border: 1px solid var(--border); background: #fff; display:flex; align-items:center; justify-content:center; flex: 0 0 auto; overflow:hidden; } .teamTileLogo{ width: 44px; height: 44px; object-fit: contain; display:block; } .teamTileText{ min-width: 0; } .teamName{ font-weight: 950; font-size: 16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .teamCta{ margin-top: 6px; font-size: 12px; font-weight: 900; color: #1d4ed8; } /* Contacts page: wider rectangular tiles */ .contactsPage .teamsGrid{ grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; } .contactsPage .teamTile{ padding: 16px; border-radius: 16px; border-color: var(--teamColor, var(--border)); } .contactsPage .teamTileLogoWrap{ width: 64px; height: 64px; border-radius: 14px; } .contactsPage .teamTileLogo{ width: 52px; height: 52px; } .contactsPage .teamName{ font-size: 18px; } .contactsPage .teamTile:hover{ border-color: var(--teamColor, rgba(37,99,235,.35)); } .teamHeaderBlock{ display: grid; grid-template-columns: 1fr 300px; gap: 12px; align-items: start; } .teamHeaderLeft{ display: flex; gap: 12px; align-items: center; } .teamHeaderLogo{ width: 72px; height: 72px; border-radius: 14px; object-fit: contain; border: 1px solid var(--border); background: white; padding: 6px; } /* Coach card (blue-ish box) */ .coachCard{ border-radius: 16px; border: 1px solid rgba(37, 99, 235, 0.18); background: linear-gradient(180deg, rgba(37,99,235,0.10), rgba(37,99,235,0.04)); padding: 12px; box-shadow: 0 10px 26px rgba(15,23,42,.06); } .coachTitleCenter{ text-align: center; padding: 2px 0 8px; border-bottom: 1px solid rgba(37, 99, 235, 0.14); } .coachLabel{ font-size: 12px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .coachName{ margin-top: 6px; font-size: 16px; /* slightly smaller for balance */ font-weight: 950; color: #0f172a; } .coachLinks{ display:flex; flex-direction: column; gap: 8px; margin-top: 10px; } .coachLink{ display:flex; align-items:center; justify-content:center; text-decoration: none; font-weight: 900; font-size: 13px; padding: 9px 10px; border-radius: 999px; background: rgba(255,255,255,0.9); border: 1px solid rgba(37,99,235,0.20); color: #1d4ed8; overflow-wrap: anywhere; word-break: break-word; } .coachLink:hover{ border-color: rgba(37,99,235,0.38); background: #fff; } /* ========================= Roster Cards ========================= */ .rosterGrid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .playerCardBtn{ width:100%; text-align:left; cursor:pointer; border:2px solid var(--teamColor, var(--border)); background:#f8fafc; border-radius:14px; padding:10px; } .playerCardBtn:hover{ border-color: var(--teamColor, rgba(37,99,235,.45)); transform: translateY(-1px); } .playerCardRow{ display:flex; gap: 10px; align-items:center; } .playerThumb img{ width: 56px; height: 56px; border-radius: 999px; object-fit: cover; border: 1px solid var(--border); background: #fff; } /* ========================= Modal ========================= */ .noScroll{ overflow:hidden; } .modalOverlay{ display:none; position:fixed; inset:0; background: rgba(15,23,42,.55); z-index:100; padding: 18px; align-items:center; justify-content:center; } .modalOverlay.open{ display:flex; } .modalCard{ width: min(860px, 100%); background: #fff; border-radius: 18px; border: 2px solid var(--teamColor, var(--border)); box-shadow: 0 18px 60px rgba(15,23,42,.20); position: relative; padding: 16px; } .modalClose{ position:absolute; right: 12px; top: 10px; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-weight: 900; } .profileHeader{ display:flex; gap: 14px; align-items:flex-start; flex-wrap: wrap; } .profilePhoto img{ width: 110px; height: 110px; border-radius: 18px; object-fit: cover; border: 1px solid var(--border); background:#fff; } .profileName{ margin: 0; font-size: 22px; } .profileLine{ display:flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--border); } .profileLine:first-child{ border-top:0; padding-top:0; } .profileKey{ color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; } .profileVal{ font-weight: 900; } /* ========================= Gallery ========================= */ .galleryGrid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; } .galleryItem{ border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 12px 30px rgba(15,23,42,.08); } .galleryMedia img{ width: 100%; height: 220px; object-fit: cover; display:block; } .galleryMedia iframe{ width: 100%; height: 220px; display:block; } .galleryCaption{ padding: 10px 12px; font-size: 13px; color: #0f172a; } /* ========================= Home + POTW Add-ons ========================= */ .homeTwoCol{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 900px){ .homeTwoCol{ grid-template-columns: 1fr; } } .homeSectionHead{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; } .homeGameRow{ padding:10px 0; border-top:1px solid var(--border); } .homeGameRow:first-child{ border-top:0; padding-top:0; } .homeGameMeta{ margin-bottom:6px; } .homeGameMain{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; } .pillFinal{ display:inline-block; font-size:10px; font-weight:900; padding:2px 8px; border-radius:999px; border:1px solid rgba(22, 163, 74, 0.25); background: rgba(22, 163, 74, 0.10); color: #065f46; } .potwGrid{ display:grid; grid-template-columns: repeat(5, 1fr); gap:12px; } @media (max-width: 900px){ .potwGrid{ grid-template-columns: repeat(2, 1fr); } } .potwCardBtn{ width:100%; text-align:left; cursor:pointer; border:2px solid var(--teamColor, var(--border)); background:#f8fafc; border-radius:14px; padding:10px; display:flex; gap:10px; align-items:center; } .potwCardBtn:hover{ border-color: var(--teamColor, rgba(37,99,235,0.45)); transform: translateY(-1px); } .potwPhoto{ width:44px; height:44px; border-radius:999px; object-fit:cover; border:1px solid var(--border); background:white; flex:0 0 auto; } .potwText{ min-width:0; } .potwName{ font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .potwTeam{ margin-top:2px; } .potwLink{ margin-top:6px; font-size:12px; font-weight:900; color: var(--royal); } .homeMapWrap img{ width:100%; max-height:520px; object-fit:contain; border-radius:14px; border:1px solid var(--border); background:white; } /* ========================= Schedule v4 (logos + alignment + colors) ========================= */ .scheduleDateSection{ margin-bottom: 26px; } .scheduleDateHeader{ font-size: 20px; font-weight: 950; margin: 4px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--border); } .scheduleGameCard{ display: grid; grid-template-columns: 140px 1fr 110px; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); } @media (max-width: 820px){ .scheduleGameCard{ grid-template-columns: 1fr; gap: 10px; padding: 14px 0; } .scheduleStatus{ text-align: left; } } .scheduleGameMeta{ color: var(--muted); font-weight: 800; line-height: 1.1; } .scheduleGameMeta .metaTop{ font-size: 14px; } .scheduleGameMeta .metaBottom{ font-size: 13px; margin-top: 6px; } /* Filters (keep) */ .scheduleFilters{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:14px; } .scheduleFilters select{ padding:8px 12px; border-radius:999px; border:1px solid var(--border); font-weight:800; background:white; } /* ===== Schedule toggle ===== */ .scheduleToggle{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin: 10px 0 14px; } .toggleBtn{ border:1px solid var(--border); background:#fff; border-radius:999px; padding:8px 12px; font-weight:900; cursor:pointer; color:#0f172a; } .toggleBtn.active, .toggleBtn:hover{ border-color: rgba(37,99,235,.35); background: rgba(37,99,235,.10); color:#1d4ed8; } /* ========================= Standings: modern table + alignment + team logo/color links ========================= */ .standingsTopBar{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .standingsTitle{ font-size: 20px; font-weight: 950; margin: 0; } .standingsTableScroll{ border: 1px solid var(--border); border-radius: 16px; overflow: hidden; /* rounds the table corners */ background: #fff; } .standingsTableModern{ width: 100%; border-collapse: collapse; min-width: 680px; /* keeps columns aligned on desktop */ } .standingsTableModern thead th{ background: linear-gradient(180deg, rgba(37,99,235,0.08), rgba(37,99,235,0.02)); border-bottom: 1px solid var(--border); padding: 12px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 950; } .standingsTableModern tbody td{ padding: 12px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .standingsTableModern tbody tr:nth-child(even){ background: rgba(15,23,42,0.02); } .standingsTableModern tbody tr:hover{ background: rgba(37,99,235,0.06); } .standingsTableModern .colTeam{ width: 40%; } .standingsTableModern .colNum{ width: 10%; text-align: right; /* fixes alignment */ font-variant-numeric: tabular-nums; } .standingsTableModern .colRd{ font-weight: 950; } /* Team cell: logo + link */ .standingsTeamCell{ display:flex; align-items:center; gap: 10px; min-width: 0; } .standingsTeamLogo{ width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; } .standingsTeamLink{ font-weight: 950; text-decoration: none; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .standingsTeamLink:hover{ color: var(--royal); } /* Cosmetic: highlight top 2 */ .standingsTop1{ outline: 2px solid rgba(37,99,235,0.22); outline-offset: -2px; } .standingsTop2{ outline: 2px solid rgba(37,99,235,0.14); outline-offset: -2px; } /* Standings sorting cues */ .standingsTableModern .sortTh{ cursor: pointer; user-select: none; position: relative; padding-right: 22px; /* space for arrow */ } .standingsTableModern .sortTh::after{ content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: 0.35; } .standingsTableModern .sortActiveDesc::after{ content: "↓"; opacity: 0.9; } .standingsTableModern .sortActiveAsc::after{ content: "↑"; opacity: 0.9; } .colStreak{ width: 12%; text-align: center; font-variant-numeric: tabular-nums; font-weight: 900; } /* ========================= Standings: playoff highlights + clinched badge + rank + cut line ========================= */ .standingsTableModern .colRank{ width: 52px; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 900; } .standingsTeamText{ display:flex; align-items:center; gap:10px; min-width:0; } .clinchedBadge{ display:inline-flex; align-items:center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 950; border: 1px solid rgba(22,163,74,0.25); background: rgba(22,163,74,0.10); color: #065f46; white-space: nowrap; } .playoffRow{ background: rgba(37,99,235,0.045) !important; } .cutLineRow td{ padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--border); } .cutLineLabel{ display:block; text-align:center; font-size: 12px; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } /* Sorting cues (if you haven’t already added these) */ .standingsTableModern .sortTh{ cursor: pointer; user-select: none; position: relative; padding-right: 22px; } .standingsTableModern .sortTh::after{ content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: 0.35; } .standingsTableModern .sortActiveDesc::after{ content: "↓"; opacity: 0.9; } .standingsTableModern .sortActiveAsc::after{ content: "↑"; opacity: 0.9; } .standingsTableModern .colStreak{ width: 12%; text-align: center; font-variant-numeric: tabular-nums; font-weight: 900; } /* Standings header: align "Team" with logo + name cells */ .standingsTeamHeader{ display:flex; align-items:center; gap:10px; } .standingsTeamHeaderSpacer{ width: 28px; height: 28px; flex: 0 0 auto; } /* ========================= Rules Page — Elite Accordion (Tournament-style) Requires: rules.html uses .rulesHeroElite, .rulesAcc, .rulesAccSummary, .ruleCardElite, etc. ========================= */ .rulesHeroElite{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; position:relative; overflow:hidden; box-shadow: 0 10px 26px rgba(15,23,42,.06); } .rulesHeroElite::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(37,99,235,0.10), rgba(37,99,235,0)); pointer-events:none; } .centeredRulesHero{ text-align:center; font-size:20px; font-weight:950; letter-spacing:.3px; padding:18px 12px; position:relative; z-index:1; } .centeredRulesHero .rulesHeroLine2{ display:block; margin-top:6px; font-size:13px; font-weight:800; color:var(--muted); letter-spacing:.2px; } /* Accordions wrapper */ .rulesAccordions{ display:grid; gap:12px; } /*

container */ .rulesAcc{ background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow: 0 10px 26px rgba(15,23,42,.06); } /*

row */ .rulesAccSummary{ list-style:none; cursor:pointer; display:grid; grid-template-columns: 44px 1fr 22px; gap:10px; align-items:center; padding:12px 12px; background: linear-gradient(180deg, #ffffff, #fbfdff); border-bottom:1px solid var(--border); } .rulesAccSummary::-webkit-details-marker{ display:none; } /* Left icon */ .rulesAccIcon{ width:34px; height:34px; display:grid; place-items:center; border-radius:12px; background: rgba(37,99,235,0.10); border: 1px solid rgba(37,99,235,0.18); font-size:16px; } /* Title + sub */ .rulesAccText{ min-width:0; } .rulesAccTitle{ display:block; font-weight:950; font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:#0f172a; } .rulesAccSub{ display:block; margin-top:2px; font-size:12px; } /* Chevron */ .rulesAccChevron{ font-weight:950; opacity:.55; transition: transform .15s ease; text-align:right; } .rulesAcc[open] .rulesAccChevron{ transform: rotate(180deg); } /* Body */ .rulesAccBody{ padding:12px; display:grid; gap:10px; position:relative; } /* Left accent bar */ .rulesAccBody::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px; background: var(--royal); border-radius:999px; opacity:.85; } /* Elite rule cards */ .ruleCardElite{ border:1px solid var(--border); background:#f8fafc; border-radius:12px; padding:10px 12px; margin-left:10px; /* clears accent bar */ } .ruleImportantElite{ background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.25); } .ruleTitleElite{ font-weight:950; font-size:13px; margin-bottom:6px; color:#0f172a; } .ruleBodyElite{ font-size:13px; line-height:1.45; color:#0f172a; } /* Footer note inside an accordion */ .rulesFooterNoteElite{ margin-left:10px; margin-top:6px; } .rulesFooterLineElite{ height:1px; background:var(--border); margin:10px 0; } /* If you still have any

inside rules bodies, tighten them up */ .rulesAccBody ul{ margin: 6px 0 0 22px; } .rulesAccBody li{ margin: 6px 0; } /* Mobile polish */ @media (max-width: 520px){ .centeredRulesHero{ font-size:18px; } .rulesAccSummary{ grid-template-columns: 42px 1fr 20px; padding: 11px; } .rulesAccIcon{ width:32px; height:32px; } } /* ========================= Playoffs Bracket Styling (v2) - connector lines (desktop) - scores beside team names - explicit BYE boxes for S1/S2 ========================= */ .bracketGrid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 980px){ .bracketGrid{ grid-template-columns: 1fr; } } /* Columns */ .brCol{ position: relative; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: 0 10px 26px rgba(15,23,42,.06); overflow:hidden; } .brColTitle{ padding: 10px 12px; font-weight: 950; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #ffffff, #fbfdff); } .brColBody{ padding: 10px 12px; display:grid; gap: 10px; } /* Game boxes */ .brGame{ position: relative; border: 1px solid var(--border); border-radius: 12px; background: #f8fafc; padding: 10px; } .brFinal{ background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.25); } .brMissing{ background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.25); } .brBye{ background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.25); } /* Meta */ .brMeta{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom: 8px; } .brMetaTop{ font-weight: 950; font-size: 12px; color: #0f172a; } .brMetaBottom{ font-size: 12px; color: var(--muted); } /* Teams */ .brTeams{ display:grid; gap: 8px; } .brTeamRow{ display:flex; gap: 8px; align-items:center; min-width:0; } .brLogo{ width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; } .brLogoBlank{ width: 24px; height: 24px; display:inline-block; flex: 0 0 auto; } .brTeamMain{ min-width:0; flex: 1 1 auto; } .brTeamName{ font-weight: 950; text-decoration:none; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; display:inline-block; } .brTeamName:hover{ color: var(--royal); } .brTeamScore{ margin-left: auto; font-weight: 950; font-size: 14px; color: #0f172a; padding-left: 8px; } /* ========================= Connector Lines (desktop only) Simple but clean: horizontal stubs + vertical spine in middle columns. ========================= */ @media (min-width: 981px){ /* horizontal connector stubs from round1 -> semis */ .brChamp .brRound1 .brGame::after, .brCons .brRound1 .brGame::after{ content:""; position:absolute; right:-12px; top:50%; width:12px; height:2px; background: var(--border); transform: translateY(-50%); } /* horizontal connector stubs from semis -> final */ .brChamp .brSemis .brGame::after, .brCons .brSemis .brGame::after{ content:""; position:absolute; right:-12px; top:50%; width:12px; height:2px; background: var(--border); transform: translateY(-50%); } /* vertical spine on Semis column (gives bracket feel) */ .brChamp .brSemis::before, .brCons .brSemis::before{ content:""; position:absolute; left:-12px; top: 56px; bottom: 56px; width:2px; background: var(--border); } /* vertical spine on Final column */ .brChamp .brFinal::before, .brCons .brFinal::before{ content:""; position:absolute; left:-12px; top: 56px; bottom: 56px; width:2px; background: var(--border); } } /* ========================= Playoffs Bracket Styling (TRUE ALIGNMENT) - fixed row slots per column - connectors that line up with slots ========================= */ .bracketAligned{ margin-top: 6px; } .brAlignGrid{ display:grid; gap: 14px; align-items: stretch; } /* 3 columns (championship) */ .brCols3{ grid-template-columns: 1fr 1fr 1fr; } /* 2 columns (consolation) */ .brCols2{ grid-template-columns: 1fr 1fr; } @media (max-width: 980px){ .brCols3, .brCols2{ grid-template-columns: 1fr; } } /* Column card */ .brAlignCol{ position: relative; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: 0 10px 26px rgba(15,23,42,.06); overflow:hidden; } .brAlignColTitle{ padding: 10px 12px; font-weight: 950; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #ffffff, #fbfdff); } /* Slot grid inside each column */ .brAlignSlots{ position: relative; display:grid; gap: 12px; padding: 12px; min-height: 420px; /* gives room; adjusts by content naturally */ } @media (max-width: 980px){ .brAlignSlots{ min-height: auto; } } /* Each slot holds one game/bye box */ .brSlot{ position: relative; display:flex; align-items: center; } /* Game boxes (re-use your v2 visuals) */ .brGame{ width: 100%; border: 1px solid var(--border); border-radius: 12px; background: #f8fafc; padding: 10px; } .brFinal{ background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.25); } .brBye{ background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.25); } .brMeta{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom: 8px; } .brMetaTop{ font-weight: 950; font-size: 12px; color: #0f172a; } .brMetaBottom{ font-size: 12px; color: var(--muted); } .brTeams{ display:grid; gap: 8px; } .brTeamRow{ display:flex; gap: 8px; align-items:center; min-width:0; } .brLogo{ width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; } .brLogoBlank{ width: 24px; height: 24px; display:inline-block; flex: 0 0 auto; } .brTeamMain{ min-width:0; flex: 1 1 auto; } .brTeamName{ font-weight: 950; text-decoration:none; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; display:inline-block; } .brTeamName:hover{ color: var(--royal); } .brTeamScore{ margin-left: auto; font-weight: 950; font-size: 14px; color: #0f172a; padding-left: 8px; } /* ========================= TRUE CONNECTORS (desktop) - Draw horizontal stubs from each slot to next column - Draw vertical spine inside next column to connect paired feeders ========================= */ @media (min-width: 981px){ /* Horizontal stubs from slot -> next column */ .brChampAligned .brAlignCol:nth-child(1) .brSlot::after, .brConsAligned .brAlignCol:nth-child(1) .brSlot::after{ content:""; position:absolute; right:-14px; top:50%; width:14px; height:2px; background: var(--border); transform: translateY(-50%); } .brChampAligned .brAlignCol:nth-child(2) .brSlot::after{ content:""; position:absolute; right:-14px; top:50%; width:14px; height:2px; background: var(--border); transform: translateY(-50%); } /* Championship: vertical spine for Semis column (connect slot0+slot1 pair and slot2+slot3 pair) We know Semis has 2 slots; we draw one spine that spans the column body. */ .brChampAligned .brAlignCol:nth-child(2) .brAlignSlots::before{ content:""; position:absolute; left:-14px; top: 24px; bottom: 24px; width:2px; background: var(--border); } /* Championship: vertical spine for Final column */ .brChampAligned .brAlignCol:nth-child(3) .brAlignSlots::before{ content:""; position:absolute; left:-14px; top: 24px; bottom: 24px; width:2px; background: var(--border); } /* Consolation: vertical spine for Round 2 column */ .brConsAligned .brAlignCol:nth-child(2) .brAlignSlots::before{ content:""; position:absolute; left:-14px; top: 24px; bottom: 24px; width:2px; background: var(--border); } } /* ===== Modal: narrower + better layout ===== */ .modalCard{ width: min(640px, 96vw); /* was 860px-ish; this reduces whitespace */ padding: 16px; } .profileHeader{ display: grid; /* instead of a loose flex wrap */ grid-template-columns: 110px 1fr; gap: 14px; align-items: start; } @media (max-width: 520px){ .profileHeader{ grid-template-columns: 1fr; } .profilePhoto img{ width: 96px; height: 96px; } } .profileLines{ width: 100%; max-width: 100%; } /* Home: Welcome + Countdown banner */ .homeWelcome{ display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; } .homeCountdown{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.18); width: min(520px, 100%); } .homeCountdownTimer{ font-size: 1.25rem; font-weight: 800; letter-spacing: 0.5px; } /* Players of the Week grid: 2 rows of 5 on desktop */ .homePotwGrid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; } @media (min-width: 720px){ .homePotwGrid{ grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Home snapshots: schedule-like mini cards */ .miniGameCard{ border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 10px 12px; background: rgba(0,0,0,0.12); margin-top: 10px; } .miniGameMeta{ margin-bottom: 8px; } .miniGameBody{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .miniTeams{ display:flex; flex-direction:column; gap:8px; } .miniTeamRow{ display:flex; align-items:center; gap:10px; } .teamLogoMini{ width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; } .miniTeamName{ font-weight: 800; line-height: 1.1; } .miniRight{ text-align:right; min-width: 92px; } .miniScore{ font-size: 1.05rem; } .miniStatus{ margin-top: 4px; } /* Standings snapshot: logo + colored name */ .miniTeamCell{ display:flex; align-items:center; gap:10px; } .miniTeamCellName{ font-weight: 800; } .teamNameColored{ font-weight: 800; } /* =========================== WBL HOME POLISH OVERRIDES (paste at bottom of styles.css) =========================== */ :root{ --wbl-blue: #1e3fa8; /* Royal Blue */ --wbl-blue-soft: #e8efff; /* Light accent */ } /* Card accents */ .card{ border: 2px solid rgba(30,63,168,.35); border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.06); } /* Make card spacing feel intentional */ .cardBody{ padding: 22px; } /* Section headers: cleaner + centered title */ .homeSectionHead{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid rgba(30,63,168,.22); } .homeSectionHead h3{ margin:0; text-align:center; width:100%; font-weight: 900; letter-spacing: .3px; } /* Keep link pill on the right without breaking centered header */ .homeSectionHead .linkPill{ white-space: nowrap; flex: 0 0 auto; } /* Give a subtle blue tint to big “hero” / welcome card */ .homeWelcome{ background: linear-gradient(180deg, rgba(30,63,168,.06), rgba(255,255,255,0)); border-radius: 12px; padding: 10px; } /* Primary button: royal blue */ .btnPrimary{ background: var(--wbl-blue); border-color: var(--wbl-blue); } .btnPrimary:hover{ filter: brightness(1.08); } /* Link pills: slight blue accent */ .linkPill{ border-color: rgba(30,63,168,.35); } .linkPill:hover{ border-color: rgba(30,63,168,.65); } /* Poll: two-column on desktop (options left, results right) */ #pollWrap{ display:grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 900px){ #pollWrap{ grid-template-columns: 1.15fr .85fr; align-items:start; } #pollResults{ margin-top:0 !important; } } /* Poll option cards: slightly more structured */ .pollOptions{ display:flex; flex-direction:column; gap: 10px; } .pollOpt{ border: 1px solid rgba(30,63,168,.22); border-radius: 12px; padding: 10px 12px; background: #fff; } .pollOpt:hover{ border-color: rgba(30,63,168,.45); box-shadow: 0 4px 10px rgba(0,0,0,.05); } .pollOpt input{ transform: translateY(1px); } /* Poll bars: royal blue */ .pollBar{ background:#f1f3f7; height:10px; border-radius:6px; overflow:hidden; margin-top:6px; } .pollBarFill{ background: var(--wbl-blue); height:100%; transition: width .4s ease; } /* Schedule/standings “snapshots”: tighten alignment slightly */ #standingsMini th, #standingsMini td{ vertical-align: middle; } #standingsMini td.num, #standingsMini th.num{ text-align: right; font-variant-numeric: tabular-nums; } .miniTeamCell{ display:flex; align-items:center; gap:10px; } .teamLogoMini{ width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(30,63,168,.25); } /* Slightly stronger “card within card” look for news items */ #newsList .card{ border-width: 1px; border-color: rgba(30,63,168,.22); box-shadow: 0 4px 12px rgba(0,0,0,.04); } /* Mobile: reduce padding a bit */ @media (max-width: 520px){ .cardBody{ padding: 16px; } } /* --- Poll layout v2: question/options left, results right --- */ .pollGrid{ display:grid; grid-template-columns: 1fr; gap: 16px; } .pollQuestion{ font-weight: 900; font-size: 1.05rem; margin-bottom: 10px; } .pollActions{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; } @media (min-width: 900px){ .pollGrid{ grid-template-columns: 1.05fr .95fr; align-items:start; } .pollRight{ padding-left: 12px; border-left: 2px solid rgba(30,63,168,.18); } } /* Ensure poll options are always clickable */ .pollOpt{ position: relative; z-index: 1; cursor: pointer; } .pollOpt input{ cursor: pointer; } /* Add breathing room between last option and buttons */ .pollActions{ margin-top: 18px; /* was ~12px */ padding-top: 6px; } /* =========================== COUNTDOWN: Opening Day Energy (paste at bottom of styles.css) =========================== */ .homeCountdown{ border: 2px solid rgba(30,63,168,.25); border-radius: 14px; padding: 12px 14px; background: linear-gradient(180deg, rgba(30,63,168,.08), rgba(255,255,255,0)); position: relative; overflow: hidden; } /* subtle moving sheen */ .homeCountdown::before{ content:""; position:absolute; top:-40%; left:-60%; width: 80%; height: 180%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0)); transform: rotate(20deg); opacity: .35; animation: wblSheen 3.2s ease-in-out infinite; pointer-events:none; } @keyframes wblSheen{ 0% { left:-70%; opacity:.0; } 15% { opacity:.28; } 55% { opacity:.22; } 100% { left:120%; opacity:0; } } .homeCountdownLabel{ font-weight: 800; letter-spacing: .2px; } .homeCountdownTimer{ margin-top: 6px; font-weight: 950; font-variant-numeric: tabular-nums; letter-spacing: .6px; line-height: 1.05; font-size: clamp(22px, 3.2vw, 34px); color: var(--wbl-blue); text-shadow: 0 1px 0 rgba(255,255,255,.6); } /* “Opening Day” mode: more hype */ .homeCountdown.isOpening{ border-color: rgba(30,63,168,.55); background: radial-gradient(circle at 20% 0%, rgba(30,63,168,.16), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(30,63,168,.10), rgba(255,255,255,0)); box-shadow: 0 10px 24px rgba(30,63,168,.10); } .homeCountdown.isOpening .homeCountdownTimer{ animation: wblPulse 1.25s ease-in-out infinite; } @keyframes wblPulse{ 0% { transform: translateY(0) scale(1); filter: brightness(1); } 50% { transform: translateY(-1px) scale(1.02); filter: brightness(1.12); } 100% { transform: translateY(0) scale(1); filter: brightness(1); } } /* “Next Game Day” mode: calmer */ .homeCountdown.isNext{ border-color: rgba(30,63,168,.28); } .homeCountdown.isNext .homeCountdownTimer{ animation: wblTick 1s steps(1) infinite; } @keyframes wblTick{ 0% { opacity: 1; } 50% { opacity: .92; } 100% { opacity: 1; } } /* Mobile: keep it tight */ @media (max-width: 520px){ .homeCountdown{ padding: 10px 12px; } } /* Center specific home section titles */ #potwGrid, #pollWrap, #newsList { /* no layout changes — just here for clarity */ } #potwGrid, #pollWrap, #newsList { } /* Players of the Week title */ #potwGrid ~ *, .homeSectionHead h3:only-child { text-align: center; } /* More precise targeting */ .docSection h3{ text-align: center; width: 100%; } /* Keep link pills aligned right */ .homeSectionHead{ justify-content: center; } .homeSectionHead .linkPill{ position: absolute; right: 0; } /* --- Royal blue accent for Poll question --- */ .pollQuestion{ color: var(--wbl-blue); } /* --- Royal blue for Key League Dates content --- */ #newsList .cardBody{ color: var(--wbl-blue); } /* Fix header layout inside home cards */ .homeSectionHead{ position: relative; display: flex; align-items: center; justify-content: center; /* keeps title centered */ } /* Style the right-side pill link */ .homeSectionHead .linkPill{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 0.85rem; text-decoration: none; background: rgba(30,63,168,.08); color: var(--wbl-blue); border: 1px solid rgba(30,63,168,.25); transition: all .15s ease; } .homeSectionHead .linkPill:hover{ background: var(--wbl-blue); color: #fff; } /* Smaller gallery thumbnails */ .galleryMedia{ aspect-ratio: 16 / 11; } .galleryMedia img, .galleryMedia iframe{ width: 100%; height: 100%; object-fit: cover; display: block; } /* =============================== GALLERY GRID — 4 COLUMN LAYOUT ================================== */ .galleryGrid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; } /* Tablet */ @media (max-width: 1024px){ .galleryGrid{ grid-template-columns: repeat(2, 1fr); } } /* Mobile */ @media (max-width: 640px){ .galleryGrid{ grid-template-columns: 1fr; } } /* =============================== SMALLER THUMBNAILS ================================== */ .galleryMedia{ aspect-ratio: 4 / 3; /* consistent compact shape */ overflow: hidden; border-radius: 12px; } .galleryMedia img, .galleryMedia iframe{ width: 100%; height: 100%; object-fit: cover; display: block; } /* Gallery: team-color border accent on hover */ .galleryItem{ border: 1px solid rgba(30,63,168,.16); border-radius: 14px; overflow: hidden; background: #fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .galleryItem:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.08); border-color: var(--team-accent, rgba(30,63,168,.55)); } /* ========================= MOBILE ONLY: index header fixes + hamburger spacing (safe — does not affect desktop) ========================= */ @media (max-width: 820px){ /* 1) Hamburger lines closer together */ .navToggle span{ margin: 4px 10px; /* tighter than original 6px */ } /* 2) Home snapshot headers: Stack title + pill and center them */ .homeSectionHead{ display: flex; flex-direction: column; align-items: center; /* center everything */ justify-content: flex-start; gap: 8px; position: static; /* cancels absolute positioning */ text-align: center; } .homeSectionHead h3{ width: auto; text-align: center; } .homeSectionHead .linkPill{ position: static; right: auto; top: auto; transform: none; display: inline-flex; align-self: center; /* center the pill */ } } /* ========================================================= MATCHUP ROW REBUILD (desktop-first, safe lanes, no clipping) Applies to schedule page cards only (scheduleGameCard) ========================================================= */ .scheduleGameCard .scheduleMatchupGrid{ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 14px; width: 100%; min-width: 0; /* critical: allow children to shrink without overflowing */ } .scheduleGameCard .scheduleTeam{ display: flex; align-items: center; gap: 10px; min-width: 0; /* critical for ellipsis */ } .scheduleGameCard .scheduleTeam.sideLeft{ justify-content: flex-end; text-align: right; } .scheduleGameCard .scheduleTeam.sideRight{ justify-content: flex-start; text-align: left; } .scheduleGameCard .teamLogo{ width: 34px; height: 34px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; } .scheduleGameCard .scheduleTeamLink{ display: inline-block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* desktop: keep one line */ font-weight: 900; } .scheduleGameCard .scheduleScore{ font-weight: 950; text-align: center; white-space: nowrap; padding: 0 6px; min-width: 44px; } .scheduleGameCard .vsLabel{ font-weight: 950; } /* Mobile: stack cleanly */ @media (max-width: 520px){ .scheduleGameCard .scheduleMatchupGrid{ grid-template-columns: 1fr; row-gap: 10px; justify-items: center; } .scheduleGameCard .scheduleTeam{ justify-content: center; text-align: center; } .scheduleGameCard .scheduleTeamLink{ white-space: normal; /* allow wrapping on small screens */ text-overflow: clip; overflow: visible; text-align: center; } .scheduleGameCard .scheduleScore{ padding: 0; } } /* ========================= Matchup row layout (Schedule + Home snapshot) Keeps: [Team A] [@/score] [Team B] on ONE ROW (desktop) ========================= */ .scheduleMatchupGrid{ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 14px; } .scheduleTeam{ display: inline-flex; align-items: center; gap: 10px; min-width: 0; /* allows ellipsis instead of pushing layout */ } .scheduleTeam.sideLeft{ justify-content: flex-end; } .scheduleTeam.sideRight{ justify-content: flex-start; } /* Force logo + name to behave like one unit and not wrap weirdly */ .scheduleTeamLink{ display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .teamLogo{ width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; } /* Center column (@ or score) */ .scheduleScore{ text-align: center; font-weight: 950; min-width: 56px; font-variant-numeric: tabular-nums; } .vsLabel{ font-weight: 950; } /* Mobile: stack cleanly */ @media (max-width: 520px){ .scheduleMatchupGrid{ grid-template-columns: 1fr; row-gap: 8px; justify-items: center; } .scheduleTeam.sideLeft, .scheduleTeam.sideRight{ justify-content: center; } .scheduleScore{ min-width: 0; } } /* Home snapshot: side-by-side matchup inside miniGameCard */ .miniMatchupRow{ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 12px; min-width: 0; } .miniTeamSide{ display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .miniTeamLeft{ justify-content: flex-start; } .miniTeamRight{ justify-content: flex-end; } .miniTeamSide .miniTeamName{ min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .miniMid{ display: inline-flex; align-items: center; justify-content: center; min-width: 36px; } .miniScore{ font-weight: 950; font-variant-numeric: tabular-nums; } .miniStatus{ margin-top: 6px; text-align: right; } /* Schedule mobile override: do NOT stack matchup in portrait */ @media (max-width: 520px){ .scheduleGameCard .scheduleMatchupGrid{ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; justify-items: stretch !important; row-gap: 0 !important; column-gap: 10px; } .scheduleGameCard .scheduleTeam.sideLeft{ justify-content: flex-end; text-align: right; } .scheduleGameCard .scheduleTeam.sideRight{ justify-content: flex-start; text-align: left; } .scheduleGameCard .teamLogo{ width: 22px; height: 22px; border-radius: 7px; } .scheduleGameCard .scheduleScore{ min-width: 34px; padding: 0 4px; } .scheduleGameCard .scheduleTeamLink{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } } /* INDEX ONLY: make schedule snapshot cards white */ #thisWeekGames .miniGameCard, #lastWeekFinals .miniGameCard{ background: #ffffff !important; border: 1px solid var(--border) !important; } /* ========================= PRACTICE DRILLS ========================= */ .drillsTopBar{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; } .drillsFilters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } /* Filter pills */ .drillsFilters select, .drillsFilters input{ padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); font-weight: 800; background: white; } /* 4-across grid (desktop) */ .drillsGrid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } /* Responsive fallbacks */ @media (max-width: 1200px){ .drillsGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px){ .drillsGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px){ .drillsGrid{ grid-template-columns: 1fr; } } .drillCard{ display:block; text-decoration:none; color: var(--text); border: 1px solid rgba(30,63,168,.22); border-radius: 14px; overflow:hidden; background: #fff; box-shadow: 0 10px 26px rgba(15,23,42,.06); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .drillCard:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(15,23,42,.10); border-color: rgba(30,63,168,.45); } /* Keep square thumbnails (you can change to 4/3 later if desired) */ .drillThumb{ aspect-ratio: 1 / 1; background: rgba(37,99,235,.06); } .drillThumb img{ width:100%; height:100%; object-fit: cover; display:block; } /* Slightly smaller card body */ .drillBody{ padding: 10px; } .drillMetaRow{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 6px; } .drillPill{ display:inline-flex; align-items:center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 950; border: 1px solid rgba(30,63,168,.25); background: rgba(30,63,168,.08); color: #1e3fa8; text-transform: capitalize; } .drillPillMuted{ border-color: rgba(15,23,42,.14); background: rgba(15,23,42,.04); color: var(--muted); } /* Slightly smaller typography */ .drillTitle{ font-weight: 950; font-size: 13px; line-height: 1.25; } .drillDesc{ margin-top: 6px; line-height: 1.35; } .siteHeader h1 { color: #1e40af; /* darker royal blue */ font-weight: 900; text-shadow: 0 1px 2px rgba(0,0,0,0.12); } /* ========================================= WBL HEADER – Gradient + Watermark Logo Paste at bottom of styles.css ========================================= */ .siteHeader{ position: relative; padding-top: 10px; padding-bottom: 18px; /* Soft but stronger gradient */ background: linear-gradient(180deg, #ffffff 0%, #e8effa 55%, #e1eaf7 100%); border-top: 4px solid #1e40af; border-bottom: 1px solid rgba(0,0,0,.08); box-shadow: 0 6px 18px rgba(0,0,0,.08); overflow: visible; /* important so watermark doesn't spill */ } /* Watermark logo (behind header content) */ .siteHeader::before{ content:""; position:absolute; inset:0; pointer-events:none; /* watermark image */ background: url("./logo.png") center 55% / 220px 220px no-repeat; /* watermark strength */ opacity: .08; /* keep it clean/modern */ filter: grayscale(10%); transform: rotate(-8deg); } /* Ensure header content stays above the watermark */ .siteHeader > *{ position: relative; z-index: 1; } /* Optional: slightly stronger title */ .siteHeader h1{ font-weight: 900; letter-spacing: .03em; } /* Optional: soften tagline */ .siteHeader .tagline{ color: rgba(0,0,0,.65); font-weight: 700; } /* Hide centered logo since we now use watermark */ .siteHeader .logoImage{ display: none; } /* Add spacing between top nav and page title */ .siteHeader .brandCenter{ margin-top: 18px; } /* ========================================= HEADER POLISH – Optional Enhancement Delete this entire block to revert ========================================= */ /* 1) Slightly stronger title presence */ .siteHeader h1{ font-size: 30px; letter-spacing: .04em; } /* 2) Subtle divider under title */ .siteHeader .brandCenter{ position: relative; } .siteHeader .brandCenter::after{ content:""; display:block; width: 60px; height: 3px; background: #1e40af; margin: 14px auto 0 auto; border-radius: 3px; opacity: .35; } /* 3) Refine watermark layering */ .siteHeader::before{ background-position: center 65%; opacity: .10; } /* 4) Modern nav hover effect */ .siteHeader .nav a{ position: relative; transition: color .2s ease; } .siteHeader .nav a::after{ content:""; position:absolute; left:0; bottom:-6px; width:100%; height:2px; background:#1e40af; transform:scaleX(0); transform-origin:left; transition:transform .2s ease; opacity:.6; } .siteHeader .nav a:hover{ color:#1e40af; } .siteHeader .nav a:hover::after{ transform:scaleX(1); } /* ========================================= HEADER EXTRA POLISH – Optional Add-on Delete this entire block to revert ========================================= */ /* 1) Very subtle watermark motion (desktop), respects reduced motion */ @media (prefers-reduced-motion: no-preference){ .siteHeader::before{ animation: headerWatermarkDrift 26s ease-in-out infinite; } @keyframes headerWatermarkDrift{ 0% { transform: rotate(-8deg) translate(0px, 0px) scale(1); } 50% { transform: rotate(-8deg) translate(10px, -6px) scale(1.02); } 100% { transform: rotate(-8deg) translate(0px, 0px) scale(1); } } } /* 2) Mobile tuning: slightly tighter header + better type balance */ @media (max-width: 520px){ .siteHeader{ padding-top: 18px; padding-bottom: 18px; } .siteHeader h1{ font-size: 22px; /* overrides the 30px polish on small screens */ letter-spacing: .03em; } .siteHeader .tagline{ font-size: 12px; } /* keep divider a touch closer on mobile */ .siteHeader .brandCenter::after{ margin-top: 10px; } /* watermark slightly smaller/softer on mobile */ .siteHeader::before{ background-size: 210px 210px; opacity: .08; } } /* 3) CSS-only season badge (no HTML changes) Adds a small pill before the tagline */ .siteHeader .tagline{ display: inline-flex; align-items: center; gap: 8px; } .siteHeader .tagline::before{ content: "2026 SEASON"; display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(30,64,175,.22); background: rgba(255,255,255,.55); color: rgba(30,64,175,.88); font-weight: 900; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } /* 4) Slightly more premium nav spacing + hit area */ .siteHeader .nav{ gap: 14px; /* if your nav uses flex gap */ } .siteHeader .nav a{ padding: 8px 10px; /* improves tap targets */ border-radius: 10px; } .siteHeader .nav a:hover{ background: rgba(255,255,255,.35); /* subtle, clean hover “chip” */ } /* ========================================= iOS WATERMARK COMPOSITING FIX (MOBILE ONLY) Clean, single-purpose fix ========================================= */ @media (max-width: 820px){ /* When menu is open, remove the composited watermark layer */ html.navOpen .siteHeader::before{ opacity: 0 !important; animation: none !important; transform: none !important; filter: none !important; } /* Hide season badge while menu is open (also pseudo-element) */ html.navOpen .siteHeader .tagline::before{ opacity: 0 !important; } } /* ========================================= MOBILE NAV OPEN — SINGLE TARGETED PATCH (iPhone Chrome) Fixes: - header title / divider bleeding above overlay - hamburger bars invisible when open Paste at VERY BOTTOM of styles.css ========================================= */ @media (max-width: 820px){ /* 1) Make the overlay truly opaque in the OPEN state */ html.navOpen .navOverlay{ opacity: 1 !important; background: #050914 !important; } /* 2) Remove the header “line” artifacts while open */ html.navOpen .siteHeader{ border-bottom: 0 !important; box-shadow: none !important; } /* 3) Keep hamburger readable while open */ html.navOpen .navToggle{ background: rgba(0,0,0,0.35) !important; border: 1px solid rgba(255,255,255,0.22) !important; } html.navOpen .navToggle span{ background: #ffffff !important; } /* 4) Kill ONLY the composited header watermark layer while open (the root cause) */ html.navOpen .siteHeader::before{ opacity: 0 !important; animation: none !important; transform: none !important; filter: none !important; } } /* ========================================================= MOBILE NAV OPEN — HARD OVERRIDE (PASTE LAST) Fixes: 1) Header/title + divider bleeding through 2) Hamburger bars not turning white on open 3) Overlay/menu ending up behind content (iPhone Chrome/WebKit) ========================================================= */ @media (max-width: 820px){ /* While nav is open: remove anything “header-ish” that can show through */ html.navOpen .siteHeader{ background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Hide ONLY the page title area (keeps hamburger/nav functional) */ html.navOpen .siteHeader .brandCenter{ display: none !important; } /* Kill header pseudo-elements while open (watermark, etc.) */ html.navOpen .siteHeader::before, html.navOpen .siteHeader::after{ opacity: 0 !important; animation: none !important; transform: none !important; filter: none !important; } /* Ensure overlay is truly on top and opaque */ html.navOpen .navOverlay{ display: block !important; position: fixed !important; inset: 0 !important; background: #050914 !important; opacity: 1 !important; pointer-events: auto !important; z-index: 999999 !important; transform: translateZ(0) !important; /* helps iPhone/WebKit stacking */ } /* Ensure menu panel is above overlay */ html.navOpen .nav{ position: fixed !important; left: 12px !important; right: 12px !important; top: 70px !important; z-index: 1000000 !important; transform: translateZ(0) !important; } /* Keep hamburger visible and make bars WHITE when open */ html.navOpen .navToggle{ position: fixed !important; top: 12px !important; left: 12px !important; z-index: 1000001 !important; background: rgba(0,0,0,0.35) !important; border: 1px solid rgba(255,255,255,0.22) !important; border-radius: 12px !important; } html.navOpen .navToggle span{ background: #ffffff !important; opacity: 1 !important; } /* Lock scroll behind the overlay */ html.navOpen body{ overflow: hidden !important; touch-action: none !important; } } /* ========================================= HAMBURGER BARS – FORCE RENDER + WHITE WHEN OPEN (based on working tournament code) ========================================= */ @media (max-width: 820px){ .navToggle span{ display: block !important; width: 20px !important; /* critical: prevents span collapse */ height: 2px !important; opacity: 1 !important; margin: 3px 0 !important; border-radius: 2px !important; background: #0f172a !important; } html.navOpen .navToggle span{ background: #ffffff !important; } } /* ========================= MOBILE: hamburger stays fixed while scrolling (tournament behavior) Paste at VERY BOTTOM of styles.css — delete to revert ========================= */ @media (max-width: 820px){ .hasHamburger .navToggle{ position: fixed !important; top: 12px !important; left: 12px !important; /* change to right:12px if you want it on the right */ z-index: 2147483647 !important; } } /* ========================= HAMBURGER BAR ALIGNMENT FIX Add at VERY BOTTOM of styles.css ========================= */ @media (max-width: 820px){ .navToggle{ display: grid; place-items: center; } .navToggle span{ width: 20px; height: 2px; margin: 6px 0; border-radius: 2px; } } /* ========================================== HOME PAGE – Horizontal game cards ========================================== */ #thisWeekGames .miniGameCard, #lastWeekFinals .miniGameCard{ display:grid; grid-template-columns:140px 1fr 90px; align-items:center; gap:12px; padding:12px 14px; } #thisWeekGames .miniGameMeta, #lastWeekFinals .miniGameMeta{ margin:0; line-height:1.25; } #thisWeekGames .miniMatchupRow, #lastWeekFinals .miniMatchupRow{ margin:0; align-items:center; } #thisWeekGames .miniStatus, #lastWeekFinals .miniStatus{ margin:0; text-align:right; white-space:nowrap; } /* Mobile fallback */ @media (max-width:700px){ #thisWeekGames .miniGameCard, #lastWeekFinals .miniGameCard{ grid-template-columns:1fr; gap:8px; } #thisWeekGames .miniStatus, #lastWeekFinals .miniStatus{ text-align:left; } } /* ========================================= HOME PAGE LAYOUT TIGHTENING Paste at VERY BOTTOM of styles.css ========================================= */ /* 1) Make the two top snapshot sections feel balanced */ .homeTwoCol{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; align-items:start; } .homeTwoCol > .card{ height:100%; } .homeTwoCol > .card .cardBody{ height:100%; display:flex; flex-direction:column; } /* 2) Horizontal game cards for This Week + Last Week Finals */ #thisWeekGames .miniGameCard, #lastWeekFinals .miniGameCard{ display:grid; grid-template-columns: 130px minmax(0, 1fr) 88px; align-items:center; gap:12px; padding:12px 14px; margin-top:10px; } #thisWeekGames .miniGameMeta, #lastWeekFinals .miniGameMeta{ margin:0; line-height:1.25; } #thisWeekGames .miniMatchupRow, #lastWeekFinals .miniMatchupRow{ margin:0; align-items:center; } #thisWeekGames .miniStatus, #lastWeekFinals .miniStatus{ margin:0; text-align:right; white-space:nowrap; } /* Slight tightening inside the matchup area */ #thisWeekGames .miniMid, #lastWeekFinals .miniMid{ min-width:42px; } #thisWeekGames .miniTeamSide, #lastWeekFinals .miniTeamSide{ min-width:0; } #thisWeekGames .miniTeamSide .miniTeamName, #lastWeekFinals .miniTeamSide .miniTeamName{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 3) League News in two columns on desktop */ #newsList{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; align-items:start; } #newsList .card{ height:100%; } #newsList .cardBody{ height:100%; } /* 4) Tablet/mobile fallbacks */ @media (max-width: 900px){ .homeTwoCol{ grid-template-columns: 1fr; } #newsList{ grid-template-columns: 1fr; } } @media (max-width: 700px){ #thisWeekGames .miniGameCard, #lastWeekFinals .miniGameCard{ grid-template-columns: 1fr; gap:8px; } #thisWeekGames .miniStatus, #lastWeekFinals .miniStatus{ text-align:left; white-space:normal; } } /* Baseball History Card */ .dailyHistoryItem{ background:#fff; border:3px solid #0b4f26; border-radius:10px; padding:14px 16px; box-shadow:0 3px 8px rgba(0,0,0,.15); margin-top:6px; } .dailyHistoryDate{ font-weight:700; color:#0b4f26; font-size:1.05rem; margin-bottom:4px; } .dailyHistoryTitle{ font-weight:700; font-size:1.15rem; margin-bottom:6px; } .dailyHistoryText{ font-size:.95rem; line-height:1.4; } /* Daily Dugout - Weekly Trivia Champion */ .weeklyChampionWrap{ display:flex; flex-direction:column; gap:12px; } .weeklyChampionBadge{ display:inline-flex; align-self:center; padding:4px 10px; border-radius:999px; background:#fef3c7; color:#92400e; font-size:.78rem; font-weight:900; letter-spacing:.03em; text-transform:uppercase; } .weeklyChampionHero{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; background:#fff8db; border:1px solid rgba(234,179,8,.35); } .weeklyChampionAvatar{ width:44px; height:44px; border-radius:999px; background:#facc15; color:#78350f; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:900; flex:0 0 44px; } .weeklyChampionMain{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; } .weeklyChampionPlayer{ font-size:1.1rem; font-weight:900; color:#111827; line-height:1.15; text-align:left; } .weeklyChampionTeam{ margin-top:4px; display:flex; align-items:center; justify-content:flex-start; align-self:flex-start; width:max-content; padding:3px 8px; border-radius:999px; background:var(--teamColor,#e0ecff); color:#ffffff; font-size:.78rem; font-weight:800; text-align:left; } .weeklyChampionChips{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .weeklyChampionChip{ background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; padding:10px 8px; text-align:center; } .weeklyChampionChip strong{ display:block; font-size:1rem; font-weight:900; color:#111827; } .weeklyChampionChip span{ display:block; margin-top:2px; font-size:.72rem; font-weight:800; color:#6b7280; text-transform:uppercase; letter-spacing:.03em; } .weeklyChampionWeek{ text-align:center; font-size:.84rem; color:#6b7280; font-weight:700; } /* Home - Game Day Ticker */ .homeTickerCard{ border-radius:16px; overflow:hidden; border:1px solid rgba(30,63,168,.18); background:linear-gradient(180deg,#eef4ff,#e7f0ff); box-shadow:0 6px 18px rgba(30,63,168,.08); } .homeTickerCard.is-watch{ border-color:rgba(180,83,9,.28); background:linear-gradient(180deg,#fff7db,#ffefbf); } .homeTickerCard.is-alert{ border-color:rgba(185,28,28,.28); background:linear-gradient(180deg,#fee2e2,#fecaca); } .homeTickerInner{ position:relative; overflow:hidden; white-space:nowrap; padding:12px 0; } .homeTickerTrack{ display:inline-flex; align-items:center; width:max-content; padding-left:16px; font-weight:900; color:#12306b; will-change:transform; gap:0; } .homeTickerCard.is-watch .homeTickerTrack{ color:#854d0e; } .homeTickerCard.is-alert .homeTickerTrack{ color:#991b1b; } .homeTickerText{ display:inline-flex; align-items:center; gap:14px; padding-right:36px; font-size:.96rem; flex:0 0 auto; } .homeTickerSep{ opacity:.35; font-weight:900; margin:0 6px; letter-spacing:.08em; } .homeTickerMeta{ font-weight:700; opacity:.82; } .homeTickerInner.is-static .homeTickerTrack{ transform:none !important; animation:none !important; } .homeTickerInner.is-scrolling .homeTickerTrack{ animation:homeTickerScroll 36s linear infinite; } .homeTickerInner:hover .homeTickerTrack{ animation-play-state:paused; } @keyframes homeTickerScroll{ 0%{ transform:translateX(35%); } 100%{ transform:translateX(-100%); } } } .homeTickerUpdated{ font-size:.78em; font-weight:700; opacity:.65; margin-left:10px; font-style:italic; } .homeTickerCard::after{ content:""; position:absolute; inset:0; background:linear-gradient( 120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70% ); opacity:.35; pointer-events:none; animation:tickerShine 8s linear infinite; } @keyframes tickerShine{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} } .homeTickerCard.is-watch::before{ content:"⛅"; } .homeTickerCard.is-alert::before{ content:"🚨"; } .homeTickerInner{ padding-left:32px; } .homeTickerInner::before, .homeTickerInner::after{ content:""; position:absolute; top:0; bottom:0; width:30px; pointer-events:none; } .homeTickerInner::before{ left:0; background:linear-gradient(to right,#eef4ff,transparent); } .homeTickerInner::after{ right:0; background:linear-gradient(to left,#eef4ff,transparent); } .homeTickerLoading{ display:flex; justify-content:center; align-items:center; } .homeTickerLoadingText{ font-weight:700; font-size:14px; text-align:center; white-space:nowrap; } /* ---------------- Home hero button spacing (mobile fix) ---------------- */ /* Home hero buttons mobile spacing fix */ @media (max-width: 640px){ .homeHeroBtns{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; } .homeHeroBtns a{ flex:0 0 auto; } .homeHeroBtns a:last-child{ flex:0 0 100%; max-width:260px; margin-top:6px; } } /* ========================================= HOME INDEX: header reformat + cleaner scrolling ========================================= */ html{ scroll-behavior: smooth; } body.homeIndex{ overflow-x: hidden; } body.homeIndex .homeHeader{ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } body.homeIndex .homeHeader .brandCenter{ margin-top: 10px; padding-top: 2px; } body.homeIndex .homeHeader h1{ margin: 2px 0 4px; font-size: clamp(1.35rem, 3.4vw, 2rem); line-height: 1.12; display: inline-flex; flex-direction: column; gap: 2px; } body.homeIndex .homeHeader h1 .titleLevel{ font-size: .68em; letter-spacing: .08em; text-transform: uppercase; color: #1e3fa8; } body.homeIndex .homeHeader .tagline{ display: block; margin-top: 2px; } body.homeIndex .homeHeader .tagline::before{ margin-right: 8px; } /* cleaner page scroll appearance */ body.homeIndex ::-webkit-scrollbar{ width: 10px; height: 10px; } body.homeIndex ::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, #9bb2eb, #5479d8); border-radius: 999px; border: 2px solid #eef3ff; } body.homeIndex ::-webkit-scrollbar-track{ background: #eef3ff; } @media (max-width: 820px){ body.homeIndex .homeHeader .brandCenter{ margin-top: 6px; } body.homeIndex .homeHeader .tagline::before{ display: none; } } /* ========================================= HOME INDEX: slimmer welcome/countdown hero box ========================================= */ body.homeIndex .homeHeroCard{ border: 1px solid rgba(30,63,168,.16); border-radius: 14px; box-shadow: 0 10px 26px rgba(30,63,168,.08); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,255,.96)); } body.homeIndex .homeHeroCardBody{ padding: 12px 14px; } body.homeIndex .homeWelcome{ gap: 8px; } body.homeIndex #welcomeLine{ margin: 0; font-size: 13px; line-height: 1.35; } body.homeIndex .homeCountdown{ width: min(480px, 100%); padding: 8px 12px; border-radius: 12px; box-shadow: 0 6px 14px rgba(30,63,168,.10); } body.homeIndex .homeCountdownLabel{ font-size: 11px; } body.homeIndex .homeCountdownTimer{ margin-top: 3px; font-size: clamp(18px, 2.5vw, 28px); } body.homeIndex .homeHeroBtns{ gap: 8px; margin-top: 2px; } body.homeIndex .homeHeroBtns .btnPrimary{ padding: 8px 12px; font-size: 12px; border-radius: 10px; } @media (max-width: 640px){ body.homeIndex .homeHeroCardBody{ padding: 10px 10px; } body.homeIndex .homeCountdown{ padding: 7px 10px; } body.homeIndex .homeHeroBtns{ gap: 7px; } } /* ========================================== MOBILE NAV TOGGLE VISUAL CONSISTENCY Keep hamburger icon/button styling identical between collapsed and expanded states. ========================================== */ @media (max-width: 820px){ .navToggle, html.navOpen .navToggle{ background: #ffffff !important; border: 1px solid var(--border) !important; border-radius: 12px !important; width: 44px !important; height: 44px !important; padding: 0 !important; display: grid !important; place-items: center !important; } .navToggle span, html.navOpen .navToggle span{ display: block !important; width: 20px !important; height: 2px !important; margin: 3px 0 !important; border-radius: 2px !important; background: #0f172a !important; opacity: 1 !important; } /* Index page uses backdrop-filter on header; disable it while nav is open so the full-screen overlay can render uniformly. */ html.navOpen body.homeIndex .homeHeader{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Chrome on mobile can still composite the Index watermark/header above the nav overlay. Add a dedicated full-screen scrim for Index while open, and hide background watermark. */ html.navOpen body.homeIndex::before{ opacity: 0 !important; } } .hofCard{ --hofAccent:#2563eb; font: inherit; color: inherit; } .hofPlayerLine{ color: var(--hofAccent); font-size: 1rem; font-weight: 700; line-height: 1.3; margin-bottom: 6px; } .hofMeta{ color: #6b7280; font-size: 0.92rem; line-height: 1.35; margin-bottom: 14px; } .hofQuestionBlock, .hofStatsBlock{ background: #f8fafc; border-radius: 18px; padding: 14px 16px; margin-top: 12px; border-left: 5px solid var(--hofAccent); } .hofSectionLabel{ font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; margin-bottom: 8px; } .hofList{ margin: 0; padding-left: 20px; } .hofList li{ margin-bottom: 8px; line-height: 1.45; } .hofStatsList{ display: flex; flex-direction: column; gap: 8px; } .hofStatItem{ font-weight: 600; line-height: 1.35; } .compactFilters { display: flex; justify-content: center; align-items: center; gap: 8px; max-width: 420px; margin: 0 auto 12px auto; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.04); box-shadow: 0 2px 6px rgba(0,0,0,0.08); } .compactFilters select, .compactFilters button { padding: 6px 8px; font-size: 13px; } .compactScheduleFilters{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; max-width:780px; margin:0 auto 12px auto; padding:8px 10px; border-radius:12px; background:rgba(0,0,0,0.04); } .compactScheduleFilters select, .compactScheduleFilters button{ margin:0; } .compactScheduleFilters select{ min-width:140px; } .compactScheduleFilters .toggleBtn{ padding:6px 10px; } .compactScheduleFilters .btnSecondary{ padding:6px 10px; }