/* ===================================================================== LINESTAR MEGA NAV - fantasysportsco.meganav.css Companion to fantasysportsco.meganav.js (loaded by includes/Header.ascx on every skin). Styles the context trigger in the top bar, the full-width dropdown panel (.fscMega, desktop) and the slide-up bottom sheet (.fscMegaSheet + .fscMegaScrim, phones). - The menu is deliberately ALWAYS dark navy + gold (mockup "Option B"), independent of the site's light/dark theme - it's an extension of the navy header bar. Palette lives in the --mm* variables below. - The panel lives inside .TopMain, whose ".TopMain * { color:#fff }" rule paints every descendant white. Every `color:` declaration for panel content therefore carries >= 2 class specificity so it wins regardless of stylesheet order. The sheet is appended to and shares the same selectors for consistency. - html.fsc-mm is set by the JS only after it successfully takes over, so the legacy DDR flyouts are never hidden without a replacement. ===================================================================== */ .fscMega, .fscMegaSheet, html.fsc-mm .mmSportsTrigger, .chatChip { --mmPanel: #101f45; --mmTile: #16264f; --mmTileHover: #1c2f5e; --mmLine: rgba(255, 255, 255, 0.10); --mmLineStrong: rgba(255, 255, 255, 0.18); --mmTextHi: #ffffff; --mmTextMid: #aab4d4; --mmTextLow: #6b769c; --mmGold: #f5c518; --mmGoldDim: rgba(245, 197, 24, 0.15); } /* ------------------------------------------------------------------ 1. Legacy flyout retirement + root-item affordance ------------------------------------------------------------------ */ /* !important so jQuery slideDown's inline display:block (TWMenu.js hoverIntent still runs) can never re-show the old dropdowns */ html.fsc-mm #dnnMenu .subMenu, html.fsc-mm #dnnMenu .subMenuRight { display: none !important; } /* chevron on root items that open a panel */ html.fsc-mm #dnnMenu .rootMenu li.mm-hasPanel > a div div::after { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 0 2px 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .55; transition: transform .15s ease, opacity .15s; } html.fsc-mm #dnnMenu .rootMenu li.mm-hasPanel.mm-open > a div div::after { transform: rotate(225deg) translate(-1px, -1px); opacity: 1; } /* keep the root link lit while its panel is open (matches :hover) */ html.fsc-mm #dnnMenu .rootMenu li.mm-open > a div div { color: #fff; } /* the wrapper's pageNav trigger/flyout is retired from view - the mega nav owns navigation now. Its markup MUST stay in the DOM: it is the mega nav's live data source (parseLiveSports) and its server-rendered links are what crawlers index; it also reappears as the fallback when this JS doesn't boot (html.fsc-mm absent). */ html.fsc-mm .siteAndGameBar .pageNav { display: none; } /* ------------------------------------------------------------------ 2. Context trigger - "[icon] MLB Projections v", docked at the left of the header row (mockup .ctx-trigger) ------------------------------------------------------------------ */ html.fsc-mm .mmSportsTrigger { list-style: none; align-self: center; } /* docked variant (standalone child of .HeaderRowWrapper): the wrapper is justify-content:flex-end, so the trigger sits with the right- aligned menu cluster, leading the other menu items */ html.fsc-mm .mmTrigDock { margin-left: 14px; } /* brand logo, top-left: the auto right margin parks it at the far left of the flex-end header row while everything else stays right */ html.fsc-mm .mmLogo { display: inline-flex; align-items: center; align-self: center; flex: 0 0 auto; margin-right: auto; margin-left: 12px; } html.fsc-mm .mmLogo img { height: 26px; width: auto; display: block; } html.fsc-mm .mmSportsTrigger > a.mmTrig { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(255, 255, 255, 0.10); border: 1px solid var(--mmLine); border-radius: 8px; cursor: pointer; text-decoration: none !important; transition: background .15s ease, border-color .15s ease; } html.fsc-mm .mmSportsTrigger > a.mmTrig:hover, html.fsc-mm .mmSportsTrigger.mm-open > a.mmTrig { background: rgba(255, 255, 255, 0.16); border-color: var(--mmLineStrong); } html.fsc-mm .mmSportsTrigger > a.mmTrig:focus-visible { outline: 2px solid var(--mmGold); outline-offset: 2px; } html.fsc-mm .mmSportsTrigger .mmTrigSport { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; } /* inline 4-square dashboard glyph (no-sport-icon fallback) */ html.fsc-mm .mmSportsTrigger .mmTrigGrid { width: 16px; height: 16px; flex: 0 0 auto; color: #BFDBFE; } html.fsc-mm .mmSportsTrigger .mmTrigSportName { font-family: Heebo, sans-serif; font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; } html.fsc-mm .mmSportsTrigger .mmTrigPage { font-family: Heebo, sans-serif; font-size: 12px; font-weight: 400; color: var(--mmTextMid); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } /* chevron */ html.fsc-mm .mmSportsTrigger .mmTrigChev { width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid var(--mmTextMid); border-bottom: 2px solid var(--mmTextMid); transform: rotate(45deg); transition: transform .15s ease; flex: 0 0 auto; } html.fsc-mm .mmSportsTrigger.mm-open .mmTrigChev { transform: rotate(225deg); margin-top: 3px; } /* ------------------------------------------------------------------ 3. Desktop panel ------------------------------------------------------------------ */ .fscMega { position: fixed; left: 0; right: 0; top: 0; /* real top is measured + set inline by the JS on open */ z-index: 120000; display: none; background: var(--mmPanel); border-bottom: 1px solid var(--mmLineStrong); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45); font-family: Heebo, 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 14px; text-align: left; } .fscMega.is-open { display: block; animation: mmDrop .16s ease; } @keyframes mmDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* cap the panel height and scroll inside it */ .fscMega .mmScroll { max-height: min(620px, 72vh); overflow-y: auto; overscroll-behavior: contain; } .fscMega .mmInner { max-width: 1180px; margin: 0 auto; padding: 16px 20px 18px; } .fscMega .mmPane { display: none; } .fscMega .mmPane.is-active { display: block; } /* -- toolbar: search box (+ shortcut hint) -- */ .fscMega .mmBar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .fscMega .mmSearchWrap, .fscMegaSheet .mmSearchWrap { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--mmLine); border-radius: 8px; padding: 8px 12px 8px 34px; } .fscMega .mmSearchWrap:focus-within, .fscMegaSheet .mmSearchWrap:focus-within { border-color: var(--mmLineStrong); } .fscMega .mmSearchIcon, .fscMegaSheet .mmSearchIcon { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); opacity: .6; filter: brightness(0) invert(1); pointer-events: none; } .fscMega .mmSearchInput, .fscMegaSheet .mmSearchInput { flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none; font-family: inherit; font-size: 13px; color: var(--mmTextHi); } .fscMega .mmSearchInput::placeholder, .fscMegaSheet .mmSearchInput::placeholder { color: var(--mmTextLow); } .fscMega .mmKbd { border: 1px solid var(--mmLineStrong); border-radius: 4px; padding: 1px 6px; font-size: 11px; color: var(--mmTextLow); white-space: nowrap; flex: 0 0 auto; margin-left: 8px; } /* -- hub layout: sports/sections rail on the left, tiles right -- */ .fscMega .mmHub { display: grid; grid-template-columns: 175px minmax(0, 1fr); gap: 18px; align-items: start; } .fscMega .mmRail { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--mmActiveGlow, var(--mmGold)); /* divider takes the active sport's accent (set by setStage) */ padding-right: 12px; position: sticky; /* rail stays put while the tile side scrolls */ top: 0; } .fscMega .mmRailLbl, .fscMega .mmLabel, .fscMegaSheet .mmLabel { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mmTextLow); margin: 0 0 8px 2px; } .fscMega .mmLabel, .fscMegaSheet .mmLabel { margin: 16px 2px 8px; } .fscMega .mmPane > .mmLabel:first-child, .fscMegaSheet .mmPane > .mmLabel:first-child { margin-top: 0; } .fscMega .mmRailLbl2 { margin-top: 16px; } .fscMega .mmRailItem { position: relative; /* anchors the selected item's gold connector */ display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--mmTextMid); text-align: left; transition: background .12s ease, color .12s; } .fscMega .mmRailItem:hover { background: rgba(255, 255, 255, 0.06); color: var(--mmTextHi); } .fscMega .mmRailItem.is-on { background: var(--mmGoldDim); color: var(--mmTextHi); box-shadow: inset 0 0 0 1.5px var(--mmActiveGlow, var(--mmGold)); /* ring in the sport's accent */ } /* connector in the sport's accent: bridges the selected sport to the rail divider (rail padding-right is 12px; +1px overlaps so they join) */ .fscMega .mmRailItem.is-on::after { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: 13px; height: 2px; background: var(--mmActiveGlow, var(--mmGold)); pointer-events: none; } .fscMega .mmRailItem:focus-visible { outline: 2px solid var(--mmGold); outline-offset: 2px; } .fscMega .mmRailIcon { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; } .fscMega .mmStage { min-width: 0; overflow: hidden; } /* ---- sport watermark: the selected sport's icon, giant and ghosted, anchored bottom-right behind the tiles. The pane forms the stacking context (z-index:0) so the z:-1 watermark paints above the panel's navy but under every tile/label. Grayscaled + brightened so every sport reads as the same pale ghost; radial mask fades the edges. */ .fscMega .mmPane { position: relative; z-index: 0; } .fscMega .mmPaneWatermark { position: absolute; right: -40px; bottom: -60px; z-index: -1; width: 340px; height: 340px; object-fit: contain; opacity: 0.05; filter: grayscale(1) brightness(2.4); pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); } /* gentle fade-in each time a pane becomes active (display none->block restarts the animation; opacity-only per the perf rules) */ @keyframes mmWmFade { from { opacity: 0; } to { opacity: 0.05; } } .fscMega .mmPane.is-active .mmPaneWatermark { animation: mmWmFade .45s ease; } /* ambient sport glow: a soft radial wash in the sport's accent color (--mmGlow, set per pane by meganav.js; search/leaf panes fall back to the nav gold), centered BEHIND the watermark icon (bottom-right) so the ghosted sport mark sits in its own pool of light. Static gradient + opacity-only fade = compositor-cheap. */ .fscMega .mmPane::before { content: ''; position: absolute; right: -140px; bottom: -120px; z-index: -1; width: 560px; height: 460px; background: radial-gradient(closest-side, var(--mmGlow, #f5c518), transparent 74%); opacity: 0.32; filter: saturate(1.35); pointer-events: none; } @keyframes mmGlowFade { from { opacity: 0; } to { opacity: 0.32; } } .fscMega .mmPane.is-active::before { animation: mmGlowFade .5s ease; } @media (prefers-reduced-motion: reduce) { .fscMega .mmPane.is-active .mmPaneWatermark { animation: none; } .fscMega .mmPane.is-active::before { animation: none; } } /* the mobile sheet skips the ambient layers (small + busy) */ .fscMegaSheet .mmPane::before { display: none; } /* the mobile sheet is small + busy - skip the texture there */ .fscMegaSheet .mmPaneWatermark { display: none; } /* ------------------------------------------------------------------ 4. Tiles (shared by panel + sheet) ------------------------------------------------------------------ */ .fscMega .mmGrid, .fscMegaSheet .mmGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } /* Main tools row: slightly larger, roomier tiles */ .fscMega .mmGridHero, .fscMegaSheet .mmGridHero { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .fscMega .mmTile, .fscMegaSheet .mmTile { display: block; text-decoration: none !important; background: var(--mmTile); border: 1px solid var(--mmLine); border-radius: 8px; padding: 10px 12px; color: var(--mmTextHi); } .fscMega a.mmTile:hover, .fscMegaSheet a.mmTile:hover { background: var(--mmTileHover); border-color: var(--mmLineStrong); } .fscMega .mmTile:focus-visible, .fscMegaSheet .mmTile:focus-visible { outline: 2px solid var(--mmGold); outline-offset: 2px; } .fscMega .mmTileHero, .fscMegaSheet .mmTileHero { padding: 13px 14px; } /* current page: gold ring + gold sub (mockup .tile.current) */ .fscMega .mmTile.is-here, .fscMegaSheet .mmTile.is-here { border: 2px solid var(--mmGold); padding: 9px 11px; } .fscMega .mmTileHero.is-here, .fscMegaSheet .mmTileHero.is-here { padding: 12px 13px; } .fscMega .mmTile.is-here .t-sub, .fscMegaSheet .mmTile.is-here .t-sub { color: var(--mmGold); } /* unavailable for the active sport: dimmed in place, not clickable */ .fscMega .mmTile.is-dim, .fscMegaSheet .mmTile.is-dim { opacity: 0.45; cursor: default; } .fscMega .mmTile .t-name, .fscMegaSheet .mmTile .t-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mmTextHi); } .fscMega .mmTile .t-icon, .fscMegaSheet .mmTile .t-icon { width: 16px; height: 16px; object-fit: contain; flex: 0 0 auto; filter: brightness(0) invert(0.85); } .fscMega .mmTile .t-sub, .fscMegaSheet .mmTile .t-sub { display: block; font-size: 12px; color: var(--mmTextLow); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fscMega .mmTile .t-new, .fscMegaSheet .mmTile .t-new { background: var(--mmGoldDim); color: var(--mmGold); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; white-space: nowrap; } /* search result context ("NFL", section name) */ .fscMega .mmTile .t-ctx, .fscMegaSheet .mmTile .t-ctx { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--mmLine); color: var(--mmTextMid); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 8px; white-space: nowrap; } .fscMega .mmEmpty, .fscMegaSheet .mmEmpty { padding: 14px 2px; font-size: 13px; color: var(--mmTextLow); } .fscMega .mm-hide, .fscMegaSheet .mm-hide { display: none !important; } .fscMega [hidden], .fscMegaSheet [hidden] { display: none !important; } /* -- footer: standalone pages (Apps, Pricing, MVP...) -- */ .fscMega .mmFooter { border-top: 1px solid var(--mmLine); padding: 10px 20px; max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; } .fscMega .mmFooter a, .fscMegaSheet .mmFooter a { color: var(--mmTextMid); text-decoration: none; } .fscMega .mmFooter a:hover, .fscMegaSheet .mmFooter a:hover { color: var(--mmTextHi); } /* ------------------------------------------------------------------ 5. Mobile bottom sheet (slide-up) + scrim ------------------------------------------------------------------ */ .fscMegaScrim { position: fixed; inset: 0; z-index: 119990; background: rgba(5, 9, 24, 0.55); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .fscMegaScrim.is-open { opacity: 1; pointer-events: auto; } .fscMegaSheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120000; display: flex; flex-direction: column; max-height: 86vh; background: var(--mmPanel); border-top: 1px solid var(--mmLineStrong); border-radius: 18px 18px 0 0; box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.5); font-family: Heebo, 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 14px; transform: translateY(105%); visibility: hidden; /* visibility flips AFTER the slide-down finishes so closing animates */ transition: transform .3s cubic-bezier(0.32, 0.72, 0.2, 1), visibility 0s linear .3s; } .fscMegaSheet.is-open { transform: translateY(0); visibility: visible; transition: transform .3s cubic-bezier(0.32, 0.72, 0.2, 1), visibility 0s; } .fscMegaSheet .mmSheetGrab { width: 42px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); margin: 8px auto 4px; flex: 0 0 auto; } .fscMegaSheet .mmSheetHead { display: flex; align-items: center; gap: 10px; padding: 4px 14px 10px; flex: 0 0 auto; } .fscMegaSheet .mmSheetClose { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--mmLine); background: rgba(255, 255, 255, 0.05); color: var(--mmTextMid); font-size: 20px; line-height: 1; cursor: pointer; } /* sport chip strip (the rail, horizontal) */ .fscMegaSheet .mmSheetChips { display: flex; align-items: center; gap: 6px; padding: 0 14px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex: 0 0 auto; } .fscMegaSheet .mmChip { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 11px; border: 1px solid var(--mmLine); border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-family: inherit; font-size: 12px; font-weight: 600; color: var(--mmTextMid); cursor: pointer; white-space: nowrap; } .fscMegaSheet .mmChip img { width: 16px; height: 16px; object-fit: contain; } .fscMegaSheet .mmChip.is-on { background: var(--mmGoldDim); border-color: var(--mmGold); color: var(--mmTextHi); } .fscMegaSheet .mmSheetBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px 14px calc(20px + env(safe-area-inset-bottom, 0px)); } .fscMegaSheet .mmSheetStage .mmPane { display: none; } .fscMegaSheet .mmSheetStage .mmPane.is-active { display: block; } .fscMegaSheet .mmGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fscMegaSheet .mmGridHero { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fscMegaSheet .mmTile .t-sub { font-size: 11px; } .fscMegaSheet .mmSheetDnn { margin-top: 4px; } .fscMegaSheet .mmFooter { border-top: 1px solid var(--mmLine); margin-top: 16px; padding: 12px 2px 0; display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; } /* body scroll lock while the sheet is up */ html.fsc-mm-lock, html.fsc-mm-lock body { overflow: hidden !important; } /* ------------------------------------------------------------------ 5b. Chat chips (wrapper pages) The wrapper renders two chat chips outside the game bar; both stay hidden until meganav.js places them (.mmChatTab desktop right-edge tab / .mmChatDock mobile header pill). If the JS never boots the chips stay hidden - chat is an enhancement, not core navigation. ------------------------------------------------------------------ */ .chatChip { display: none; } /* desktop: fixed tab hugging the right screen edge just under the header (top is measured + set inline by the JS); chat slides out from the right, so the tab points at it */ .chatChip.mmChatTab { display: flex; align-items: center; gap: 9px; position: fixed; right: 0; top: 64px; /* refined inline by meganav.js */ z-index: 118000; /* under the panel/sheet (120000) */ padding: 8px 12px; background: var(--mmPanel); border: 1px solid var(--mmLineStrong); border-right: 0; border-radius: 10px 0 0 10px; box-shadow: -6px 6px 18px rgba(0, 0, 0, 0.35); cursor: pointer; font-family: Heebo, 'Segoe UI', system-ui, -apple-system, sans-serif; } .chatChip.mmChatTab:hover { background: var(--mmTileHover); border-color: var(--mmGold); } /* chat popup open: the tab would float over the chat window (chat slides out from the same right edge) - hide it; the popup has its own close control and the tab returns when chat closes */ .chatChip.mmChatTab.is-open { display: none; } /* the FLOATING tab overlays the right end of the games strip - trailing scroll room lets the last game clear it. html.fsc-chatTab is set by the JS only when the chip stays a tab; docked inline in the quick bar it takes no space over the strip, so the padding would just be a gap. */ html.fsc-mm.fsc-chatTab div.siteAndGameBar .gameList { padding-right: 150px; } /* ---- chat chip docked inline at the far right of the quick bar ---- bar-height pill, matching .qbMore / .qbSportBtn. The floating-tab rules (position:fixed etc.) are scoped to .mmChatTab, so they simply don't apply here. */ .fscQuickBar .chatChip.mmChatInline { position: static; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; width: auto; height: 26px; margin: 0 0 0 8px; padding: 0 10px; border: 1px solid var(--fsc-line-strong, #CBD2DC); border-radius: 999px; background: var(--fsc-panel-2, #F1F5F9); box-shadow: none; transform: none; cursor: pointer; font-family: 'Heebo', sans-serif; white-space: nowrap; } .fscQuickBar .chatChip.mmChatInline:hover { border-color: var(--fsc-text-faint, #8A94A6); background: var(--fsc-panel, #fff); } .fscQuickBar .chatChip.mmChatInline.is-open { display: inline-flex; /* the tab hides while chat is open; inline stays as the toggle */ border-color: var(--qbAccent, #2563EB); background: color-mix(in srgb, var(--qbAccent, #2563EB) 14%, transparent); } .fscQuickBar .chatChip.mmChatInline .chatChipIco { display: inline-flex; align-items: center; color: var(--fsc-green, #149A53); flex: 0 0 auto; } /* the tab stacked label over a live/count row; inline it's one line */ .fscQuickBar .chatChip.mmChatInline .chatChipText { display: inline-flex; align-items: center; gap: 6px; flex-direction: row; } .fscQuickBar .chatChip.mmChatInline .chatChipLabel { font-size: 12px; font-weight: 700; color: var(--fsc-text, #16202E); } .fscQuickBar .chatChip.mmChatInline .chatChipLiveRow { display: inline-flex; align-items: center; gap: 5px; } .fscQuickBar .chatChip.mmChatInline .chatChipLive { display: inline-flex; align-items: center; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px 1px 5px; border-radius: 999px; background: var(--fsc-green-soft, #D9F2E4); color: var(--fsc-green, #149A53); } /* slow blinking dot - the attention cue from the floating tab. Opacity only (no paint/layout work) and killed under reduced-motion by the shared rule at the bottom of this file. */ .fscQuickBar .chatChip.mmChatInline .chatChipLive::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; animation: mmChatPulse 1.6s infinite; } .fscQuickBar .chatChip.mmChatInline .chatChipCount { font-size: 11px; font-weight: 700; color: var(--fsc-text-soft, #5A6678); } /* just the number - "msgs" is redundant next to the Live badge */ .fscQuickBar .chatChip.mmChatInline .chatChipCountLbl { display: none; } [data-fsc-theme="dark"] .fscQuickBar .chatChip.mmChatInline .chatChipLabel { color: var(--fsc-text, #E9EEF8); } [data-fsc-theme="dark"] .fscQuickBar .chatChip.mmChatInline .chatChipCount { color: var(--fsc-text-soft, #94A0B8); } /* narrower desktops: drop the count, keep the label + Live */ @media screen and (max-width: 1200px) { .fscQuickBar .chatChip.mmChatInline .chatChipCount { display: none; } } /* mobile game bar: newlayout.css split it into two rows when the pages trigger and chat chips lived here; those are gone (menu trigger / header pill), so the context summary and the View-Games button now share a single row. Specificity beats newlayout's mobile rules. */ @media screen and (max-width: 800px) { html.fsc-mm div.siteAndGameBar { flex-wrap: nowrap; /* summary + games button stay on one line */ } html.fsc-mm div.siteAndGameBar .selectorsArea { flex: 1 1 auto; flex-basis: auto; min-width: 0; box-shadow: none; /* was a row divider; meaningless on one row */ } html.fsc-mm div.siteAndGameBar .gamesPopupButton { flex: 0 0 auto; padding: 3px 8px; } } .chatChip.mmChatTab:focus-visible, .chatChip.mmChatDock:focus-visible { outline: 2px solid var(--mmGold); outline-offset: 2px; } /* shared internals (label stack, live dot, count badge) */ .chatChip.mmChatTab .chatChipText, .chatChip.mmChatDock .chatChipText { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; min-width: 0; } .chatChip.mmChatTab .chatChipLiveRow, .chatChip.mmChatDock .chatChipLiveRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; align-self: stretch; } .chatChip.mmChatTab .chatChipLabel, .chatChip.mmChatDock .chatChipLabel { font-weight: 700; font-size: 13px; line-height: 1.2; color: var(--mmTextHi); white-space: nowrap; } .chatChip.mmChatTab .chatChipLive, .chatChip.mmChatDock .chatChipLive { font-weight: 800; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: #34d399; white-space: nowrap; } .chatChip.mmChatTab .chatChipLive::before, .chatChip.mmChatDock .chatChipLive::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #34d399; box-shadow: 0 0 7px #34d399; animation: mmChatPulse 1.6s infinite; vertical-align: middle; } @keyframes mmChatPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .chatChip.mmChatTab .chatChipCount, .chatChip.mmChatDock .chatChipCount { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background: #2563EB; color: #fff; border-radius: 8px; padding: 3px 8px 2px; min-width: 28px; box-sizing: border-box; } .chatChip.mmChatTab .chatChipCountNum, .chatChip.mmChatDock .chatChipCountNum { font-weight: 800; font-size: 12.5px; line-height: 14px; font-variant-numeric: tabular-nums; color: #fff; } .chatChip.mmChatTab .chatChipCountLbl, .chatChip.mmChatDock .chatChipCountLbl { font-weight: 800; font-size: 8px; line-height: 9px; letter-spacing: .08em; text-transform: uppercase; color: #fff; } /* ------------------------------------------------------------------ 6. Responsive guards ------------------------------------------------------------------ */ @media screen and (max-width: 1023px) { .fscMega .mmHub { grid-template-columns: 150px minmax(0, 1fr); gap: 14px; } html.fsc-mm .mmSportsTrigger .mmTrigPage { max-width: 140px; } } @media screen and (max-width: 767px) { /* the panel is desktop furniture (phones get the sheet), but keep it usable in case it's opened at this width on odd skins */ .fscMega .mmInner { padding: 12px 14px 16px; } .fscMega .mmHub { display: block; } .fscMega .mmRail { flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-right: 0; border-bottom: 1px solid var(--mmActiveGlow, var(--mmGold)); padding: 0 0 10px; margin-bottom: 12px; position: static; } .fscMega .mmRailLbl { display: none; } /* the rail is a horizontal strip here - the rightward connector's geometry doesn't apply (the gold ring still marks the selection) */ .fscMega .mmRailItem.is-on::after { display: none; } .fscMega .mmRailItem { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--mmLine); border-radius: 999px; padding: 6px 12px; } .fscMega .mmRailItem.is-on { border-color: var(--mmGold); } .fscMega .mmGrid, .fscMega .mmGridHero { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fscMega .mmKbd { display: none; } /* -- single-row phone header: trigger pill + login/account only. Every page is reachable from the sheet, so the DDR bar, the hamburger and the legacy bootstrap menu are redundant rows. Scoped to html.fsc-mm so the no-JS header keeps every fallback visible. -- */ html.fsc-mm .NavPane #dnnMenu { display: none; } html.fsc-mm .MobileNav { display: none !important; } html.fsc-mm .HeaderCenter.NavMain { display: none !important; } /* the single row is full (trigger + chat + login) - no room for the logo on phones; the trigger carries the identity there */ html.fsc-mm .mmLogo { display: none; } html.fsc-mm .HeaderRowWrapper { flex-wrap: nowrap; justify-content: flex-start; /* trigger + chat sit together on the left */ align-items: center; padding: 6px 10px; } html.fsc-mm .HeaderRowWrapper > .HeaderRight { margin-left: auto; } html.fsc-mm .mmTrigDock { margin: 0; flex: 0 1 auto; min-width: 0; /* the docked chat pill (two text lines) can be taller than the trigger - stretch to the row height so the pills match */ align-self: stretch; display: flex; } html.fsc-mm .mmSportsTrigger > a.mmTrig { padding: 7px 12px; align-self: stretch; /* the trigger must SHRINK inside its dock, never overflow onto the chat pill beside it */ min-width: 0; max-width: 100%; overflow: hidden; } /* long page names wrap to two lines (clamped) instead of spending header width - saves room for the chat pill */ html.fsc-mm .mmSportsTrigger .mmTrigPage { max-width: 110px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; } /* the long fallback label ("DFS Projections + Props + BestBall") truncates instead of blowing the single-row header open */ html.fsc-mm .mmSportsTrigger .mmTrigSportName { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; } /* chat: the right-edge tab is desktop furniture; the docked pill takes its place beside the trigger, styled to match it */ .chatChip.mmChatTab { display: none; } html.fsc-mm .HeaderRowWrapper .chatChip.mmChatDock { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 0; margin-left: 8px; padding: 5px 12px; background: rgba(255, 255, 255, 0.10); border: 1px solid var(--mmLine); border-radius: 8px; cursor: pointer; font-family: Heebo, 'Segoe UI', system-ui, -apple-system, sans-serif; } html.fsc-mm .HeaderRowWrapper .chatChip.mmChatDock.is-open { background: var(--mmGoldDim); border-color: var(--mmGold); } } @media (prefers-reduced-motion: reduce) { .fscMega.is-open { animation: none; } .fscMegaSheet { transition: none; } .fscMegaScrim { transition: none; } .chatChip .chatChipLive::before { animation: none; } } /* ===================================================================== QUICK BAR - thin direct-navigation strip under .siteAndGameBar. Sport chip (switches sport, keeps the page) + one pill per page for the current sport, horizontally scrollable, plus More -> mega panel. Not sticky. Token-driven, so light/dark both work. ===================================================================== */ .fscQuickBar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; box-sizing: border-box; background: var(--fsc-panel, #fff); border-bottom: 1px solid var(--fsc-line, #E4E8EE); font-family: 'Heebo', sans-serif; white-space: nowrap; } /* ---- sport chip + popover ---- */ .qbSportWrap { position: relative; flex: 0 0 auto; } .qbSportBtn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid var(--fsc-line-strong, #CBD2DC); border-radius: 999px; background: var(--fsc-panel-2, #F1F5F9); color: var(--fsc-text, #16202E); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .qbSportBtn:hover { border-color: var(--fsc-text-faint, #8A94A6); } .qbSportIco { width: 16px; height: 16px; object-fit: contain; } .qbChev { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; transition: transform .16s ease; } .qbSportBtn.is-open .qbChev { transform: rotate(180deg); } .qbSportMenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 119000; /* under the mega panel (120000) */ min-width: 170px; padding: 5px; background: var(--fsc-panel, #fff); border: 1px solid var(--fsc-line-strong, #CBD2DC); border-radius: 10px; box-shadow: var(--fsc-shadow, 0 12px 28px rgba(15, 23, 42, .18)); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .14s ease, transform .14s ease; } .qbSportMenu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .qbSportItem { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--fsc-text, #16202E) !important; text-decoration: none !important; } .qbSportItem img { width: 18px; height: 18px; object-fit: contain; } .qbSportItem:hover { background: var(--fsc-panel-2, #F1F5F9); color: var(--fsc-blue, #2563EB) !important; } .qbSportItem.is-current { background: var(--fsc-blue-soft, #EFF4FF); color: var(--fsc-blue, #2563EB) !important; } /* previewing a sport you're not currently on */ .qbSportBtn.is-preview { border-color: var(--fsc-blue, #2563EB); color: var(--fsc-blue, #2563EB); background: var(--fsc-blue-soft, #EFF4FF); } /* ---- scrolling pill rail ---- .qbRail clips the sweep; the popover lives OUTSIDE it so nothing clips the dropdown. */ .qbRail { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; } .qbSweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, var(--fsc-blue-soft, #EFF4FF), transparent); } /* one-shot on sport swap: a light sweep across the rail while the new pills stagger in (transform/opacity only - no layout work) */ .qbRail.is-swapping .qbSweep { animation: qbSweep .45s ease-out both; } .qbRail.is-swapping .qbPill { animation: qbPillIn .28s ease-out both; animation-delay: calc(var(--i, 0) * 22ms); } @keyframes qbSweep { 0% { opacity: .9; transform: translateX(-100%); } 100% { opacity: 0; transform: translateX(100%); } } @keyframes qbPillIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .qbRail.is-swapping .qbSweep, .qbRail.is-swapping .qbPill { animation: none; } } .qbScroll { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* the rail is short - no bar */ -webkit-overflow-scrolling: touch; /* fade the cut-off edge so it reads as scrollable */ -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%); } .qbScroll::-webkit-scrollbar { height: 0; } .qbPills { display: inline-flex; align-items: center; gap: 4px; } .qbPill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--fsc-text-soft, #5A6678) !important; text-decoration: none !important; transition: background-color .12s ease, color .12s ease; } .qbPill:hover { background: var(--fsc-panel-2, #F1F5F9); color: var(--fsc-text, #16202E) !important; } .qbPill.is-here { background: var(--fsc-blue-soft, #EFF4FF); color: var(--fsc-blue, #2563EB) !important; font-weight: 800; } /* the same page in a PREVIEWED sport - outlined rather than filled, so it reads as "go here" instead of "you are here" */ .qbPill.is-equiv { box-shadow: inset 0 0 0 1px var(--fsc-blue, #2563EB); color: var(--fsc-blue, #2563EB) !important; font-weight: 800; } .qbPillIco { width: 15px; height: 15px; object-fit: contain; opacity: .85; } .qbPill.is-here .qbPillIco { opacity: 1; } .qbNew { font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 1px 5px; border-radius: 999px; background: var(--fsc-green-soft, #D9F2E4); color: var(--fsc-green, #149A53); } /* ---- More ---- */ .qbMore { flex: 0 0 auto; height: 26px; padding: 0 11px; border: 1px solid var(--fsc-line-strong, #CBD2DC); border-radius: 999px; background: none; color: var(--fsc-text-soft, #5A6678); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .qbMore:hover { background: var(--fsc-panel-2, #F1F5F9); color: var(--fsc-text, #16202E); } /* dark: normalize icon art to a light silhouette. brightness(0) flattens to black FIRST, then invert lifts it - so it works whether the source PNG is dark art or already white (a plain invert(1) turned the white nav icons black, which is what made them vanish on the navy panel). */ [data-fsc-theme="dark"] .qbSportIco, [data-fsc-theme="dark"] .qbSportItem img, [data-fsc-theme="dark"] .qbPillIco { filter: brightness(0) invert(0.92); } /* the current/hovered sport row gets a full-white glyph so it reads as selected alongside the accent text */ [data-fsc-theme="dark"] .qbSportItem:hover img, [data-fsc-theme="dark"] .qbSportItem.is-current img { filter: brightness(0) invert(1); } /* desktop only: phones/tablets already have the header trigger + bottom sheet, and the strip costs vertical space where it's scarcest */ @media screen and (max-width: 900px) { .fscQuickBar { display: none !important; } } /* ---- quick bar: sport accent instead of the generic blue ---- --qbAccent is set per render from the SPORT_GLOWS palette the mega panel uses, and re-set when the rail swaps sports. color-mix gives the soft fills; browsers without it fall back to the flat token. */ .fscQuickBar .qbPill.is-here { background: color-mix(in srgb, var(--qbAccent, #2563EB) 14%, transparent); color: var(--qbAccent, #2563EB) !important; } .fscQuickBar .qbPill.is-equiv { box-shadow: inset 0 0 0 1px var(--qbAccent, #2563EB); color: var(--qbAccent, #2563EB) !important; } .fscQuickBar .qbPill:hover { color: var(--fsc-text, #16202E) !important; } .fscQuickBar .qbSportBtn.is-preview { border-color: var(--qbAccent, #2563EB); color: var(--qbAccent, #2563EB); background: color-mix(in srgb, var(--qbAccent, #2563EB) 12%, transparent); } .fscQuickBar .qbSportItem:hover, .fscQuickBar .qbSportItem.is-current { color: var(--qbAccent, #2563EB) !important; } .fscQuickBar .qbSportItem.is-current { background: color-mix(in srgb, var(--qbAccent, #2563EB) 12%, transparent); } .fscQuickBar .qbSweep { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--qbAccent, #2563EB) 22%, transparent), transparent); } /* dark: the raw team colors (NFL red, UFC maroon) go muddy on navy - lift them toward white so they stay legible as text */ [data-fsc-theme="dark"] .fscQuickBar .qbPill.is-here, [data-fsc-theme="dark"] .fscQuickBar .qbPill.is-equiv, [data-fsc-theme="dark"] .fscQuickBar .qbSportBtn.is-preview, [data-fsc-theme="dark"] .fscQuickBar .qbSportItem:hover, [data-fsc-theme="dark"] .fscQuickBar .qbSportItem.is-current { color: color-mix(in srgb, var(--qbAccent, #4D8DFF) 72%, #ffffff) !important; } [data-fsc-theme="dark"] .fscQuickBar .qbPill.is-here { background: color-mix(in srgb, var(--qbAccent, #4D8DFF) 20%, transparent); } [data-fsc-theme="dark"] .fscQuickBar .qbPill.is-equiv { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qbAccent, #4D8DFF) 60%, #ffffff); } [data-fsc-theme="dark"] .fscQuickBar .qbPill:hover { color: var(--fsc-text, #E9EEF8) !important; } /* ---- quick bar: beat the base skin ---- skin.css has: A:Link, A:Visited, A:Active, a * { color:#3B82F6; font-weight:bold; text-decoration:none } - the "a *" part paints the INSIDE each pill directly, so setting color on the anchor alone never reached the label. Everything below forces descendants to inherit from the pill, and pins the anchor states the skin defines. */ .fscQuickBar a, .fscQuickBar a:link, .fscQuickBar a:visited, .fscQuickBar a:active, .fscQuickBar a:hover { text-decoration: none !important; } .fscQuickBar .qbPill, .fscQuickBar .qbPill:link, .fscQuickBar .qbPill:visited, .fscQuickBar .qbPill:active { color: var(--fsc-text-soft, #5A6678) !important; font-weight: 600 !important; } .fscQuickBar .qbPill:hover { color: var(--fsc-text, #16202E) !important; } /* labels inherit the pill's resolved color/weight instead of the skin's */ .fscQuickBar .qbPill > span, .fscQuickBar .qbPill *:not(.qbNew) { color: inherit !important; font-weight: inherit !important; } /* active / equivalent states re-asserted AFTER the base pin above */ .fscQuickBar .qbPill.is-here, .fscQuickBar .qbPill.is-here:link, .fscQuickBar .qbPill.is-here:visited, .fscQuickBar .qbPill.is-here:hover, .fscQuickBar .qbPill.is-equiv, .fscQuickBar .qbPill.is-equiv:link, .fscQuickBar .qbPill.is-equiv:visited, .fscQuickBar .qbPill.is-equiv:hover { color: var(--qbAccent, #2563EB) !important; font-weight: 800 !important; } [data-fsc-theme="dark"] .fscQuickBar .qbPill, [data-fsc-theme="dark"] .fscQuickBar .qbPill:link, [data-fsc-theme="dark"] .fscQuickBar .qbPill:visited, [data-fsc-theme="dark"] .fscQuickBar .qbPill:active { color: var(--fsc-text-soft, #94A0B8) !important; } [data-fsc-theme="dark"] .fscQuickBar .qbPill:hover { color: var(--fsc-text, #E9EEF8) !important; } [data-fsc-theme="dark"] .fscQuickBar .qbPill.is-here, [data-fsc-theme="dark"] .fscQuickBar .qbPill.is-here:link, [data-fsc-theme="dark"] .fscQuickBar .qbPill.is-here:visited, [data-fsc-theme="dark"] .fscQuickBar .qbPill.is-here:hover, [data-fsc-theme="dark"] .fscQuickBar .qbPill.is-equiv, [data-fsc-theme="dark"] .fscQuickBar .qbPill.is-equiv:link, [data-fsc-theme="dark"] .fscQuickBar .qbPill.is-equiv:visited, [data-fsc-theme="dark"] .fscQuickBar .qbPill.is-equiv:hover { color: color-mix(in srgb, var(--qbAccent, #4D8DFF) 72%, #ffffff) !important; } /* the New badge keeps its own colors (excluded from the inherit rule) */ .fscQuickBar .qbPill .qbNew { color: var(--fsc-green, #149A53) !important; font-weight: 800 !important; } /* sport popover rows: same "a *" problem for their label text */ .fscQuickBar .qbSportItem, .fscQuickBar .qbSportItem:link, .fscQuickBar .qbSportItem:visited, .fscQuickBar .qbSportItem:active { color: var(--fsc-text, #16202E) !important; font-weight: 600 !important; } .fscQuickBar .qbSportItem * { color: inherit !important; font-weight: inherit !important; } .fscQuickBar .qbSportItem:hover, .fscQuickBar .qbSportItem.is-current { color: var(--qbAccent, #2563EB) !important; } [data-fsc-theme="dark"] .fscQuickBar .qbSportItem, [data-fsc-theme="dark"] .fscQuickBar .qbSportItem:link, [data-fsc-theme="dark"] .fscQuickBar .qbSportItem:visited { color: var(--fsc-text, #E9EEF8) !important; } [data-fsc-theme="dark"] .fscQuickBar .qbSportItem:hover, [data-fsc-theme="dark"] .fscQuickBar .qbSportItem.is-current { color: color-mix(in srgb, var(--qbAccent, #4D8DFF) 72%, #ffffff) !important; } /* chip + More are