/* FNHL redesign — loaded last by Header.php, overrides STHSMain.css site-wide. Menu section below applies everywhere; homepage-scoped rules are further down, scoped under #FNHLHome so they never leak onto stock STHS pages. */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap'); :root{ --fnhl-bg:#E7EEF6; --fnhl-bg-2:#F2F7FC; --fnhl-card:#FFFFFF; --fnhl-card-2:#EEF4FA; --fnhl-line:#D6E1EC; --fnhl-line-2:#BCCDDE; --fnhl-ink:#132539; --fnhl-ink-2:#4C5F76; --fnhl-ink-3:#8091A4; --fnhl-ice:#1583C7; --fnhl-red:#D8232A; --fnhl-amber:#B4780C; --fnhl-radius:10px; --fnhl-shadow:0 1px 2px rgba(16,35,61,.05); } /* Site-wide: suppress the stock "rotate to landscape" overlay. Menu.php toggles it on via inline style (JS, core file, can't be edited) on mobile portrait — !important beats that inline style since STHSMain.css's own rule for it has no !important. */ #STHSPortraitOverlay { display:none !important; } /* ========================================================================== Task A — Menu (site-wide, logged-out and logged-in alike for look & feel; the item pruning itself is handled logged-out-only in STHSMenuEnd.php) ========================================================================== */ /* Remove the stock STHS header photo + Pro/Farm/League shield images */ #cssmenu li.MenuImage { display:none; } /* Re-point the STHS menu theme variables at the FNHL palette regardless of which stock theme (0-2) is selected, so the nav always reads light/ice. */ #cssmenu, #cssmenuLogin { --main-menu-background-color: var(--fnhl-bg-2); --main-menu-text-color: var(--fnhl-ink-2); --main-menu-background-color-hover: #E3EDF6; --main-menu-text-color-hover: var(--fnhl-ice); --main-submenu-background-color: #ffffff; --main-submenu-text-color: var(--fnhl-ink-2); --main-submenu-background-color-hover: #E3EDF6; --main-submenu-text-color-hover: var(--fnhl-ice); } .FNHLBrandBar { background:var(--fnhl-bg-2); border-bottom:1px solid var(--fnhl-line); } .FNHLBrandBarInner { max-width:1180px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; } .FNHLBrand { display:inline-flex; align-items:center; gap:14px; } .FNHLBrandLogoLink { display:block; text-decoration:none; } .FNHLBrandLogo { height:80px; width:auto; display:block; } .FNHLBrandTagline { font-family:'Barlow Condensed', sans-serif; font-weight:600; font-size:13px; letter-spacing:1.8px; text-transform:uppercase; color:var(--fnhl-ink-3); white-space:nowrap; } .FNHLBrandLoginSlot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .FNHLBrandGMActions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .FNHLBrandGMActions a { font-family:'Barlow Condensed', sans-serif; font-weight:600; letter-spacing:.6px; text-transform:uppercase; font-size:12px; color:var(--fnhl-ice); border:1px solid var(--fnhl-ice); border-radius:8px; padding:7px 12px; background:transparent; transition:.15s; white-space:nowrap; } .FNHLBrandGMActions a:hover { background:var(--fnhl-ice); color:#fff; } .FNHLBrandLoginSlot .STHSPHP_Login { /* Stock hides this block entirely below max-width:1600px (and again in its own mobile/retina range) — it was originally positioned relative to the header image stock also hides there. Now that it lives in our brand bar instead, it must stay visible at every width, or logged-out visitors on anything but a very wide screen have no way to log in. */ display:block !important; position:static !important; width:auto !important; margin:0 !important; text-align:right; font-family:'Barlow Condensed', sans-serif !important; font-size:14px !important; } .FNHLBrandLoginSlot .STHSPHPLoginButton, .FNHLBrandLoginSlot a.STHSPHPLoginButton, .FNHLBrandLoginSlot .STHSPHPLogoutButton, .FNHLBrandLoginSlot a.STHSPHPLogoutButton { font-family:'Barlow Condensed', sans-serif; font-weight:600; letter-spacing:1px; text-transform:uppercase; font-size:13px; background:var(--fnhl-ice); border:1px solid var(--fnhl-ice); color:#fff; border-radius:8px; padding:8px 16px; } .FNHLBrandLoginSlot .STHSPHPLoginButton:hover, .FNHLBrandLoginSlot .STHSPHPLogoutButton:hover { filter:brightness(1.08); } /* Logged-in only: the team quick-links dropdown (#cssmenuLogin, stock's own separate menu widget) uses Montserrat and its own sizing — nothing to do with our #cssmenu override — and the team-name link has an inline font-size:20px. Both need !important since we're overriding an id selector and an inline style respectively. Scoped to .FNHLBrandLoginSlot so it only affects this moved instance, not team-color links elsewhere on stock pages that reuse the same classes. */ .FNHLBrandLoginSlot #cssmenuLogin { font-family:'Barlow Condensed', sans-serif !important; } .FNHLBrandLoginSlot #cssmenuLogin > ul > li { font-size:13px; } .FNHLBrandLoginSlot #cssmenuLogin ul ul li a { font-family:'Barlow', sans-serif !important; font-weight:400 !important; font-size:13px !important; text-transform:none !important; } .FNHLBrandLoginSlot [class*="STHSPHPTeamHeader_TeamNameColor_"] { font-family:'Barlow Condensed', sans-serif !important; font-size:14px !important; font-weight:600 !important; letter-spacing:1px !important; text-transform:uppercase !important; } /* Team icon strip (.STHSPHPMenuDiv, site-wide, already real STHS crests). Stock hides icons individually at max-width:1200px (STHSMain.css) while the container itself stays visible until its own .STHSPHPMenuDivMobile dropdown fallback appears — leaving a dead empty bar in between. Fix: let icons wrap onto up to 2 rows instead of disappearing at 1200px. Below that, two things need a single shared handoff point instead of stock's own breakpoint: stock's dropdown-trigger media query also fires early (up to 1024px wide) on retina/high-DPI screens, which is what caused icons and the dropdown to show at the same time around ~750px. 32 teams need ~16 per row to fit 2 rows; at the ~24px icon size used below 1200px that's roughly 480px of icons, so 680px gives a safe margin — icons never actually reach a 3rd row before they're hidden. A max-height safety net (2 rows' worth, generous for either icon size) backs this up in case real-world sizing runs a bit differently. */ .STHSPHPMenuDiv { background:var(--fnhl-bg); border-bottom:1px solid var(--fnhl-line); margin:0; padding:8px 20px; display:flex; flex-wrap:wrap; justify-content:center; gap:4px; max-height:80px; overflow:hidden; } .STHSPHPMenuDivTeamImage { width:28px; height:28px; padding:0 4px; border-radius:6px; opacity:.92; transition:.15s; } .STHSPHPMenuDivTeamImage:hover { opacity:1; transform:translateY(-2px); } @media screen and (max-width: 1200px) { .STHSPHPMenuDivTeamImage { display:inline-block; width:24px; height:24px; } } @media screen and (max-width: 680px) { .STHSPHPMenuDiv { display:none; } } @media screen and (min-width: 681px) { .STHSPHPMenuDivMobile { display:none !important; } } /* Main nav */ #cssmenu { font-family:'Barlow Condensed', sans-serif; background:var(--fnhl-bg-2); border-top:1px solid var(--fnhl-line); position:relative; } #cssmenu > ul { margin:0 auto !important; text-align:center; font-size:0; padding:4px 0; max-width:1180px; } #cssmenu > ul > li { float:none; display:inline-block; } #cssmenu > ul > li > a { font-weight:600; font-size:14px; letter-spacing:1.1px; text-transform:uppercase; padding:14px 16px; border-radius:7px; } #cssmenu ul ul li a { font-family:'Barlow', sans-serif; font-weight:400; letter-spacing:.2px; } /* Thin separator between a top-level item and its opened submenu — applies to the submenu