/* ========================================================= RevSports — Configio CSS ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap'); .logo { width: 25%; display: inline-block; vertical-align: middle; } /* ========================================================= THEME BUILDER ONLY — MOBILE FIX ========================================================= */ @media (max-width: 768px) { /* Remove the outer “invisible wall” padding in Theme Builder only */ body:not(:has(#ctl30_pnlPage)) .body { padding-left: 0 !important; padding-right: 0 !important; } /* Remove padding on common outer clamps, but do NOT override their widths */ body:not(:has(#ctl30_pnlPage)) .max, body:not(:has(#ctl30_pnlPage)) .container, body:not(:has(#ctl30_pnlPage)) #content, body:not(:has(#ctl30_pnlPage)) #contentArea, body:not(:has(#ctl30_pnlPage)) .contentArea, body:not(:has(#ctl30_pnlPage)) .page-content, body:not(:has(#ctl30_pnlPage)) .pageContent, body:not(:has(#ctl30_pnlPage)) .main-content, body:not(:has(#ctl30_pnlPage)) .mainContent, body:not(:has(#ctl30_pnlPage)) .grid.padding { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Safety: prevent a 1–2px horizontal scroll without “locking” the builder */ body:not(:has(#ctl30_pnlPage)) { overflow-x: hidden !important; } /* Keep media from causing tiny overflow */ body:not(:has(#ctl30_pnlPage)) img, body:not(:has(#ctl30_pnlPage)) picture, body:not(:has(#ctl30_pnlPage)) video { max-width: 100% !important; height: auto !important; } /* IMPORTANT: We intentionally do NOT touch: - .grid.spaced > .col padding - [class*="col-"] padding - width/max-width rules Those are what changed the “look” in your newer screenshot. */ } /* ========================================================= CMS PAGES ========================================================= */ /* Global safety (as you had it) */ html, body { margin: 0; max-width: 100%; overflow-x: hidden; /* stable across browsers */ } /* CMS page container: true full width */ #ctl30_pnlPage, div[id$="_pnlPage"].content-page-content, div[id*="_pnlPage"].content-page-content { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Common wrappers INSIDE CMS container */ #ctl30_pnlPage #content, #ctl30_pnlPage #contentArea, #ctl30_pnlPage .page-content, #ctl30_pnlPage .pageContent, #ctl30_pnlPage .main-content, #ctl30_pnlPage .mainContent, #ctl30_pnlPage .contentArea, div[id$="_pnlPage"].content-page-content #content, div[id$="_pnlPage"].content-page-content #contentArea, div[id$="_pnlPage"].content-page-content .page-content, div[id$="_pnlPage"].content-page-content .pageContent, div[id$="_pnlPage"].content-page-content .main-content, div[id$="_pnlPage"].content-page-content .mainContent, div[id$="_pnlPage"].content-page-content .contentArea { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } /* Remove Configio “page card” outline */ #ctl30_pnlPage .panel.round.panel-content-page, #ctl30_pnlPage .panel-content.round-bottom, #ctl30_pnlPage .panel-header.round-top, div[id$="_pnlPage"].content-page-content .panel.round.panel-content-page, div[id$="_pnlPage"].content-page-content .panel-content.round-bottom, div[id$="_pnlPage"].content-page-content .panel-header.round-top { border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; } /* Grid wrappers sometimes have borders/padding */ #ctl30_pnlPage .grid, #ctl30_pnlPage .grid.padding, div[id$="_pnlPage"].content-page-content .grid, div[id$="_pnlPage"].content-page-content .grid.padding { border: 0 !important; outline: none !important; box-shadow: none !important; } /* Kill grid padding that creates fake gutters */ #ctl30_pnlPage .grid.padding, div[id$="_pnlPage"] .grid.padding { padding-left: 0 !important; padding-right: 0 !important; } #ctl30_pnlPage .row, div[id$="_pnlPage"].content-page-content .row { margin-left: 0 !important; margin-right: 0 !important; } #ctl30_pnlPage [class*="col-"], div[id$="_pnlPage"].content-page-content [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } /* Hide CMS page title blocks */ #ctl30_pnlPage h1.margin-bottom.h3, div[id$="_pnlPage"].content-page-content h1.margin-bottom.h3 { display: none !important; margin: 0 !important; padding: 0 !important; } #ctl30_pnlPage .content-page-title, #ctl30_pnlPage .page-title, #ctl30_pnlPage .title-bar, div[id$="_pnlPage"].content-page-content .content-page-title, div[id$="_pnlPage"].content-page-content .page-title, div[id$="_pnlPage"].content-page-content .title-bar { display: none !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } /* Desktop full-bleed behavior (no 100vw) */ #ctl30_pnlPage .panel.round.panel-content-page, div[id$="_pnlPage"] .panel.round.panel-content-page, #ctl30_pnlPage .panel-content.round-bottom, div[id$="_pnlPage"] .panel-content.round-bottom { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* RevSports root blocks full width */ #ctl30_pnlPage .revs-home, #ctl30_pnlPage .revs-hero, #ctl30_pnlPage section, div[id$="_pnlPage"] .revs-home, div[id$="_pnlPage"] .revs-hero { width: 100% !important; max-width: none !important; margin: 0 !important; } /* Media should not overflow */ #ctl30_pnlPage img, #ctl30_pnlPage picture, #ctl30_pnlPage video { max-width: 100% !important; height: auto !important; } /* CMS Mobile Fix */ @media (max-width: 768px) { #ctl30_pnlPage, #ctl30_pnlPage .panel, #ctl30_pnlPage .panel-content, #ctl30_pnlPage .panel.round.panel-content-page, #ctl30_pnlPage .panel-content.round-bottom, #ctl30_pnlPage .grid, #ctl30_pnlPage .grid.padding, div[id$="_pnlPage"], div[id$="_pnlPage"] .panel, div[id$="_pnlPage"] .panel-content, div[id$="_pnlPage"] .panel.round.panel-content-page, div[id$="_pnlPage"] .panel-content.round-bottom, div[id$="_pnlPage"] .grid, div[id$="_pnlPage"] .grid.padding { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; left: auto !important; right: auto !important; transform: none !important; overflow-x: visible !important; } #revs-home, #revs-programs, #revs-why, #revs-sports { width: 100% !important; max-width: 100% !important; margin: 0 !important; } #revs-home .revs-wrap, #revs-programs .revs-wrap, #revs-why .revs-wrap, #revs-sports .revs-wrap { margin-left: auto !important; margin-right: auto !important; padding-left: 16px !important; padding-right: 16px !important; } } /* ========================================================= CMS ONLY — remove the outer width clamp causing white gutters ========================================================= */ body:has(#ctl30_pnlPage) .max, body:has(#ctl30_pnlPage) .container, body:has(#ctl30_pnlPage) .body, body:has(#ctl30_pnlPage) .page, body:has(#ctl30_pnlPage) #content, body:has(#ctl30_pnlPage) #contentArea, body:has(#ctl30_pnlPage) .contentArea, body:has(#ctl30_pnlPage) .page-content, body:has(#ctl30_pnlPage) .pageContent, body:has(#ctl30_pnlPage) .main-content, body:has(#ctl30_pnlPage) .mainContent { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================= CMS ONLY — Fix "Our Programs" ========================================================= */ body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .col, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .row > .col { position: relative !important; overflow: hidden !important; border-radius: 24px !important; background: #ffffff !important; } body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .col img, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .row > .col img { display: block !important; width: 100% !important; height: auto !important; position: static !important; transform: none !important; margin: 0 !important; z-index: auto !important; } body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .col h1, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .col h2, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .col h3, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .col p, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .col a, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .col span, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .row > .col h1, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .row > .col h2, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .row > .col h3, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .row > .col p, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .row > .col a, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .row > .col span { position: static !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; text-shadow: none !important; color: #111827 !important; } body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .col h3, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .row > .col h3 { margin: 16px 16px 6px !important; font-weight: 800 !important; } body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .col p, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .row > .col p { margin: 0 16px 12px !important; opacity: 0.9 !important; } body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .col a, body:has(#ctl30_pnlPage) #revs-home .grid.spaced > .row > .col a { display: inline-block !important; margin: 0 16px 18px !important; padding: 12px 18px !important; border-radius: 999px !important; background: #EEF1FA !important; border: 1px solid rgba(60, 75, 160, 0.25) !important; color: #3C4BA0 !important; font-weight: 800 !important; text-decoration: none !important; } /* ========================================================= Theme Builder ONLY — Mobile edge breathing room ========================================================= */ @media (max-width: 768px) { body:not(:has(#ctl30_pnlPage)) .body, body:not(:has(#ctl30_pnlPage)) .page, body:not(:has(#ctl30_pnlPage)) #content, body:not(:has(#ctl30_pnlPage)) #contentArea, body:not(:has(#ctl30_pnlPage)) .contentArea, body:not(:has(#ctl30_pnlPage)) .page-content, body:not(:has(#ctl30_pnlPage)) .pageContent, body:not(:has(#ctl30_pnlPage)) .main-content, body:not(:has(#ctl30_pnlPage)) .mainContent { padding-left: 14px !important; padding-right: 14px !important; } body:not(:has(#ctl30_pnlPage)) img, body:not(:has(#ctl30_pnlPage)) picture, body:not(:has(#ctl30_pnlPage)) video { border-radius: 6px; } } /* ========================================================= THEME BUILDER ONLY ========================================================= */ @media (max-width: 768px) { body:not(:has(#ctl30_pnlPage)) .pre-header, body:not(:has(#ctl30_pnlPage)) .header, body:not(:has(#ctl30_pnlPage)) .menu { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 0 !important; padding-right: 0 !important; border-radius: 0 !important; } body:not(:has(#ctl30_pnlPage)) .pre-header > .max, body:not(:has(#ctl30_pnlPage)) .header > .max, body:not(:has(#ctl30_pnlPage)) .menu > .max { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body:not(:has(#ctl30_pnlPage)) .pre-header > .max, body:not(:has(#ctl30_pnlPage)) .header > .max, body:not(:has(#ctl30_pnlPage)) .menu > .max { padding-left: 14px !important; padding-right: 14px !important; box-sizing: border-box !important; } body:not(:has(#ctl30_pnlPage)) .pre-header .account-buttons, body:not(:has(#ctl30_pnlPage)) .header *, body:not(:has(#ctl30_pnlPage)) .menu * { max-width: 100% !important; } } /* ========================================================= RevSports: lock PRE-HEADER + HEADER + MENU as one stack Fixes the big white gap + keeps only the top stack blue ========================================================= */ :root { --revs-blue: #3C4BA0; --revs-preheader-h: 34px; --revs-header-h: 78px; --revs-menu-h: 56px; --revs-stack-h: calc(var(--revs-preheader-h) + var(--revs-header-h) + var(--revs-menu-h)); } .page .pre-header, .page .header, .page .menu { position: fixed !important; left: 0 !important; right: 0 !important; width: 100% !important; background: var(--revs-blue) !important; background-color: var(--revs-blue) !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } .page .pre-header { top: 0 !important; height: var(--revs-preheader-h) !important; z-index: 9999 !important; } .page .header { top: var(--revs-preheader-h) !important; height: var(--revs-header-h) !important; z-index: 9998 !important; } .page .menu { top: calc(var(--revs-preheader-h) + var(--revs-header-h)) !important; height: var(--revs-menu-h) !important; z-index: 9997 !important; } .page .body { padding-top: var(--revs-stack-h) !important; } .page .pre-header::before, .page .pre-header::after, .page .header::before, .page .header::after, .page .menu::before, .page .menu::after { content: none !important; display: none !important; } .page .pre-header .max, .page .header .max, .page .menu .max { background: var(--revs-blue) !important; border: 0 !important; box-shadow: none !important; } .page .pre-header *, .page .header *, .page .menu * { color: #fff !important; } .page, .page .body { background: transparent !important; } @media (max-width: 768px) { :root { --revs-preheader-h: 32px; --revs-header-h: 70px; --revs-menu-h: 54px; } } .menu .drop-down, .menu .dropdown-menu, .menu [data-toggle="drop-down"] + ul, .menu .menu-wrapper ul ul { background: #3C4BA0 !important; } .menu .drop-down a, .menu .dropdown-menu a, .menu .menu-wrapper ul ul a, .menu .menu-wrapper ul ul .menu-item-text { color: #ffffff !important; } .menu .drop-down a:hover, .menu .drop-down a:focus, .menu .dropdown-menu a:hover, .menu .dropdown-menu a:focus, .menu .menu-wrapper ul ul a:hover, .menu .menu-wrapper ul ul a:focus { background: rgba(255, 255, 255, 0.12) !important; color: #ffffff !important; } .menu .drop-down li, .menu .dropdown-menu li, .menu .menu-wrapper ul ul li { border-color: rgba(255, 255, 255, 0.18) !important; } /* =============================== Mobile Menu Button Styling =============================== */ @media (max-width: 768px) { .menu .btn-menu-toggle { background: #ffffff !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; } .menu .btn-menu-toggle svg, .menu .btn-menu-toggle svg use { fill: #000000 !important; } .menu.menu-open .btn-menu-toggle, .menu .btn-menu-toggle[aria-expanded="true"] { background: #D12026 !important; } .menu.menu-open .btn-menu-toggle svg, .menu.menu-open .btn-menu-toggle svg use, .menu .btn-menu-toggle[aria-expanded="true"] svg, .menu .btn-menu-toggle[aria-expanded="true"] svg use { fill: #ffffff !important; } } /* =========================== RevSports GLOBAL star background =========================== */ :root { --revs-blue: #3C4BA0; --revs-red: #D12026; --revs-stars-inset: 18px; --revs-stars-opacity: 0.18; --revs-stars-size: 900px; } .page { position: relative; isolation: isolate; background: #fff; } .page::before { content: ""; position: fixed; inset: var(--revs-stars-inset); z-index: 0; pointer-events: none; opacity: var(--revs-stars-opacity); background-repeat: repeat; background-position: 0 0; background-size: var(--revs-stars-size) var(--revs-stars-size); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cdefs%3E%3Cpath id='s' d='M0 -18 L5 -6 L18 -5 L8 3 L11 16 L0 9 L-11 16 L-8 3 L-18 -5 L-5 -6 Z'/%3E%3C/defs%3E%3C!-- OUTLINE STARS --%3E%3Cg fill='none' stroke='%233C4BA0' stroke-width='3.6' opacity='0.90'%3E%3Cg transform='translate(90 90)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(300 120)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(520 90)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(740 140)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(160 330)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(420 300)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(680 320)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(260 520)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(560 520)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(820 520)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(120 740)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(420 760)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(760 740)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3C/g%3E%3Cg fill='none' stroke='%23D12026' stroke-width='3.6' opacity='0.86'%3E%3Cg transform='translate(200 170)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(620 170)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(840 220)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(90 460)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(360 440)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(760 420)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(160 620)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(660 640)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(840 720)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3C/g%3E%3C!-- FILLED STARS (smaller) --%3E%3Cg fill='%233C4BA0' opacity='0.35'%3E%3Cg transform='translate(120 220) scale(0.75)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(460 170) scale(0.65)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(720 260) scale(0.70)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(320 360) scale(0.70)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(540 380) scale(0.62)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(260 700) scale(0.70)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(620 760) scale(0.62)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23D12026' opacity='0.32'%3E%3Cg transform='translate(260 250) scale(0.68)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(820 320) scale(0.62)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(600 470) scale(0.70)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(420 640) scale(0.66)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3Cg transform='translate(740 660) scale(0.62)'%3E%3Cuse href='%23s'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .page > * { position: relative; z-index: 1; } /* Mobile: slightly smaller inset so it still looks full */ @media (max-width: 768px) { :root { --revs-stars-inset: 14px; } /* Stronger gap if header/menu are sticky */ body .page .body { padding-top: 24px !important; } } /* ========================================================= GLOBAL — Push main menu items to the RIGHT (desktop) ========================================================= */ @media (min-width: 769px) { .menu .menu-wrapper.menu-horizontal > ul { display: flex !important; /* ensure flex so justify-content works */ justify-content: flex-end !important; width: 100% !important; } .menu .menu-wrapper.menu-horizontal { width: 100% !important; padding-right: 275px !important; /* adjust if you want more/less */ box-sizing: border-box !important; } .menu .max { width: 100% !important; max-width: none !important; } } /* ========================================================= GLOBAL — Increase top menu font size Applies to ALL pages & menus ========================================================= */ @media (min-width: 769px) { .menu .menu-wrapper > ul > li > a, .menu .menu-item-text { font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.2px; } } @media (max-width: 768px) { .menu .menu-wrapper > ul > li > a, .menu .menu-item-text { font-size: 18px !important; font-weight: 700 !important; } } /* ========================================================= THEME BUILDER FRIENDLY MENU FORMAT (also improves tablet widths) ========================================================= */ @media (max-width: 1024px) { .page .pre-header, .page .header, .page .menu { height: auto !important; } .menu .menu-wrapper.menu-horizontal > ul { display: flex !important; flex-wrap: nowrap !important; /* prevents 2-line/column splitting */ justify-content: flex-start !important; align-items: center !important; gap: 14px !important; overflow-x: auto !important; /* keeps it looking clean in builder */ overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; white-space: nowrap !important; padding: 10px 14px !important; scrollbar-width: none; /* Firefox hide scrollbar */ } .menu .menu-wrapper.menu-horizontal > ul::-webkit-scrollbar { display: none; } .menu .menu-wrapper.menu-horizontal > ul > li { flex: 0 0 auto !important; } .menu .menu-wrapper > ul > li > a, .menu .menu-item-text { font-size: 15px !important; font-weight: 700 !important; line-height: 1.1 !important; } .menu .menu-wrapper > ul > li > a { padding-top: 8px !important; padding-bottom: 8px !important; } } /* ========================================================= NUCLEAR FIX: remove the white gap + push content down Switch header/menu stack from FIXED → STICKY ========================================================= */ :root { --revs-blue: #3C4BA0; } .page .pre-header, .page .header, .page .menu { position: sticky !important; left: 0 !important; right: 0 !important; width: 100% !important; background: var(--revs-blue) !important; background-color: var(--revs-blue) !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } .page .pre-header { top: 0 !important; z-index: 9999 !important; } .page .header { top: 34px !important; z-index: 9998 !important; } .page .menu { top: 112px !important; z-index: 9997 !important; } /* 34 + 78 */ @media (max-width: 768px) { .page .header { top: 32px !important; } .page .menu { top: 102px !important; } /* 32 + 70 */ } /* Sticky doesn't need the old forced padding-top */ .page .body { padding-top: 0 !important; } /* Spacing: menu → content */ .page .menu + .body { margin-top: 22px !important; /* adjust 16–32px */ } /* Kill any separator/pseudo lines inside the menu wrapper */ .page .menu::before, .page .menu::after, .page .menu .max::before, .page .menu .max::after, .page .menu-wrapper::before, .page .menu-wrapper::after { content: none !important; display: none !important; } /* ========================================================= RevSports — SNAP @ 1400px (CLEAN + FUNCTIONAL) Goals: 1) Menu items disappear <=1400px 2) Functional hamburger appears <=1400px 3) Hamburger LOCKED far-left, under logo, white bg + black bars 4) Kill the white gap between logo (header) and menu 5) Restore slideshow behavior (prevent CSS from blocking it) ========================================================= */ /* ========================================================= (A) KILL THE WHITE GAP BETWEEN HEADER + MENU ========================================================= */ .page .header, .page .header .max, .page .menu, .page .menu .max { background: var(--revs-blue, #3C4BA0) !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } .page .header { margin: 0 !important; padding: 0 !important; } .page .menu { margin: 0 !important; padding: 0 !important; } /* Remove any separator strips/pseudo-elements that can show as a white band */ .page .header::before, .page .header::after, .page .header .max::before, .page .header .max::after, .page .menu::before, .page .menu::after, .page .menu .max::before, .page .menu .max::after { content: none !important; display: none !important; } /* ========================================================= (B) SLIDESHOW SAFE PATCH Common reasons slideshows “stop” after heavy header/menu CSS: - parent wrappers get transform/overflow that breaks positioning - z-index stacking traps clicks This patch is minimal + safe. ========================================================= */ /* Don’t allow global header/menu stacking rules to trap slideshow clicks */ .revs-slider, .revs-hero, .revs-bleed { pointer-events: auto !important; } /* Prevent parent transforms from breaking position/fixed logic in sliders */ .revs-slider, .revs-slider * { transform: none; } /* If any global CSS accidentally made slideshow items invisible */ .revs-slide, .revs-slider img { opacity: 1 !important; visibility: visible !important; } /* Make sure slider area can render (some themes set overflow hidden badly) */ .revs-slider { overflow: visible !important; } /* ========================================================= (C) SNAP RULES (ONLY ONE SYSTEM) <= 1400px = Hamburger mode >= 1401px = Desktop horizontal menu ========================================================= */ /* ---------- Hamburger mode (<=1400px) ---------- */ @media (max-width: 1400px) { /* One consistent inset so logo + hamburger line up */ :root { --revs-left-inset: 18px; /* adjust 14–26px if needed */ } /* Ensure header/menu align to same left edge */ .page .header .max, .page .menu .max { width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: var(--revs-left-inset) !important; padding-right: 14px !important; box-sizing: border-box !important; } /* Force the menu bar content to stay LEFT (never centered) */ .page .menu .max { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; } /* Keep wrapper pinned far-left */ .menu .menu-wrapper { order: -1 !important; margin-left: 0 !important; margin-right: auto !important; flex: 0 0 auto !important; position: relative !important; left: 0 !important; } /* SHOW hamburger button (slightly bigger than your current “60%” state) */ .menu .menu-wrapper > .btn-menu-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Slightly bigger (stable) */ transform: scale(1.15) !important; transform-origin: left center !important; /* White background + black bars (always) */ background: #ffffff !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; /* Good clickable area */ padding: 10px 14px !important; } .menu .menu-wrapper > .btn-menu-toggle svg, .menu .menu-wrapper > .btn-menu-toggle svg use { fill: #000000 !important; } /* IMPORTANT: Hide horizontal menu items WITHOUT breaking Configio toggle JS. We hide the UL by default, BUT allow it to show when Configio opens it (inline display:block). */ .menu .menu-wrapper.menu-horizontal > ul { display: none !important; } /* OPENED STATE (Configio uses inline style display:block) */ .menu .menu-wrapper > ul[style*="display: block"], .menu .menu-wrapper > ul[style*="display:block"] { display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; top: calc(100% + 8px) !important; width: 100% !important; max-width: 100vw !important; background: var(--revs-blue, #3C4BA0) !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 10px 0 !important; z-index: 9999 !important; box-sizing: border-box !important; } /* Dropdown links */ .menu .menu-wrapper > ul[style*="display"] > li > a { display: block !important; padding: 12px 16px !important; white-space: normal !important; } } /* ---------- Desktop mode (>=1401px) ---------- */ @media (min-width: 1401px) { /* Hide hamburger */ .menu .menu-wrapper > .btn-menu-toggle { display: none !important; transform: none !important; } /* Show horizontal menu */ .menu .menu-wrapper.menu-horizontal > ul { display: flex !important; } } /* ========================================================= REVSPORTS — FIXES FOR: 1) White gap during collapse 2) Hamburger MUST ALWAYS be LEFT (no right-then-left) Paste at VERY BOTTOM ========================================================= */ /* --- (1) Kill the white gap DURING COLLAPSE --- This targets the exact seam between header and menu. */ .page .header, .page .menu { margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: var(--revs-blue, #3C4BA0) !important; background-image: none !important; } /* If Configio injects a 1px separator/border/pseudo element, kill it */ .page .header::before, .page .header::after, .page .menu::before, .page .menu::after, .page .header .max::before, .page .header .max::after, .page .menu .max::before, .page .menu .max::after { content: none !important; display: none !important; } /* If the seam is still visible as a 1px “sliver”, overlap by 1px */ .page .header + .menu { margin-top: -1px !important; } /* --- (2) HAMBURGER ALWAYS LEFT as soon as it appears --- The “right first” behavior is caused by desktop rules still applying (justify-content:flex-end, padding-right, centered .max, etc). We neutralize those ONLY in the hamburger range. */ @media (max-width: 1400px) { /* Remove any centering clamp that can shove content right */ body .page .menu .max { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; display: flex !important; justify-content: flex-start !important; align-items: center !important; } /* HARD OVERRIDE: cancel any desktop “push menu right” rules */ body .menu .menu-wrapper.menu-horizontal { padding-right: 0 !important; margin-right: 0 !important; } body .menu .menu-wrapper.menu-horizontal > ul { justify-content: flex-start !important; } /* LOCK the wrapper to the far-left */ body .menu .menu-wrapper { order: -999 !important; margin-left: 0 !important; margin-right: auto !important; left: 0 !important; right: auto !important; float: none !important; justify-self: flex-start !important; align-self: center !important; } /* LOCK the hamburger button itself to the far-left */ body .menu .menu-wrapper > .btn-menu-toggle { margin-left: 0 !important; margin-right: 0 !important; position: relative !important; left: 0 !important; right: auto !important; /* keep your required styling */ background: #ffffff !important; } body .menu .menu-wrapper > .btn-menu-toggle svg, body .menu .menu-wrapper > .btn-menu-toggle svg use { fill: #000000 !important; } } /* ========================================================= RevSports — SNAP @ 1400px (CLEAN + WORKING) Goals: 1) Menu items disappear (<=1400px) 2) Functional hamburger appears (<=1400px) 3) Hamburger LOCKED far-left under logo (white bg + black bars) 4) No white gap between logo/header and menu 5) Dropdown shows fully (scrolls if needed) NOTE: Targets ONLY Configio menu wrapper id: #menu-render-id-0 ========================================================= */ /* ========================================================= (0) ALWAYS: Remove “white gap” + any separator strips ========================================================= */ .page .header, .page .header .max, .page .menu, .page .menu .max { background: var(--revs-blue, #3C4BA0) !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* Kill spacing that becomes a “band” when collapsing */ .page .header, .page .menu { margin: 0 !important; padding: 0 !important; } .page .header::before, .page .header::after, .page .header .max::before, .page .header .max::after, .page .menu::before, .page .menu::after, .page .menu .max::before, .page .menu .max::after { content: none !important; display: none !important; } /* Make sure nothing is clipping the dropdown */ .page .menu, .page .menu .max, #menu-render-id-0 { overflow: visible !important; } /* ========================================================= (A) DESKTOP: >= 1401px — SHOW HORIZONTAL MENU, HIDE HAMBURGER ========================================================= */ @media (min-width: 1401px) { /* Hide hamburger button */ #menu-render-id-0 > .btn-menu-toggle { display: none !important; transform: none !important; } /* Show horizontal list (do NOT force on all ULs, only this menu) */ #menu-render-id-0.menu-horizontal > ul { display: flex !important; } } /* ========================================================= (B) HAMBURGER MODE: <= 1400px — HIDE ITEMS, SHOW BUTTON (LOCKED LEFT) ========================================================= */ @media (max-width: 1400px) { :root { --revs-left-inset: 18px; /* aligns hamburger under logo */ --revs-hamburger-scale: 1.55; /* slightly bigger than before */ } /* Make header + menu share the same left inset so they line up */ .page .header .max, .page .menu .max { max-width: none !important; width: 100% !important; margin: 0 !important; padding-left: var(--revs-left-inset) !important; padding-right: 14px !important; box-sizing: border-box !important; } /* Keep menu bar content pinned LEFT */ .page .menu .max { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; } /* Put the menu wrapper FIRST (far-left) and stop any drifting */ #menu-render-id-0 { order: -1 !important; margin-left: 0 !important; margin-right: auto !important; flex: 0 0 auto !important; position: relative !important; left: 0 !important; z-index: 10000 !important; } /* SHOW hamburger button (white bg + black bars) */ #menu-render-id-0 > .btn-menu-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: scale(var(--revs-hamburger-scale)) !important; transform-origin: left center !important; background: #ffffff !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; padding: 10px 14px !important; } #menu-render-id-0 > .btn-menu-toggle svg, #menu-render-id-0 > .btn-menu-toggle svg use { fill: #000000 !important; } /* HIDE horizontal menu items in hamburger mode IMPORTANT: no !important so Configio can still open via inline display:block */ #menu-render-id-0.menu-horizontal > ul { display: none; } /* OPEN STATE: Configio sets inline display:block — style dropdown here */ #menu-render-id-0 > ul[style*="display: block"], #menu-render-id-0 > ul[style*="display:block"] { display: block !important; position: absolute !important; left: 0 !important; right: auto !important; top: calc(100% + 8px) !important; /* Make it readable and ensure you can see ALL items (scroll if needed) */ width: min(360px, 92vw) !important; max-height: calc(100vh - 160px) !important; overflow-y: auto !important; overflow-x: hidden !important; background: var(--revs-blue, #3C4BA0) !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 10px 0 !important; z-index: 10001 !important; box-sizing: border-box !important; } /* Dropdown links */ #menu-render-id-0 > ul[style*="display"] > li > a { display: block !important; padding: 12px 16px !important; white-space: normal !important; } } /* ========================================================= RevSports — PATCH (paste at VERY BOTTOM) Fixes: 1) White gap between header and menu 2) Hamburger icon too big (shrink slightly) ========================================================= */ @media (max-width: 1400px) { /* --- (1) Hamburger slightly smaller --- */ :root { --revs-hamburger-scale: 1.25; /* was 1.55 */ } /* In case any other rule overrides the variable approach */ #menu-render-id-0 > .btn-menu-toggle { transform: scale(var(--revs-hamburger-scale)) !important; transform-origin: left center !important; } /* --- (2) Kill the white gap (force bars to touch + remove stray spacing) --- */ .page .header, .page .menu { margin: 0 !important; padding: 0 !important; border: 0 !important; } .page .header .max, .page .menu .max { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; } /* This is the “last resort” gap killer: overlap menu upward by 1px */ .page .menu { top: -1px !important; position: relative !important; } /* Make sure nothing in the menu area is painting a white strip */ .page .menu, .page .menu .max, .page .menu .menu-wrapper, #menu-render-id-0 { background: var(--revs-blue, #3C4BA0) !important; background-image: none !important; box-shadow: none !important; } /* Hide any micro separators that can render as a line/band */ .page .menu::before, .page .menu::after, .page .menu .max::before, .page .menu .max::after { content: none !important; display: none !important; } } /* ========================================================= FINAL TUNE — Hamburger size only (white gap already fixed, layout stays intact) ========================================================= */ @media (max-width: 1400px) { /* Reduce hamburger size (from oversized to balanced) */ #menu-render-id-0 > .btn-menu-toggle { transform: scale(1.05) !important; /* try 1.0–1.15 if you want finer */ transform-origin: left center !important; padding: 8px 12px !important; /* tighter hitbox */ } } /* ========================================================= FIX: Add space under the blue header/menu (no overlap) Targets the first content panel seen in your inspect ========================================================= */ /* Undo any earlier "push the whole page down" attempts */ html, body { padding-top: 0 !important; margin-top: 0 !important; } /* Add space ABOVE the first content block under the header */ #main-content #divShopCartHeader { margin-top: 24px !important; /* adjust 16–40px */ } /* Optional: if the inner panel still feels tight */ #main-content #divShopCartHeader .panel-content { padding-top: 8px !important; /* small breathing room */ } /* Space between header/menu and content */ div#main-content div#divShopCartHeader { margin-top: 28px !important; display: block !important; } div#main-content { padding-top: 28px !important; } /* ========================================================= Theme Builder: space under header for ALL columns ========================================================= */ /* Apply spacing to all top-level columns under the header */ .col.col-search, .col.col-main, .col.col-cart { padding-top: 28px !important; /* match your center spacing */ } /* ===================================================== MENU: Reserve LEFT space so hamburger never overlaps ===================================================== */ /* Menu wrapper */ #menu-render-id-0{ position: relative !important; display: flex !important; align-items: center !important; /* 🔑 THIS creates space for the hamburger */ padding-left: 56px !important; margin-left: 0 !important; margin-right: auto !important; } /* Hamburger button — hard left, vertically centered */ #menu-render-id-0 > .btn-menu-toggle{ position: absolute !important; left: 12px !important; top: 50% !important; transform: translateY(-50%) !important; width: 40px !important; height: 40px !important; margin: 0 !important; z-index: 1001 !important; } /* Menu list stays to the RIGHT of hamburger */ #menu-render-id-0 > ul{ margin-left: 0 !important; padding-left: 0 !important; width: 100% !important; } /* Safety: never allow right-side snapping */ #menu-render-id-0, #menu-render-id-0 *{ right: auto !important; } /* ========================================================= REPLACEMENT CSS — Hamburger stays LEFT and has its own space Fixes: hidden/under-logo + overlap + right-side jump Targets your inspect: #menu-render-id-0 ========================================================= */ /* Make the menu bar a stable positioning context */ .menu .max{ position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; } /* Give the wrapper REAL height so "top:50%" doesn't land under the header/logo */ #menu-render-id-0{ position: relative !important; display: flex !important; align-items: center !important; /* IMPORTANT: reserve space for the hamburger + prevent it from sitting under the logo */ min-height: 64px !important; padding-left: 64px !important; margin-left: 0 !important; margin-right: auto !important; left: 0 !important; right: auto !important; float: none !important; } /* Pin the hamburger button inside the reserved space */ #menu-render-id-0 > .btn-menu-toggle{ position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; width: 42px !important; height: 42px !important; /* make sure it’s never hidden behind header/logo layers */ z-index: 99999 !important; /* optional (but matches what you wanted before): white button + dark bars */ background: #fff !important; border: 1px solid rgba(0,0,0,.2) !important; border-radius: 999px !important; padding: 0 !important; margin: 0 !important; } /* Keep the UL from colliding with the button */ #menu-render-id-0 > ul{ margin: 0 !important; padding: 0 !important; width: 100% !important; } /* Absolute "never right" safety */ #menu-render-id-0, #menu-render-id-0 *{ right: auto !important; } /* ---- TWEAKS (ADD AFTER your current menu CSS) ---- */ /* 1) Drop it down a hair so the top never clips */ #menu-render-id-0 > .btn-menu-toggle{ top: calc(50% + 2px) !important; /* was 50% */ } /* 2) Make the button more rectangular (pill) instead of round */ #menu-render-id-0 > .btn-menu-toggle{ width: 52px !important; height: 40px !important; border-radius: 12px !important; /* less round than 999px */ } /* ========================================= GLOBAL FONT — MONTSERRAT (SITE ONLY) HARD-EXCLUDES CONFIGIO CMS CODE EDITOR ========================================= */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); /* ===================================================== 1) APPLY MONTSERRAT — LIVE SITE CONTENT ONLY ===================================================== */ .page:not(.admin), .page:not(.admin) *, /* CMS rendered content (front-end only) */ .content-page-content, .content-page-content *, .page-content, .page-content *, .pageContent, .pageContent *, /* shopping / checkout (front-end) */ .productlist, .productlist *, .shoppingcart, .shoppingcart *, .checkout, .checkout *{ font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; } /* ===================================================== 2) HARD EXCLUSIONS — CONFIGIO ADMIN / CODE EDITORS (THIS IS THE CRITICAL PART) ===================================================== */ /* 🔥 Configio CMS Code Editor (your inspect) */ #dialogCodeOptions, #dialogCodeOptions *, .ui-dialog-content, .ui-dialog-content *, .ui-widget-content, .ui-widget-content *, /* Any jQuery UI dialogs */ .ui-dialog, .ui-dialog *, /* Contenteditable editors (often used for code panes) */ [contenteditable], [contenteditable] *, /* MoxieManager */ .moxman-container, .moxman-container *, .moxman-window, .moxman-window *, .moxman-panel, .moxman-panel *, .moxman-dialog, .moxman-dialog *, /* TinyMCE shell */ .tox, .tox *, /* Code editors (CodeMirror / Monaco safety) */ .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *{ font-family: initial !important; letter-spacing: normal !important; font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "clig" 0 !important; } /* ===================================================== 3) TYPOGRAPHY RULES — FRONT-END ONLY ===================================================== */ /* Headings */ .page h1, .page h2, .page h3, .page h4, .page h5, .page h6, .page .revs-h1, .page .revs-h2, .page .revs-h3, .page .revs-h4, .page .page-title, .page .section-title{ font-weight: 900 !important; letter-spacing: -0.6px !important; line-height: 1.08 !important; } /* Body text */ .page p, .page li, .page td, .page th, .page label{ font-weight: 500 !important; line-height: 1.65 !important; } /* Buttons / navigation */ .page button, .page a, .page .revs-btn, .page .btn, .page .menu, .page .nav{ font-weight: 800 !important; letter-spacing: 0.15px !important; } /* Icon font safety */ .moxman-container [class*="icon"], .moxman-container i, .moxman-container .moxman-icon, .moxman-container .moxman-ico{ font-family: revert !important; } /* ========================================================= DESKTOP MENU LOCK (>=1401px) Goal: keep menu START locked just right of the logo position - No centering / no flex-end drift - No padding-right "push" rules - Hamburger rules remain for <=1400px ========================================================= */ @media (min-width: 1401px){ /* 1) Make the menu bar a stable left-anchored row */ .page .menu .max, .menu .max{ display: flex !important; align-items: center !important; justify-content: flex-start !important; /* ✅ left lock */ width: 100% !important; max-width: none !important; margin: 0 !important; /* ✅ SAME LEFT INSET always (tweak 18–26px to match your logo inset) */ padding-left: 22px !important; padding-right: 22px !important; box-sizing: border-box !important; } /* 2) Kill any “push menu to the right” padding that causes drifting */ .menu .menu-wrapper.menu-horizontal{ padding-right: 0 !important; /* ✅ cancels your 275px rule */ margin-right: 0 !important; width: auto !important; max-width: none !important; } /* 3) Lock the UL to the left and keep spacing consistent */ .menu .menu-wrapper.menu-horizontal > ul{ display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; /* ✅ no re-centering */ margin: 0 !important; padding: 0 !important; gap: 18px !important; /* tweak if you want tighter/looser */ width: auto !important; } /* 4) Make sure nothing is “auto-centering” the list */ .menu .menu-wrapper.menu-horizontal > ul, .menu .menu-wrapper.menu-horizontal{ float: none !important; left: auto !important; right: auto !important; } /* 5) Desktop: hamburger OFF (your <=1400px rules handle it there) */ .menu .btn-menu-toggle, #menu-render-id-0 > .btn-menu-toggle{ display: none !important; } } /* ========================================================= DESKTOP: Push the whole menu row to the RIGHT (locked, not centered) Paste at VERY BOTTOM ========================================================= */ @media (min-width: 1401px){ /* Tweak this until it sits perfectly to the right of the logo */ :root{ --revs-menu-left-pad: 190px; } /* try 240–380 */ /* This moves the menu items right without centering them */ .page .menu > .max, .page .menu .max{ padding-left: var(--revs-menu-left-pad) !important; padding-right: 22px !important; box-sizing: border-box !important; display: flex !important; justify-content: flex-start !important; /* stays left-anchored */ } /* Safety: keep the UL left-anchored inside the space */ .page .menu .menu-wrapper.menu-horizontal > ul{ justify-content: flex-start !important; margin-left: 0 !important; } } /* ShoppingCart/ProductList menu safety */ body.page-productlist .page .menu, body.page-productlist .page .menu .max { min-height: 56px !important; overflow: visible !important; } /* If Configio injects a UL in this layout later, don't hide it */ body.page-productlist .page .menu ul { display: block; } /* ========================================================= TOP MENU BUTTONS — WHITE DEFAULT / BLACK TEXT Applies to Search, Cart, Login, Hamburger, etc. ========================================================= */ /* Default (NOT hovered) */ .page .menu button, .page .menu .button, .page .menu a.button, .page .menu .btn, .page .menu .btn-menu-toggle { background-color: #ffffff !important; color: #000000 !important; border: 0 !important; box-shadow: none !important; } /* SVG icons inside buttons */ .page .menu button svg, .page .menu .button svg, .page .menu .btn svg, .page .menu .btn-menu-toggle svg, .page .menu button svg use, .page .menu .btn svg use, .page .menu .btn-menu-toggle svg use { fill: #000000 !important; } /* BADGES (like cart count) */ .page .menu .badge { background: #000000 !important; color: #ffffff !important; } /* ========================================================= HOVER / FOCUS STATE ========================================================= */ .page .menu button:hover, .page .menu .button:hover, .page .menu a.button:hover, .page .menu .btn:hover, .page .menu .btn-menu-toggle:hover, .page .menu button:focus, .page .menu .btn:focus { background-color: #D12026 !important; /* RevSports red */ color: #ffffff !important; } /* Icons on hover */ .page .menu button:hover svg, .page .menu .btn:hover svg, .page .menu .btn-menu-toggle:hover svg, .page .menu button:hover svg use, .page .menu .btn:hover svg use { fill: #ffffff !important; } /* ========================================================= TOP MENU — FORCE MONTSERRAT FONT Applies to Home + ShoppingCart + all pages ========================================================= */ /* Load font (safe to include once) */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap'); /* Menu container */ .page .menu, .page .menu * { font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; } /* Menu links (desktop) */ .page .menu .menu-wrapper > ul > li > a, .page .menu .menu-item-text { font-weight: 700 !important; letter-spacing: 0.2px !important; } /* Buttons in menu (Search / Cart / Login / Hamburger) */ .page .menu button, .page .menu .button, .page .menu .btn, .page .menu .btn-menu-toggle { font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; font-weight: 700 !important; } /* Cart badge number */ .page .menu .badge { font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; font-weight: 800 !important; } /* ========================================================= RevSports — LOCK LOGO + HAMBURGER / MENU ON SCROLL (ALL SIZES) Paste this at the VERY BOTTOM of your CSS. ========================================================= */ :root{ --revs-blue:#3C4BA0; /* Tune these if your real heights differ */ --revs-preheader-h:34px; /* if you don’t have a pre-header, set to 0px */ --revs-header-h:78px; --revs-menu-h:64px; --revs-stack-h: calc(var(--revs-preheader-h) + var(--revs-header-h) + var(--revs-menu-h)); } /* 1) Make the top stack truly “locked” while scrolling */ .page .pre-header, .page .header, .page .menu{ position: fixed !important; left: 0 !important; right: 0 !important; width: 100% !important; background: var(--revs-blue) !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; /* If ANY parent uses transform/filter, fixed can act weird. This helps keep the stack stable. */ transform: none !important; filter: none !important; backface-visibility: hidden; } .page .pre-header{ top: 0 !important; z-index: 9999 !important; height: var(--revs-preheader-h) !important; } .page .header { top: var(--revs-preheader-h) !important; z-index: 9998 !important; height: var(--revs-header-h) !important; } .page .menu { top: calc(var(--revs-preheader-h) + var(--revs-header-h)) !important; z-index: 9997 !important; height: var(--revs-menu-h) !important; } /* 2) Push page content down so it never slides under the fixed stack */ .page .body{ padding-top: var(--revs-stack-h) !important; } /* 3) Keep the menu area “real” height so the hamburger/logo never jump */ .page .header .max, .page .menu .max{ height: 100% !important; display: flex !important; align-items: center !important; } /* 4) Hamburger wrapper stability (prevents it disappearing/jumping on scroll) */ #menu-render-id-0{ position: relative !important; z-index: 10000 !important; } /* Give the wrapper a stable height in mobile/collapsed states */ @media (max-width: 1400px){ #menu-render-id-0{ min-height: var(--revs-menu-h) !important; display: flex !important; align-items: center !important; } } /* 5) Mobile height tuning (optional, but keeps it tight) */ @media (max-width: 768px){ :root{ --revs-preheader-h:32px; --revs-header-h:70px; --revs-menu-h:62px; } } /* ========================================================= HARD FIX — STOP CSS FROM BREAKING CONFIGIO CMS CODE EDITOR Targets: #dialogCodeOptions.ui-dialog-content.ui-widget-content ========================================================= */ /* 1) Admin/CMS code editor: revert ALL typography + layout-affecting styles */ #dialogCodeOptions, #dialogCodeOptions * { font-family: initial !important; font-weight: initial !important; font-style: initial !important; letter-spacing: normal !important; word-spacing: normal !important; text-transform: none !important; text-rendering: auto !important; /* This matters for caret math in some editors */ font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "clig" 0, "kern" 0 !important; /* If any global CSS set transforms/zooms, kill them here */ transform: none !important; filter: none !important; } /* 2) Force a safe monospace font INSIDE the editor (textarea/pre/code) */ #dialogCodeOptions textarea, #dialogCodeOptions input, #dialogCodeOptions pre, #dialogCodeOptions code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; letter-spacing: 0 !important; font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "clig" 0, "kern" 0 !important; } /* 3) Also cover generic jQuery UI dialog content (Configio uses this everywhere) */ .ui-dialog-content, .ui-dialog-content * { font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "clig" 0, "kern" 0 !important; } /* ========================================================= CONFIGIO ADMIN FIX — Code Options editor caret/backspace lag Forces the Code Options dialog back to real monospace + normal spacing (Targets your inspect: #dialogCodeOptions.ui-dialog-content) ========================================================= */ #dialogCodeOptions, #dialogCodeOptions *{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; font-kerning: normal !important; font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "calt" 0 !important; line-height: 1.35 !important; } /* If the editor is a textarea/input inside that dialog, hard reset it too */ #dialogCodeOptions textarea, #dialogCodeOptions input, #dialogCodeOptions pre, #dialogCodeOptions code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; letter-spacing: normal !important; font-weight: 400 !important; } /* Safety: ensure no transforms/zoom are affecting caret mapping */ .ui-dialog, .ui-dialog *{ transform: none !important; zoom: 1 !important; } /* ========================================= RevSports — Mobile Hamburger Menu (BLENDED) - Forces exact RevSports Blue - Dropdown is FLUSH with header (not a card) - Vertical list always - No top "block" look (no radius/shadow at top) ========================================= */ :root{ --revs-blue:#3C4BA0; } /* make sure the mobile menu wrapper is a positioning anchor */ .menu-wrapper-id-2.menu-mobile{ position: relative !important; } /* remove default list spacing */ .menu-wrapper-id-2.menu-mobile ul, .menu-wrapper-id-2.menu-mobile li{ margin: 0 !important; padding: 0 !important; } .menu-wrapper-id-2.menu-mobile ul{ list-style: none !important; } /* ACTIVE dropdown (flush / attached) */ .menu-wrapper-id-2.menu-mobile ul.active{ /* force vertical */ display: flex !important; flex-direction: column !important; align-items: stretch !important; /* size */ width: 220px !important; max-width: 220px !important; /* ATTACH IT to the menu/header instead of floating */ position: absolute !important; left: 0 !important; top: 100% !important; /* key: starts right under the hamburger/menu area */ margin-top: 0 !important; /* no gap */ /* exact RevSports blue */ background: var(--revs-blue) !important; background-image: none !important; /* remove “card” look */ border-radius: 0 0 12px 12px !important; /* only bottom corners */ box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important; /* make it feel like it continues from the header */ border-top: 0 !important; /* spacing */ padding: 10px 0 !important; /* above content */ z-index: 9999 !important; /* override Configio horizontal styles */ float: none !important; white-space: normal !important; /* subtle dropdown motion (keeps it feeling native) */ animation: revsMenuBlendDrop 120ms ease-out both !important; transform-origin: top left !important; } /* each row */ .menu-wrapper-id-2.menu-mobile ul.active li{ width: 100% !important; display: block !important; } /* links */ .menu-wrapper-id-2.menu-mobile ul.active li a{ display: block !important; padding: 12px 16px !important; color: #fff !important; font-weight: 800 !important; font-size: 15px !important; text-decoration: none !important; background: transparent !important; } /* hover/focus */ .menu-wrapper-id-2.menu-mobile ul.active li a:hover, .menu-wrapper-id-2.menu-mobile ul.active li a:focus{ background: rgba(255,255,255,0.12) !important; color: #fff !important; } /* IMPORTANT: ensure the hamburger area is also the exact blue (only affects this menu wrapper area, not sitewide) */ .menu-wrapper-id-2.menu-mobile{ background: var(--revs-blue) !important; background-image: none !important; } /* smooth */ @keyframes revsMenuBlendDrop{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: translateY(0); } } /* smaller screens */ @media (max-width: 900px){ .menu-wrapper-id-2.menu-mobile ul.active{ width: 200px !important; max-width: 200px !important; } } /* ========================================================= RevSports — Clean Mobile Hamburger Dropdown (CSS ONLY) ✅ Clean panel, readable text (no letter-stacking) ✅ RevSports blue (#3C4BA0) ✅ Sits tight to the bar (no obvious gap) ✅ Doesn’t take over the whole screen ========================================================= */ :root { --revs-blue:#3C4BA0; } @media (max-width: 600px){ /* Make sure the dropdown isn't clipped by parents */ .menu-wrapper-id-2.menu-mobile, .menu-wrapper-id-2.menu-mobile *{ overflow: visible !important; } /* Anchor point */ .menu-wrapper-id-2.menu-mobile{ position: relative !important; } /* OPEN MENU PANEL */ .menu-wrapper-id-2.menu-mobile ul.active{ display: flex !important; flex-direction: column !important; position: absolute !important; left: 14px !important; /* ✅ “touches” the blue bar cleanly */ top: 100% !important; margin-top: -2px !important; /* ✅ NORMAL mobile dropdown width (fixes awful wrapping) */ width: min(72vw, 300px) !important; min-width: 240px !important; max-width: calc(100vw - 28px) !important; background: var(--revs-blue) !important; border-radius: 14px !important; padding: 10px 0 !important; box-shadow: 0 14px 30px rgba(0,0,0,.22) !important; /* Keep it usable if you add more links later */ max-height: calc(100vh - 140px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; z-index: 999999 !important; } /* LIST ITEMS */ .menu-wrapper-id-2.menu-mobile ul.active li{ display:block !important; width:100% !important; float:none !important; margin:0 !important; padding:0 !important; } /* LINKS (clean + readable) */ .menu-wrapper-id-2.menu-mobile ul.active li a{ display:block !important; width:100% !important; padding: 12px 16px !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.2 !important; color:#fff !important; text-decoration:none !important; background: transparent !important; /* ✅ prevents the “Pro / gra / ms” nonsense */ word-break: normal !important; overflow-wrap: normal !important; white-space: nowrap !important; } /* Allow only the LONG one to wrap nicely to 2 lines */ .menu-wrapper-id-2.menu-mobile ul.active li a[href*="Search"]{ white-space: normal !important; } /* Hover / tap feedback */ .menu-wrapper-id-2.menu-mobile ul.active li a:hover, .menu-wrapper-id-2.menu-mobile ul.active li a:focus{ background: rgba(255,255,255,.14) !important; } /* Optional: slight rounding on first/last row feel */ .menu-wrapper-id-2.menu-mobile ul.active li:first-child a{ border-top-left-radius:14px !important; border-top-right-radius:14px !important; } .menu-wrapper-id-2.menu-mobile ul.active li:last-child a{ border-bottom-left-radius:14px !important; border-bottom-right-radius:14px !important; } } /* ========================================================= RevSports — TABLET MENU FIX (SAFE) Fix only the opened dropdown (ul.active) so desktop won't shift ========================================================= */ /* --- Tablet only --- */ @media (min-width: 769px) and (max-width: 1024px){ /* Make the opened menu a real panel (kills the ~64px width bug) */ .menu-wrapper.menu-mobile.menu-collapsed ul.active{ display: block !important; /* the key fix */ width: min(360px, 92vw) !important; min-width: 280px !important; max-width: 92vw !important; /* make it behave like a dropdown panel */ position: fixed !important; left: 16px !important; top: 110px !important; /* adjust if needed */ z-index: 99999 !important; margin: 0 !important; padding: 10px 0 !important; max-height: calc(100vh - 140px) !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* Stack items full width */ .menu-wrapper.menu-mobile.menu-collapsed ul.active > li{ display: block !important; width: 100% !important; margin: 0 !important; } /* Links fill the row */ .menu-wrapper.menu-mobile.menu-collapsed ul.active > li > a{ display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; box-sizing: border-box !important; padding: 14px 18px !important; white-space: nowrap !important; } /* Submenus should also be full width */ .menu-wrapper.menu-mobile.menu-collapsed ul.active ul.sub-menu{ display: block !important; width: 100% !important; margin: 0 !important; padding: 6px 0 10px 0 !important; box-sizing: border-box !important; } .menu-wrapper.menu-mobile.menu-collapsed ul.active ul.sub-menu li a{ display: block !important; width: 100% !important; padding: 12px 22px !important; box-sizing: border-box !important; white-space: nowrap !important; } } /* --- Desktop hard reset (prevents any accidental carryover) --- */ @media (min-width: 1025px){ .menu-wrapper.menu-mobile.menu-collapsed ul.active{ position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; top: auto !important; left: auto !important; max-height: none !important; overflow: visible !important; } } /* ========================================= MOBILE ONLY — MENU ↔ CONTENT GAP CONTROL Change --mc-gap to adjust spacing ========================================= */ @media (max-width: 768px){ :root{ --mc-gap: 90px; /* 👈 try 0px, 6px, 10px, 14px */ } /* Most Configio layouts: .page > .body contains the main content */ .page > .body{ padding-top: var(--mc-gap) !important; margin-top: 0 !important; } /* Some layouts wrap the body content in .max/.grid */ .page > .body > .max, .page > .body .max{ padding-top: var(--mc-gap) !important; margin-top: 0 !important; } /* If a top spacer exists above the body */ .page > .pre-header, .page > .header, .page > .menu{ margin-bottom: 0 !important; padding-bottom: 0 !important; } } /* ========================================================= CONFIGIO ADMIN / CONTENT BUILDER SAFETY Prevent global formatting (Montserrat, letter-spacing, etc.) from affecting TinyMCE editor UI + toolbars/menus/dialogs Paste at VERY BOTTOM ========================================================= */ /* --- TinyMCE (classic) --- */ .mce-container, .mce-container *, .mce-panel, .mce-panel *, .mce-toolbar, .mce-toolbar *, .mce-toolbar-grp, .mce-toolbar-grp *, .mce-btn, .mce-btn *, .mce-menu, .mce-menu *, .mce-menu-item, .mce-menu-item *, .mce-floatpanel, .mce-floatpanel *, .mce-window, .mce-window *, .mce-abs-layout, .mce-abs-layout *, /* Your specific inspected nodes like #mceu_122 */ [id^="mceu_"], [id^="mceu_"] *, /* --- TinyMCE (newer “tox” shell) --- */ .tox, .tox *, .tox-tinymce, .tox-tinymce *, /* --- Common admin dialogs used by Configio --- */ .ui-dialog, .ui-dialog *, .ui-dialog-content, .ui-dialog-content *, .ui-widget, .ui-widget *{ /* revert typography/layout-affecting globals */ font-family: initial !important; font-weight: initial !important; font-style: initial !important; letter-spacing: normal !important; word-spacing: normal !important; text-transform: none !important; line-height: normal !important; /* caret/spacing stability */ font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "clig" 0, "calt" 0 !important; } /* If the editable area is a textarea/code/pre, force safe monospace */ .mce-content-body, .mce-content-body *{ font-family: initial !important; /* keep editor content normal unless you want monospace */ } /* Optional: ONLY if code dialogs feel weird (cursor/backspace) */ #dialogCodeOptions, #dialogCodeOptions *{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; letter-spacing: normal !important; font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "calt" 0 !important; } /* ========================================================= FIX: Restore TinyMCE toolbar icons (squares -> icons) Paste at VERY BOTTOM (below the admin safety block) ========================================================= */ /* Classic TinyMCE icon font */ .mce-ico, .mce-ico:before, .mce-btn i.mce-ico, .mce-btn button i.mce-ico{ font-family: "tinymce", "FontAwesome", "Segoe UI Symbol", sans-serif !important; font-style: normal !important; font-weight: normal !important; speak: none !important; text-transform: none !important; letter-spacing: normal !important; line-height: 1 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* TinyMCE “tox” SVG icons (newer builds) */ .tox .tox-icon, .tox .tox-icon svg{ display: inline-block !important; } /* Ensure we DIDN’T accidentally kill fills/strokes */ .tox .tox-icon svg, .tox .tox-icon svg *{ fill: currentColor !important; stroke: currentColor !important; } /* If your global CSS forces button text color weirdly in the editor, this makes toolbar icons readable again */ .mce-container, .mce-container *, .tox, .tox *{ color: inherit !important; } /* ========================================================= Configio Search Results — Force Groups to stack like regular products Variation issue: Groups (field-1) becomes a small column and field-2 sits beside it. This forces full-width + new line stacking. ========================================================= */ .col-product-custom-field-1, .col-product-custom-field-2, .col-product-custom-field-3, .col-product-custom-field-4, .col-product-custom-field-5, .col-product-custom-field-6, .col-product-custom-field-7, .col-product-custom-field-8, .col-product-custom-field-9{ width: 100% !important; float: none !important; clear: both !important; display: block !important; } /* Make label/value behave like normal rows */ .col-product-custom-field-1 .custom-field-label{ display:inline-block !important; } .col-product-custom-field-1 .custom-field-value{ display:none !important; /* blank on your markup */ } /* Hide empty labels on subsequent time rows */ .col-product-custom-field-2 .custom-field-label, .col-product-custom-field-3 .custom-field-label, .col-product-custom-field-4 .custom-field-label, .col-product-custom-field-5 .custom-field-label, .col-product-custom-field-6 .custom-field-label, .col-product-custom-field-7 .custom-field-label, .col-product-custom-field-8 .custom-field-label, .col-product-custom-field-9 .custom-field-label{ display:none !important; } /* Ensure time values start under Groups */ .col-product-custom-field-2 .custom-field-value, .col-product-custom-field-3 .custom-field-value, .col-product-custom-field-4 .custom-field-value, .col-product-custom-field-5 .custom-field-value, .col-product-custom-field-6 .custom-field-value, .col-product-custom-field-7 .custom-field-value, .col-product-custom-field-8 .custom-field-value, .col-product-custom-field-9 .custom-field-value{ display:block !important; margin-top:2px !important; } /* ========================================================= RevSports / Configio — MOBILE FILTER BUTTON + RIGHT-SIDE PANEL ✅ CSS ONLY (no redirect) ✅ Button label becomes "Filter" (no "Search" anywhere) ✅ Keeps the magnifying-glass icon ✅ Filter dropdown/panel pinned to FAR RIGHT ✅ Adjustable vertical position via --revs-filter-top ========================================================= */ /* ---- YOU CAN ADJUST THIS ---- */ :root{ /* move the dropdown up/down */ --revs-filter-top: 150px; /* <- change this number if you need */ --revs-filter-width: 340px; } /* =============== 1) Button text: Search -> Filter (keep icon) =============== */ /* target the exact button */ button.btn-toggle-search{ position: relative !important; /* HIDE any existing text like "Search" without hiding icon */ font-size: 0 !important; letter-spacing: 0 !important; color: inherit !important; /* keep original button sizing/spacing as much as possible */ padding-left: 12px !important; padding-right: 12px !important; min-width: 90px !important; } /* keep ONLY the search icon visible */ button.btn-toggle-search i, button.btn-toggle-search svg{ font-size: 14px !important; width: 14px !important; height: 14px !important; margin-right: 8px !important; vertical-align: middle !important; } /* inject the word "Filter" */ button.btn-toggle-search::after{ content: "Search" !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; display: inline-block !important; vertical-align: middle !important; /* default (not hovered) */ color: #111 !important; } /* when the button is in its "active/open" state (often gets .active) */ button.btn-toggle-search.active{ background: #D12026 !important; border-color: #D12026 !important; } button.btn-toggle-search.active::after{ color: #fff !important; } button.btn-toggle-search.active i, button.btn-toggle-search.active svg{ color: #fff !important; fill: #fff !important; } /* hover/focus */ button.btn-toggle-search:hover::after, button.btn-toggle-search:focus::after{ color: inherit !important; /* keep normal behavior */ } /* =============== 2) Move the FILTER dropdown/panel to far RIGHT =============== */ /* This is the column that opens when the search/filter button is clicked */ @media (max-width: 820px){ /* when open, this usually becomes ".col-search active" */ .col-search.active{ position: fixed !important; top: var(--revs-filter-top) !important; /* <-- adjust with variable */ right: 0 !important; left: auto !important; width: min(92vw, var(--revs-filter-width)) !important; max-height: calc(100vh - var(--revs-filter-top) - 12px) !important; margin: 0 !important; padding: 0 !important; z-index: 99999 !important; overflow: auto !important; /* make sure nothing is forcing it back to the left */ transform: none !important; } /* tighten panel width inside */ .col-search.active .ctlSearch.panel{ width: 100% !important; margin: 0 !important; } /* make sure header stays visible and not clipped */ .col-search.active .panel-heading{ position: sticky !important; top: 0 !important; z-index: 2 !important; } } /* Optional: if anything else is forcing a left offset when open */ @media (max-width: 820px){ .menu .col.col-search.active{ left: auto !important; right: 0 !important; } } /* ========================================= RevSports — MENU: remove the blue “active/current” box ring (the outline/border you see around Coaching) Paste into GLOBAL CSS ========================================= */ /* 1) Kill any outline/box-shadow focus rings */ .menu a:focus, .menu a:active, .menu a:focus-visible, .menu button:focus, .menu button:active, .menu button:focus-visible, .menu li:focus, .menu li:active, .menu li:focus-visible{ outline: none !important; box-shadow: none !important; } /* 2) Kill the actual blue rectangle (usually border/outline) on active/current items */ .menu a, .menu a:hover, .menu a:active, .menu a:focus, .menu a:focus-visible, .menu li a, .menu li a:hover, .menu li a:active, .menu li a:focus, .menu li a:focus-visible{ border-color: transparent !important; outline-color: transparent !important; } /* 3) Configio themes often add a “selected/current” class — neutralize it */ .menu .selected > a, .menu .active > a, .menu .current > a, .menu li.selected > a, .menu li.active > a, .menu li.current > a{ border: none !important; outline: none !important; box-shadow: none !important; } /* 4) If that blue ring is coming from a pseudo-element, remove it too */ .menu a::before, .menu a::after{ box-shadow: none !important; outline: none !important; border: none !important; } /* ========================================================= RevSports — MENU CLEANUP (FOCUS RING OFF + MOBILE ARROWS RIGHT) ✅ Removes the blue “ring” / outline on click ✅ Mobile/tablet: dropdown arrows on the RIGHT edge ✅ Even vertical spacing + cleaner item height ✅ NO weird boxes around arrows ✅ Scoped to Configio menu wrappers ========================================================= */ /* ----------------------------- 1) Kill the blue click ring / focus outline ------------------------------ */ .menu a:focus, .menu a:active, .menu a:focus-visible, .menu a *:focus, .menu a *:focus-visible, .menu-wrapper a:focus, .menu-wrapper a:active, .menu-wrapper a:focus-visible, .menu-wrapper a *:focus, .menu-wrapper a *:focus-visible{ outline: none !important; box-shadow: none !important; } /* Some themes add focus styles to li/span wrappers */ .menu li:focus, .menu li:focus-visible, .menu-wrapper li:focus, .menu-wrapper li:focus-visible, .menu .menu-item:focus, .menu .menu-item:focus-visible{ outline: none !important; box-shadow: none !important; } /* ----------------------------- 2) MOBILE/TABLET menu layout: arrow pinned right, spacing fixed (Targets the classes you showed: menu-wrapper-id-2, menu-mobile, ul.active) ------------------------------ */ .menu-wrapper.menu-mobile ul.active, .menu-wrapper.menu-mobile ul.active li, .menu-wrapper.menu-mobile ul.active a{ box-sizing: border-box !important; } /* Make each top-level link a clean "row" */ .menu-wrapper.menu-mobile ul.active > li > a{ display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding: 14px 16px !important; /* ✅ consistent vertical spacing */ min-height: 54px !important; /* ✅ cleaner tap target */ line-height: 1.15 !important; } /* Keep text on the left, allow it to wrap without pushing the arrow */ .menu-wrapper.menu-mobile ul.active > li > a .menu-item-text{ flex: 1 1 auto !important; min-width: 0 !important; margin-right: 12px !important; } /* The arrow container from your inspect: span.menu-icon-wrapper */ .menu-wrapper.menu-mobile ul.active > li.menu-item-parent > a .menu-icon-wrapper{ flex: 0 0 auto !important; margin-left: auto !important; /* ✅ NO box */ background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; /* ✅ size + right alignment */ width: 24px !important; height: 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } /* If the theme is drawing the caret with :after (you had an :after in inspect) */ .menu-wrapper.menu-mobile ul.active > li.menu-item-parent > a .menu-icon-wrapper:after{ content: "" !important; /* ✅ bigger, white caret */ width: 0 !important; height: 0 !important; border-left: 6px solid transparent !important; border-right: 6px solid transparent !important; border-top: 7px solid rgba(255,255,255,.95) !important; /* ✅ centered */ display: block !important; } /* Sometimes there’s also a built-in icon inside the wrapper—hide it so ONLY our caret shows */ .menu-wrapper.menu-mobile ul.active > li.menu-item-parent > a .menu-icon-wrapper svg, .menu-wrapper.menu-mobile ul.active > li.menu-item-parent > a .menu-icon-wrapper i{ display: none !important; } /* Clean dividers / spacing between items (optional but usually fixes the “sloppy” feel) */ .menu-wrapper.menu-mobile ul.active > li{ margin: 0 !important; } .menu-wrapper.menu-mobile ul.active > li + li{ border-top: 1px solid rgba(255,255,255,.10) !important; } /* Submenu items: slightly tighter but still clean */ .menu-wrapper.menu-mobile ul.active > li > ul.sub-menu a{ padding: 12px 16px !important; min-height: 48px !important; } /* ----------------------------- 3) Tablet “menu looks like this” fix: ensure the dropdown panel stays a normal width (not skinny) ------------------------------ */ @media (max-width: 980px){ .menu-wrapper.menu-mobile ul.active{ width: 260px !important; /* ✅ normal dropdown width */ max-width: calc(100vw - 24px) !important; } } /* ========================================================= RevSports — FORCE DESKTOP MENU ON TABLET + DESKTOP Keeps MOBILE unchanged Applies desktop nav for widths >= 641px ========================================================= */ @media (min-width: 641px){ /* Hide the hamburger button on tablet/desktop */ #menu-render-id-0 .btn-menu-toggle{ display: none !important; } /* Force the main menu list to behave like desktop */ #menu-render-id-0 > ul{ display: flex !important; flex-wrap: nowrap !important; align-items: center !important; /* override "mobile dropdown" behaviors */ position: static !important; width: auto !important; height: auto !important; max-height: none !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; } /* Top-level items inline */ #menu-render-id-0 > ul > li{ position: relative !important; /* needed for dropdown positioning */ display: block !important; } /* Make sure links have a stable click area */ #menu-render-id-0 > ul > li > a{ display: block !important; white-space: nowrap !important; } /* Dropdown menus: hidden by default, show on hover (desktop behavior) */ #menu-render-id-0 > ul > li > ul{ display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; z-index: 99999 !important; } #menu-render-id-0 > ul > li:hover > ul{ display: block !important; } } /* ========================================================= RevSports — TABLET MENU FIT (same menu, better fitting) ✅ keeps desktop menu ✅ tighter spacing + smaller type on tablet ✅ reserves logo space (never crosses into it) ✅ allows clean wrap to row 2 if needed ========================================================= */ @media (min-width: 768px) and (max-width: 1100px){ /* Reserve space for logo so menu never slides under it */ .menu .max{ padding-left: clamp(170px, 18vw, 300px) !important; /* adjust if needed */ padding-right: 14px !important; } /* Keep the horizontal menu centered/contained and able to wrap */ .menu div[id^="menu-render-id-"] > ul, .menu .menu-wrapper > ul{ display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; /* allow 2nd row if needed */ gap: clamp(6px, 1vw, 14px) !important; /* responsive spacing */ margin: 0 auto !important; padding: 0 !important; list-style: none !important; max-width: 100% !important; } /* Shrink link text + padding so everything fits */ .menu div[id^="menu-render-id-"] > ul > li > a, .menu .menu-wrapper > ul > li > a{ font-size: clamp(12px, 1.15vw, 15px) !important; padding: 10px clamp(6px, 0.9vw, 12px) !important; line-height: 1.1 !important; white-space: nowrap !important; } /* Make dropdown arrow spacing tighter too */ .menu div[id^="menu-render-id-"] > ul > li > a .caret, .menu .menu-wrapper > ul > li > a .caret{ margin-left: 6px !important; } /* Dropdowns: keep them readable on tablet */ .menu div[id^="menu-render-id-"] > ul > li > ul{ min-width: 190px !important; } } /* ========================================================= RevSports — TABLET MENU CLEAN ALIGNMENT Fix: caret drops to 2nd line (tall/misaligned menu items) Scope: tablet widths only, top-level menu only ========================================================= */ @media (min-width: 768px) and (max-width: 1024px){ /* 1) Keep the bar height feeling like desktop */ .page .menu{ height: 56px !important; /* tweak 52–60 if you want */ } .page .menu .max{ height: 56px !important; display: flex !important; align-items: center !important; } /* 2) Make the UL a single clean row */ #menu-render-id-0.menu-horizontal > ul{ display: flex !important; align-items: center !important; gap: 22px !important; /* spacing between items */ padding: 0 !important; margin: 0 !important; height: 56px !important; list-style: none !important; } #menu-render-id-0.menu-horizontal > ul > li{ display: flex !important; align-items: center !important; height: 56px !important; margin: 0 !important; padding: 0 !important; } /* 3) THE KEY FIX: Force each top-level link to be ONE LINE (text + caret inline) */ #menu-render-id-0.menu-horizontal > ul > li > a{ display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 56px !important; padding: 0 !important; /* prevents “tall button” padding */ line-height: 1 !important; /* prevents caret dropping */ white-space: nowrap !important; font-size: 16px !important; /* match your desktop feel */ font-weight: 700 !important; } /* 4) Keep the caret from behaving like a block */ #menu-render-id-0 .menu-icon-wrapper{ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 14px !important; height: 14px !important; margin: 0 !important; padding: 0 !important; position: relative !important; top: 1px !important; /* tiny optical align tweak */ } #menu-render-id-0 .menu-icon-wrapper svg{ display: block !important; width: 14px !important; height: 14px !important; } } /* ========================================================= MENU (Scoped) — Text-only items, NO “blue block/pill” Target: #menu-render-id-0 FIXES: ✅ Keeps menu functional across resize/fullscreen ✅ Restores BLUE background on OPEN dropdown panel ✅ Prevents menu from getting pushed/clipped/hidden ========================================================= */ /* ========================================================= 0) SAFETY: do NOT let parents clip the dropdown (This is a common “menu vanished” cause after resizes) ========================================================= */ .page .menu, .page .menu .max, #menu-render-id-0{ overflow: visible !important; } /* ========================================================= 1) DESKTOP + TABLET VISUALS (<=1500px) Goal: text-only menu items (no pills), keep your typography/hover. IMPORTANT CHANGE: - We DO NOT force UL display here anymore. - That avoids fighting Configio’s collapse/hamburger logic. ========================================================= */ @media (max-width: 1500px){ /* --- Wrapper: no background panel --- */ #menu-render-id-0, #menu-render-id-0.menu-wrapper{ background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; } /* --- LI/A: no block backgrounds --- */ #menu-render-id-0 > ul > li, #menu-render-id-0 > ul > li > a{ background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; } /* --- Font lock (unchanged) --- */ #menu-render-id-0, #menu-render-id-0 *{ font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; } /* --- Link typography (unchanged) --- */ #menu-render-id-0 > ul > li > a, #menu-render-id-0 .menu-item-text{ color: #ffffff !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.1 !important; padding: 12px 14px !important; white-space: nowrap !important; } /* --- Hover (unchanged) --- */ #menu-render-id-0 > ul > li > a:hover{ background: rgba(255,255,255,0.12) !important; border-radius: 10px !important; } /* --- CURRENT/ACTIVE: remove pill/block on ALL likely nodes --- */ #menu-render-id-0 .menu-item-current, #menu-render-id-0 .menu-item-current > a, #menu-render-id-0 .menu-item-current > a > .menu-item-text{ background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; } /* If the “pill” is drawn via pseudo elements */ #menu-render-id-0 .menu-item-current::before, #menu-render-id-0 .menu-item-current::after, #menu-render-id-0 .menu-item-current > a::before, #menu-render-id-0 .menu-item-current > a::after, #menu-render-id-0 .menu-item-current > a > .menu-item-text::before, #menu-render-id-0 .menu-item-current > a > .menu-item-text::after{ content: none !important; display: none !important; } } /* ========================================================= 2) DESKTOP/TABLET LAYOUT: ONLY force horizontal row when Configio is in "menu-horizontal" mode. This prevents the “menu disappears after fullscreen” issue. ========================================================= */ @media (min-width: 641px){ #menu-render-id-0.menu-horizontal > ul{ display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= 3) TABLET ONLY (768–1024px) Keep your slightly lighter hover alpha. ========================================================= */ @media (min-width: 768px) and (max-width: 1024px){ #menu-render-id-0 > ul > li > a:hover{ background: rgba(255,255,255,0.10) !important; border-radius: 10px !important; } } /* ========================================================= 4) MOBILE DROPDOWN PANEL: RESTORE BLUE BACKGROUND This fixes “blue background behind dropdown is gone”. We ONLY apply this to the OPEN panel state. ========================================================= */ @media (max-width: 640px){ :root{ --revs-blue:#3C4BA0; } /* Configio commonly uses ul.active for opened mobile dropdown */ #menu-render-id-0 > ul.active{ background: var(--revs-blue) !important; background-image: none !important; } /* Some Configio builds open via inline display:block instead */ #menu-render-id-0 > ul[style*="display: block"], #menu-render-id-0 > ul[style*="display:block"]{ background: var(--revs-blue) !important; background-image: none !important; } } /* ========================================================= 5) SMALLEST WIDTHS (<=520px) Keep your wrap behavior so labels don’t overflow. ========================================================= */ @media (max-width: 520px){ #menu-render-id-0.menu-horizontal > ul{ gap: 6px !important; } #menu-render-id-0 > ul > li > a, #menu-render-id-0 .menu-item-text{ font-size: 13px !important; padding: 10px 10px !important; } #menu-render-id-0 > ul > li > a{ white-space: normal !important; overflow-wrap: anywhere !important; } } /* ========================================================= FINAL FIX — Remove clear/ghost bubbles around menu items Scope: main nav menu only Does NOT affect dropdown panel or mobile behavior ========================================================= */ /* Kill bubble on ALL states */ #menu-render-id-0 .menu-item-text, #menu-render-id-0 > ul > li > a, #menu-render-id-0 > ul > li{ background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; } /* Kill hover / active / focus bubbles specifically */ #menu-render-id-0 > ul > li > a:hover, #menu-render-id-0 > ul > li > a:focus, #menu-render-id-0 > ul > li > a:active, #menu-render-id-0 .menu-item-current > a, #menu-render-id-0 .menu-item-current > a > .menu-item-text{ background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } /* Kill ghost overlays (very common in Configio menus) */ #menu-render-id-0 > ul > li::before, #menu-render-id-0 > ul > li::after, #menu-render-id-0 > ul > li > a::before, #menu-render-id-0 > ul > li > a::after, #menu-render-id-0 .menu-item-text::before, #menu-render-id-0 .menu-item-text::after{ content: none !important; display: none !important; } /* OPTIONAL: clean underline hover instead of bubble */ #menu-render-id-0 > ul > li > a:hover .menu-item-text{ text-decoration: underline; text-underline-offset: 4px; } /* ========================================================= RevSports — Prevent menu text from ever overlapping logo Goal: "About" always starts to the RIGHT of the logo (menu stays LEFT-aligned, just with a reserved logo zone) Paste at VERY BOTTOM ========================================================= */ :root{ /* TUNE THIS until it matches your logo footprint. Bigger number = menu starts farther right. Start here, then nudge up/down. */ --revs-logo-safe-space: clamp(125px, 15vw, 240px); } @media (min-width: 641px){ /* Reserve space on the LEFT of the MENU bar so nav never goes under logo */ .page .menu .max{ display: flex !important; align-items: center !important; justify-content: flex-start !important; padding-left: var(--revs-logo-safe-space) !important; padding-right: 22px !important; box-sizing: border-box !important; } /* Keep the menu itself LEFT-aligned inside that space */ #menu-render-id-0.menu-horizontal > ul{ justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= ADDITION — Fix weird mid-width spacing + remove extra bottom space Paste at VERY BOTTOM (below your current safe-space CSS) ========================================================= */ /* 1) Mid-widths: the logo footprint is effectively bigger, so reserve a little more room so "About" doesn't look off */ @media (min-width: 641px) and (max-width: 980px){ :root{ /* bump this up/down until it matches what you see */ --revs-logo-safe-space: clamp(170px, 22vw, 320px); } } /* 2) Lock a clean menu bar height + vertically center items (this removes the "extra space at the bottom" look) */ @media (min-width: 641px){ /* Set the bar height you want */ .page .menu{ height: 56px !important; /* tweak 52–60 if needed */ } /* Make the inner row match and center everything */ .page .menu .max{ min-height: 56px !important; height: 56px !important; display: flex !important; align-items: center !important; } /* Keep UL/LI/Links from creating extra vertical padding */ #menu-render-id-0.menu-horizontal > ul{ height: 56px !important; display: flex !important; align-items: center !important; } #menu-render-id-0.menu-horizontal > ul > li{ height: 56px !important; display: flex !important; align-items: center !important; } /* KEY: make the clickable area exactly the bar height */ #menu-render-id-0.menu-horizontal > ul > li > a{ height: 56px !important; display: inline-flex !important; align-items: center !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1 !important; } } /* ========================================================= RevSports — Logo-safe menu WITHOUT the weird left “bar” REPLACEMENT for your current padding-left approach Paste at VERY BOTTOM ========================================================= */ :root{ /* tune if needed */ --revs-logo-safe-space: clamp(160px, 18vw, 260px); } /* only when the horizontal menu is in play */ @media (min-width: 641px){ /* DO NOT push the whole header container (this is what causes the “bar”) */ .page .menu .max{ display: flex !important; align-items: center !important; justify-content: flex-start !important; padding-left: 0 !important; /* key change */ padding-right: 22px !important; box-sizing: border-box !important; } /* Make the UL itself reserve a “logo zone” using a flex spacer */ #menu-render-id-0.menu-horizontal > ul{ display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; /* kill any panel/shadow that creates that vertical edge */ background: transparent !important; box-shadow: none !important; border: 0 !important; } /* The actual reserved space (prevents About from ever sliding under the logo) */ #menu-render-id-0.menu-horizontal > ul::before{ content: "" !important; display: block !important; flex: 0 0 var(--revs-logo-safe-space) !important; width: var(--revs-logo-safe-space) !important; } /* Fix the “extra space on the bottom” look by forcing true vertical centering */ #menu-render-id-0.menu-horizontal > ul > li, #menu-render-id-0.menu-horizontal > ul > li > a, #menu-render-id-0.menu-horizontal > ul > li > span{ line-height: 1 !important; padding-top: 18px !important; padding-bottom: 18px !important; height: auto !important; } /* If Configio applies a shadow to each LI/A, kill it too */ #menu-render-id-0.menu-horizontal > ul > li{ box-shadow: none !important; border: 0 !important; } } /* ========================================================= ADDITION — Pull full-screen menu closer to logo Paste BELOW your current logo-safe spacer CSS ========================================================= */ /* Large desktop only */ @media (min-width: 1200px){ /* Make the reserved logo space smaller on full screen */ :root{ --revs-logo-safe-space: 185px; /* try 170–210px */ } /* (optional) micro-tighten the first item only */ #menu-render-id-0.menu-horizontal > ul > li:first-child{ margin-left: -6px !important; /* set to 0 if you don’t like it */ } } /* ========================================================= RevSports — DROPDOWN ATTACHED (NO OFFSET) + EASY KNOBS ✅ Anchored to its parent item (NOT centered math) ✅ Touching/attached look ✅ Works across widths without drifting ✅ Scoped to #menu-render-id-0 only ========================================================= */ @media (min-width: 641px){ /* 🔧 KNOBS */ #menu-render-id-0{ --revsDropY: -30px; /* + moves DOWN, - moves UP */ --revsDropX: 0px; /* + moves RIGHT, - moves LEFT */ } /* Prevent clipping */ #menu-render-id-0, #menu-render-id-0 .menu, #menu-render-id-0 .max{ overflow: visible !important; } /* Make each dropdown parent the positioning anchor */ #menu-render-id-0 li.menu-item-parent{ position: relative !important; } /* Attach submenu directly under the parent item */ #menu-render-id-0 li.menu-item-parent > ul.sub-menu{ position: absolute !important; top: calc(100% + var(--revsDropY)) !important; left: var(--revsDropX) !important; right: auto !important; bottom: auto !important; /* IMPORTANT: remove any centering transforms */ transform: none !important; margin: 0 !important; z-index: 99999 !important; /* Keep it clean */ min-width: 190px !important; width: max-content !important; max-width: 280px !important; border-radius: 10px !important; box-shadow: 0 12px 26px rgba(0,0,0,.18) !important; } /* Show on hover/focus */ #menu-render-id-0 li.menu-item-parent:hover > ul.sub-menu, #menu-render-id-0 li.menu-item-parent:focus-within > ul.sub-menu{ display: block !important; } } /* Remove newsletter signup from left sidebar ONLY */ .ctl-email-optin.spacing-bottom { display: none !important; } /* Fix anchor scroll position for sticky header */ #revs-camps-why{ scroll-margin-top:140px; } /* ========================================================= RevSports — remove the gap under the fixed menu ✅ Fix: kill the empty #main-content spacer ✅ Exclude: Search & Register page ========================================================= */ /* ALL pages except the Search page template */ .page-content-page:not(.page-title-search):not(.page-title-search-register):not(.page-title-search-register-page) #main-content, .page-content-page:not(.page-title-search):not(.page-title-search-register):not(.page-title-search-register-page) #main-content::before, .page-content-page:not(.page-title-search):not(.page-title-search-register):not(.page-title-search-register-page) #main-content::after { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: none !important; } /* If there’s still a tiny gap, remove any top padding on the real content wrapper */ .page-content-page:not(.page-title-search):not(.page-title-search-register):not(.page-title-search-register-page) .cms-content { padding-top: 0 !important; margin-top: 0 !important; } /* Remove the empty panel header spacer */ .panel.panel-content-page > .panel-header.round-top.padding { display: none !important; height: 0 !important; padding: 0 !important; margin: 0 !important; } /* ========================================================= RevSports — PROFILE DROPDOWN (top-right user menu) Goal: - compact like main menu - remove blank items/slots - keep blue + white Montserrat ========================================================= */ /* Container */ .drop-down.profile-dropdown, .drop-down.profile-dropdown.active, .profile-dropdown { background: #3C4BA0 !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 10px !important; padding: 4px 0 !important; box-shadow: 0 14px 30px rgba(0,0,0,.22) !important; overflow: hidden !important; min-width: 240px !important; } /* Kill any empty rows that create “blank menu spots” */ .profile-dropdown li:empty, .profile-dropdown menu li:empty, .profile-dropdown .divider:empty, .profile-dropdown hr, .profile-dropdown .spacer { display: none !important; height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; } /* Make list compact */ .profile-dropdown ul, .profile-dropdown menu { margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Item rows (tight like main menu) */ .profile-dropdown li, .profile-dropdown menu li { margin: 0 !important; padding: 0 !important; min-height: 0 !important; } /* Links / buttons inside items */ .profile-dropdown a, .profile-dropdown button, .profile-dropdown span { font-family: "Montserrat", sans-serif !important; color: #fff !important; font-weight: 600 !important; font-size: 14px !important; line-height: 1.15 !important; /* tighter vertical spacing */ padding: 10px 14px !important; display: flex !important; align-items: center !important; gap: 10px !important; background: transparent !important; text-decoration: none !important; border: 0 !important; width: 100% !important; } /* Divider lines between REAL items only */ .profile-dropdown li + li { border-top: 1px solid rgba(255,255,255,.18) !important; } /* If the blank spots are caused by “separator” rows, remove their borders too */ .profile-dropdown li:has(> a:empty), .profile-dropdown li:has(> span:empty) { display: none !important; } /* Hover to match nav feel */ .profile-dropdown a:hover, .profile-dropdown button:hover { background: rgba(255,255,255,.08) !important; } /* ========================================================= DESKTOP (>=901px): Attached dropdowns + instant hide - No delays/fade - Level-1 dropdown TOUCHES the menu bar - Level-2 flyouts TOUCH the parent submenu - Scoped to #menu-render-id-0 only ========================================================= */ @media (min-width: 901px){ /* Tune this if you want a tiny gap. Use 0px for fully attached. */ :root{ --revs-attach-overlap: 1px; /* 1px overlap removes seams */ --revs-flyout-gap: 0px; /* set to 8-12px if you WANT a gap */ } /* 0) Kill any animation/transition that causes lag */ #menu-render-id-0, #menu-render-id-0 *{ transition: none !important; transition-delay: 0s !important; animation: none !important; } /* 1) Make sure submenus are positioned from the correct anchors */ #menu-render-id-0 > ul{ position: relative !important; } #menu-render-id-0 > ul > li{ position: relative !important; /* anchors level-1 dropdown */ } #menu-render-id-0 ul.sub-menu > li{ position: relative !important; /* anchors level-2 flyout */ } /* 2) LEVEL 1 dropdown defaults (hidden, attached) */ #menu-render-id-0 > ul > li > ul.sub-menu{ display: none !important; position: absolute !important; left: 0 !important; top: calc(100% - var(--revs-attach-overlap)) !important; /* TOUCH menu bar */ margin: 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; z-index: 999999 !important; } /* 3) LEVEL 1 open states (hover + tap/focus + click-active) */ #menu-render-id-0 > ul > li:hover > ul.sub-menu, #menu-render-id-0 > ul > li:focus-within > ul.sub-menu, #menu-render-id-0 > ul > li.click-active > ul.sub-menu{ display: block !important; } /* 4) LEVEL 2 flyout defaults (hidden, attached to parent submenu item) */ #menu-render-id-0 ul.sub-menu > li.menu-item-parent > ul.sub-menu{ display: none !important; position: absolute !important; top: 0 !important; left: calc(100% + var(--revs-flyout-gap) - var(--revs-attach-overlap)) !important; /* TOUCH */ right: auto !important; margin: 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; z-index: 999999 !important; } /* 5) LEVEL 2 open states */ #menu-render-id-0 ul.sub-menu > li.menu-item-parent:hover > ul.sub-menu, #menu-render-id-0 ul.sub-menu > li.menu-item-parent:focus-within > ul.sub-menu, #menu-render-id-0 ul.sub-menu > li.menu-item-parent.click-active > ul.sub-menu{ display: block !important; } } /* ========================================================= MOBILE ONLY — Keep Configio’s REAL toggle (prevents redirect) Goal: - Do NOT replace the toggle arrow element - Only restyle it (white + thicker) - Only show the "new" arrow inside the Account dropdown items - First dropdown keeps the original arrow ========================================================= */ @media (max-width: 900px){ /* ---------- 1) Base: leave everything alone (prevents redirect) ---------- */ #menu-render-id-0 .menu-icon-wrapper{ /* keep Configio control intact */ display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* ---------- 2) Hide the EXTRA/duplicate arrow (the thin one) ---------- One of these is usually the duplicate. Only ONE will match on your site. Keep both lines; harmless if one doesn't exist. */ #menu-render-id-0 .menu-arrow, #menu-render-id-0 .menu-caret{ display: none !important; } /* ---------- 3) FIRST LEVEL (hamburger main list): keep ORIGINAL arrow behavior/placement (no changes here) ---------- */ #menu-render-id-0 > ul > li.menu-item-parent > a > .menu-icon-wrapper{ /* do NOT reposition this; keep native */ } /* ---------- 4) ONLY the “Account” dropdown section: show the thicker white DOWN arrow in the space you highlighted ---------- */ /* Target: items that are parents INSIDE the Account submenu (Account dropdown = UL under the Account top-level item) */ #menu-render-id-0 > ul > li.menu-item-parent > ul.sub-menu > li.menu-item-parent > a > .menu-icon-wrapper{ margin-left: auto !important; margin-right: 6px !important; /* nudge right a bit */ } /* Make the actual icon white/thicker without removing it. Covers common icon types (svg, i, span). */ #menu-render-id-0 > ul > li.menu-item-parent > ul.sub-menu > li.menu-item-parent > a > .menu-icon-wrapper svg{ fill: #fff !important; stroke: #fff !important; stroke-width: 2.5 !important; } #menu-render-id-0 > ul > li.menu-item-parent > ul.sub-menu > li.menu-item-parent > a > .menu-icon-wrapper i, #menu-render-id-0 > ul > li.menu-item-parent > ul.sub-menu > li.menu-item-parent > a > .menu-icon-wrapper span{ color: #fff !important; font-weight: 900 !important; } /* Ensure it points DOWN (if it’s being rotated somewhere) */ #menu-render-id-0 > ul > li.menu-item-parent > ul.sub-menu > li.menu-item-parent > a > .menu-icon-wrapper{ transform: none !important; } } /* ========================================================= MOBILE — Put the dropdown arrows on the RIGHT (Account submenus only) Safe: does NOT replace/remove the toggle element (no redirects) ========================================================= */ @media (max-width: 900px){ /* Target ONLY: submenu parents INSIDE the Account dropdown */ #menu-render-id-0 > ul > li.menu-item-parent > ul.sub-menu > li.menu-item-parent > a{ display: flex !important; align-items: center !important; gap: 10px !important; } /* Make the text take the row width */ #menu-render-id-0 > ul > li.menu-item-parent > ul.sub-menu > li.menu-item-parent > a .menu-item-text{ flex: 1 1 auto !important; min-width: 0 !important; } /* Push the arrow wrapper to the far RIGHT */ #menu-render-id-0 > ul > li.menu-item-parent > ul.sub-menu > li.menu-item-parent > a .menu-icon-wrapper{ margin-left: auto !important; flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* ========================================================= DESKTOP FIX: Account dropdown gets "stuck" open after hover Force dropdown to ONLY show on :hover / :focus-within ========================================================= */ @media (min-width: 901px){ /* Default: hide all 1st-level dropdowns */ #menu-render-id-0 > ul > li > ul.sub-menu{ display: none !important; } /* Show ONLY while actually hovering (or keyboard focus) */ #menu-render-id-0 > ul > li:hover > ul.sub-menu, #menu-render-id-0 > ul > li:focus-within > ul.sub-menu{ display: block !important; } /* If Configio leaves sticky classes, override them when NOT hovered/focused */ #menu-render-id-0 > ul > li.click-active:not(:hover):not(:focus-within) > ul.sub-menu, #menu-render-id-0 > ul > li.hover-active:not(:hover):not(:focus-within) > ul.sub-menu{ display: none !important; } } /* ===== Force header layout + ALL text black ===== */ #divShopCartHeader .grid.padded.align-middle{ display:flex !important; align-items:flex-start !important; gap:10px !important; /* make ALL text black */ color:#000 !important; } /* ensure the original text line is black */ #divShopCartHeader .grid.padded.align-middle > .col{ color:#000 !important; } /* stack text so disclaimer sits below */ #divShopCartHeader .grid.padded.align-middle > .col:nth-child(2){ display:flex !important; flex-direction:column !important; } /* disclaimer text */ #divShopCartHeader .grid.padded.align-middle > .col:nth-child(2)::after{ content: "Pricing shown reflects resident participant rates. Non-resident participants may be subject to additional fees based on partner policies." !important; margin-top:6px !important; color:#000 !important; font-style:normal !important; font-size:13px !important; white-space:nowrap !important; } #divShopCartHeader .grid.padded.align-middle > .col:nth-child(2)::after{ content:"Pricing shown reflects resident participant rates. Non-resident participants may be subject to additional fees based on partner policies." !important; margin-top:6px !important; color:#000 !important; font-style:normal !important; font-size:13px !important; /* collapsable/wrapping */ white-space:normal !important; overflow-wrap:anywhere !important; word-break:break-word !important; } /* ========================================================= RevSports — Product Page Label Bold ONLY Targets ONLY the 3 labels on /pd/ product pages ========================================================= */ /* Day(s) of the Week */ #pnlMasterProductMain .schedule-type-title-label{ font-weight:800 !important; color:#000 !important; } /* Program Dates */ #pnlMasterProductMain .schedule-description-label{ font-weight:800 !important; color:#000 !important; } /* Groups */ #pnlMasterProductMain .custom-field-label{ font-weight:800 !important; color:#000 !important; } /* SEARCH RESULTS: force 24 items (3x8) by hiding 25+ */ .grid.products.spaced.productColumns-x3.grid-products > .col.xlarge-12.product:nth-child(n+25){ display: none !important; } /* ========================================================= RevSports — Mobile hamburger dropdown never hits bottom (scrolls internally + safe-area padding) Paste at VERY BOTTOM ========================================================= */ @media (max-width: 900px){ /* adjust these knobs if you want */ :root{ --revs-menu-top-offset: 140px; /* space from top of viewport to dropdown top */ --revs-menu-bottom-gap: 16px; /* space above bottom of screen */ } /* Target the OPEN menu panel */ .menu ul.active, #menu-render-id-0 > ul.active, .menu-wrapper.menu-mobile ul.active, .menu-wrapper.menu-collapsed ul.active{ /* ✅ never reach the bottom */ max-height: calc(100vh - var(--revs-menu-top-offset) - var(--revs-menu-bottom-gap)) !important; /* ✅ scroll inside the menu */ overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; /* ✅ keep a little air at the bottom + iPhone safe area */ padding-bottom: calc(var(--revs-menu-bottom-gap) + env(safe-area-inset-bottom, 0px)) !important; } } /* ========================================================= REPLACEMENT — Mobile hamburger dropdown: - NEVER touches bottom (uses bottom gap) - DOES NOT force extra empty height - Menu items behave normally Scoped to #menu-render-id-0 only ========================================================= */ @media (max-width: 900px){ :root{ --revs-menu-gap-bottom: 18px; /* space between menu + bottom of screen */ --revs-menu-gap-top: 8px; /* space under the fixed header stack */ --revs-menu-width: min(78vw, 320px); } /* Open state: Configio usually uses ul.active. (We also catch inline display:block opens.) */ #menu-render-id-0 > ul.active, #menu-render-id-0 > ul[style*="display: block"], #menu-render-id-0 > ul[style*="display:block"]{ /* KEY: fixed panel with top+bottom set => can't hit bottom */ position: fixed !important; left: 14px !important; /* if you have the fixed stack vars, this will sit right under it */ top: calc(var(--revs-stack-h, 120px) + var(--revs-menu-gap-top)) !important; /* this guarantees bottom breathing room */ bottom: var(--revs-menu-gap-bottom) !important; width: var(--revs-menu-width) !important; /* IMPORTANT: let height be whatever it needs (no forced empty space) */ height: auto !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; display: block !important; /* stop flex weirdness */ padding: 10px 0 !important; margin: 0 !important; background: #3C4BA0 !important; background-image: none !important; border-radius: 16px !important; box-shadow: 0 14px 30px rgba(0,0,0,.22) !important; z-index: 999999 !important; } /* Normal list behavior */ #menu-render-id-0 > ul.active > li, #menu-render-id-0 > ul[style*="display"] > li{ display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Clean, consistent rows */ #menu-render-id-0 > ul.active > li > a, #menu-render-id-0 > ul[style*="display"] > li > a{ display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; box-sizing: border-box !important; padding: 14px 16px !important; min-height: 52px !important; color: #fff !important; text-decoration: none !important; background: transparent !important; /* prevents the “stacked letters” look */ white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Allow ONLY “Search & Register” to wrap to 2 lines if needed */ #menu-render-id-0 > ul.active > li > a[href*="search"], #menu-render-id-0 > ul[style*="display"] > li > a[href*="search"]{ white-space: normal !important; overflow: visible !important; } /* Subtle dividers */ #menu-render-id-0 > ul.active > li + li, #menu-render-id-0 > ul[style*="display"] > li + li{ border-top: 1px solid rgba(255,255,255,.12) !important; } } /* ========================================= MOBILE MENU FIX v4 (REPLACE v3) - Lower on screen (top gap) - NO extra blue space (auto height) - Still never touches bottom (max-height w/ bottom gap) ========================================= */ @media (max-width: 900px){ :root{ --revs-menu-top-gap: 160px; /* LOWER menu = increase this */ --revs-menu-bot-gap: 22px; /* space from bottom */ } #menu-render-id-0 > ul.active, #menu-render-id-0 > ul[style*="display: block"]{ position: fixed !important; top: var(--revs-menu-top-gap) !important; left: 16px !important; width: min(360px, calc(100vw - 32px)) !important; /* key change: auto height, only cap the max */ height: auto !important; max-height: calc(100vh - var(--revs-menu-top-gap) - var(--revs-menu-bot-gap)) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; border-radius: 18px !important; } /* consistent item sizing */ #menu-render-id-0 > ul.active > li > a{ display: flex !important; align-items: center !important; min-height: 64px !important; padding: 0 22px !important; line-height: 1 !important; box-sizing: border-box !important; } #menu-render-id-0 > ul.active > li.menu-item-parent > a{ justify-content: space-between !important; } } /* ========================================= Hide slideshow caption on medium screens + mobile (cleaner breakpoint) ========================================= */ @media (max-width: 775px){ #revs-cms-slideshow .revs-caption{ display:none !important; } } /* ========================================================= MoxieManager — REMOVE CSS-created checkbox styling Scope: only the Moxie file list ========================================================= */ /* 1) Stop any custom :after checkmarks or box styling */ div[id^="moxman-"].moxman-filelist .moxman-i-checkbox, div[id^="moxman-"].moxman-filelist .moxman-i-checkbox::before, div[id^="moxman-"].moxman-filelist .moxman-i-checkbox::after{ content: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; } /* 2) Restore the icon rendering (undo “hide glyph” tricks) */ div[id^="moxman-"].moxman-filelist .moxman-i-checkbox{ color: inherit !important; font-size: inherit !important; } /* 3) Make the checkbox column feel clickable (helps usability) */ div[id^="moxman-"].moxman-filelist td.moxman-checkbox-column{ cursor: pointer !important; } div[id^="moxman-"].moxman-filelist td.moxman-checkbox-column .moxman-filelist-cell{ padding: 2px 6px !important; } /* Hide everywhere on mobile */ @media (max-width: 768px){ .btn-toggle-search{ display:none !important; } } /* Show ONLY on search page */ @media (max-width: 768px){ body[class*="search"] .btn-toggle-search, body[id*="search"] .btn-toggle-search{ display:inline-flex !important; } } /* ========================================================= MoxieManager — FILE/FOLDER ICONS ONLY (good-looking) Does NOT affect toolbar icons or layout ========================================================= */ /* Scope to file list + tree only */ .moxman-filelist .moxman-ico, .moxman-tree .moxman-ico{ display:inline-block !important; width:14px !important; height:14px !important; margin-right:6px !important; vertical-align:middle !important; /* make icon shapes render even if icon-font is broken */ background-color:#222 !important; -webkit-mask-repeat:no-repeat !important; -webkit-mask-position:center !important; -webkit-mask-size:contain !important; mask-repeat:no-repeat !important; mask-position:center !important; mask-size:contain !important; } /* Folder icon */ .moxman-filelist .moxman-i-folder, .moxman-tree .moxman-i-folder{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4l2 2h8a2 2 0 0 1 2 2v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a2 2 0 0 1 2-2h6z'/%3E%3C/svg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4l2 2h8a2 2 0 0 1 2 2v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a2 2 0 0 1 2-2h6z'/%3E%3C/svg%3E") !important; } /* Image/file icon */ .moxman-filelist .moxman-i-file-image{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1v5h5'/%3E%3Cpath fill='black' d='M7 18l3-3 2 2 3-3 3 4H7zm3-8a1.5 1.5 0 1 0 0.001 3.001A1.5 1.5 0 0 0 10 10z'/%3E%3C/svg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1v5h5'/%3E%3Cpath fill='black' d='M7 18l3-3 2 2 3-3 3 4H7zm3-8a1.5 1.5 0 1 0 0.001 3.001A1.5 1.5 0 0 0 10 10z'/%3E%3C/svg%3E") !important; } /* IMPORTANT: don’t change toolbar icons */ .moxman-toolbar .moxman-ico{ background-color: transparent !important; -webkit-mask-image:none !important; mask-image:none !important; width:auto !important; height:auto !important; margin-right:6px !important; } /* ========================================= SITEWIDE MOBILE SEARCH BUTTON CONTROL HIDE EVERYWHERE BY DEFAULT SHOW ONLY ON SEARCH / REGISTER PAGE MATCH SEARCH BUTTON TO CART SIZE ON MOBILE REMOVE DUPLICATE GENERATED TEXT FULL REWRITE ========================================= */ @media (max-width: 768px){ /* Hide globally on mobile */ .btn-toggle-search, button.btn-toggle-search, .button.btn-toggle-search.round, button.button.round.btn-toggle-search{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } /* Show ONLY when the page contains a search/register form */ body:has(form[action*="/search"]) .btn-toggle-search, body:has(form[action*="/search"]) button.btn-toggle-search, body:has(form[action*="/search"]) .button.btn-toggle-search.round, body:has(form[action*="/search"]) button.button.round.btn-toggle-search, body:has(input[name="txt"]) .btn-toggle-search, body:has(input[name="txt"]) button.btn-toggle-search, body:has(input[name="txt"]) .button.btn-toggle-search.round, body:has(input[name="txt"]) button.button.round.btn-toggle-search, body:has(input[name="cid"]) .btn-toggle-search, body:has(input[name="cid"]) button.btn-toggle-search, body:has(input[name="cid"]) .button.btn-toggle-search.round, body:has(input[name="cid"]) button.button.round.btn-toggle-search, body:has(select[name="st_t"]) .btn-toggle-search, body:has(select[name="st_t"]) button.btn-toggle-search, body:has(select[name="st_t"]) .button.btn-toggle-search.round, body:has(select[name="st_t"]) button.button.round.btn-toggle-search{ display:inline-flex !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; align-items:center !important; justify-content:center !important; gap:6px !important; width:auto !important; min-width:90px !important; height:32px !important; padding:0 14px !important; border-radius:8px !important; line-height:1 !important; font-size:14px !important; font-weight:800 !important; text-align:center !important; white-space:nowrap !important; vertical-align:middle !important; box-sizing:border-box !important; } /* Remove extra generated text */ body:has(form[action*="/search"]) .btn-toggle-search::before, body:has(form[action*="/search"]) .btn-toggle-search::after, body:has(form[action*="/search"]) button.btn-toggle-search::before, body:has(form[action*="/search"]) button.btn-toggle-search::after, body:has(input[name="txt"]) .btn-toggle-search::before, body:has(input[name="txt"]) .btn-toggle-search::after, body:has(input[name="txt"]) button.btn-toggle-search::before, body:has(input[name="txt"]) button.btn-toggle-search::after, body:has(input[name="cid"]) .btn-toggle-search::before, body:has(input[name="cid"]) .btn-toggle-search::after, body:has(input[name="cid"]) button.btn-toggle-search::before, body:has(input[name="cid"]) button.btn-toggle-search::after, body:has(select[name="st_t"]) .btn-toggle-search::before, body:has(select[name="st_t"]) .btn-toggle-search::after, body:has(select[name="st_t"]) button.btn-toggle-search::before, body:has(select[name="st_t"]) button.btn-toggle-search::after{ content:none !important; display:none !important; } /* Clean up icon size / spacing */ body:has(form[action*="/search"]) .btn-toggle-search svg, body:has(form[action*="/search"]) button.btn-toggle-search svg, body:has(input[name="txt"]) .btn-toggle-search svg, body:has(input[name="txt"]) button.btn-toggle-search svg, body:has(input[name="cid"]) .btn-toggle-search svg, body:has(input[name="cid"]) button.btn-toggle-search svg, body:has(select[name="st_t"]) .btn-toggle-search svg, body:has(select[name="st_t"]) button.btn-toggle-search svg{ width:15px !important; height:15px !important; margin:0 !important; flex:0 0 auto !important; vertical-align:middle !important; } } /* Communities dropdown */ .communities-menu{ position: relative !important; overflow: visible !important; } /* Scrollable dropdown */ .communities-menu > .sub-menu{ position: absolute !important; top: 100% !important; left: 0 !important; z-index: 9999 !important; max-height: 75vh !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } /* Mobile */ @media (max-width:768px){ .communities-menu > .sub-menu{ max-height: 70vh !important; } } } /* ===== GLOBAL TAB SCROLL FIX ===== */ /* Turn OFF smooth scrolling (it actually exaggerates the jump) */ html { scroll-behavior: auto; } /* Stop browser from re-adjusting scroll when content expands */ body { overflow-anchor: none; } /* Control where anchored/tabbed content lands */ [id] { scroll-margin-top: 80px; } /* Prevent jumpiness from expanding tab panels */ .tab-content, .tabs-content, [class*="tab-content"], [class*="panel"], [class*="accordion"] { overflow-anchor: none; } /* Bottom-tab jump fix — scoped to community pages only */ section[id^="revs-"] .tab-content:last-child, section[id^="revs-"] .tabs-content:last-child, section[id^="revs-"] [class*="tab-content"]:last-child { padding-bottom: 75px; } /* =========================== BASEBALL PAGE ONLY - BIGGER BASEBALLS (FIXED SEAMS) =========================== */ .baseball-page-bg { position: relative; isolation: isolate; } .baseball-page-bg::after { content: ""; position: fixed; inset: var(--revs-stars-inset); z-index: 1; pointer-events: none; opacity: 0.34; background-repeat: repeat; background-position: 0 0; background-size: 900px 900px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke-linecap='round'%3E%3C!-- BLUE BASEBALLS --%3E%3Ccircle cx='110' cy='170' r='18' stroke='%238A94CC' stroke-width='2'/%3E%3Cpath d='M98 156 C108 165 108 175 98 184' stroke='%238A94CC' stroke-width='1.2'/%3E%3Cpath d='M122 156 C112 165 112 175 122 184' stroke='%238A94CC' stroke-width='1.2'/%3E%3Ccircle cx='610' cy='245' r='18' stroke='%238A94CC' stroke-width='2'/%3E%3Cpath d='M598 231 C608 240 608 250 598 259' stroke='%238A94CC' stroke-width='1.2'/%3E%3Cpath d='M622 231 C612 240 612 250 622 259' stroke='%238A94CC' stroke-width='1.2'/%3E%3Ccircle cx='75' cy='575' r='18' stroke='%238A94CC' stroke-width='2'/%3E%3Cpath d='M63 561 C73 570 73 580 63 589' stroke='%238A94CC' stroke-width='1.2'/%3E%3Cpath d='M87 561 C77 570 77 580 87 589' stroke='%238A94CC' stroke-width='1.2'/%3E%3Ccircle cx='620' cy='575' r='18' stroke='%238A94CC' stroke-width='2'/%3E%3Cpath d='M608 561 C618 570 618 580 608 589' stroke='%238A94CC' stroke-width='1.2'/%3E%3Cpath d='M632 561 C622 570 622 580 632 589' stroke='%238A94CC' stroke-width='1.2'/%3E%3C!-- RED BASEBALLS --%3E%3Ccircle cx='430' cy='120' r='18' stroke='%23E8A7AB' stroke-width='2'/%3E%3Cpath d='M418 106 C428 115 428 125 418 134' stroke='%23E8A7AB' stroke-width='1.2'/%3E%3Cpath d='M442 106 C432 115 432 125 442 134' stroke='%23E8A7AB' stroke-width='1.2'/%3E%3Ccircle cx='250' cy='430' r='18' stroke='%23E8A7AB' stroke-width='2'/%3E%3Cpath d='M238 416 C248 425 248 435 238 444' stroke='%23E8A7AB' stroke-width='1.2'/%3E%3Cpath d='M262 416 C252 425 252 435 262 444' stroke='%23E8A7AB' stroke-width='1.2'/%3E%3Ccircle cx='470' cy='505' r='18' stroke='%23E8A7AB' stroke-width='2'/%3E%3Cpath d='M458 491 C468 500 468 510 458 519' stroke='%23E8A7AB' stroke-width='1.2'/%3E%3Cpath d='M482 491 C472 500 472 510 482 519' stroke='%23E8A7AB' stroke-width='1.2'/%3E%3Ccircle cx='505' cy='655' r='18' stroke='%23E8A7AB' stroke-width='2'/%3E%3Cpath d='M493 641 C503 650 503 660 493 669' stroke='%23E8A7AB' stroke-width='1.2'/%3E%3Cpath d='M517 641 C507 650 507 660 517 669' stroke='%23E8A7AB' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E"); } .baseball-page-bg > * { position: relative; z-index: 2; } @media (max-width: 768px) { .baseball-page-bg::after { inset: 14px; opacity: 0.24; } } /* =========================== BASKETBALL PAGE BACKGROUND SAME POSITIONS AS BASEBALLS NO STARS SEAMS FIXED INSIDE BALLS =========================== */ .basketball-page-bg{ position:relative; isolation:isolate; } .basketball-page-bg::after{ content:""; position:fixed; inset:var(--revs-stars-inset); z-index:1; pointer-events:none; opacity:.26; background-repeat:repeat; background-position:0 0; background-size:900px 900px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- BLUE BASKETBALLS --%3E%3Ccircle cx='110' cy='170' r='15' stroke='%233C4BA0' stroke-width='1.8'/%3E%3Cpath d='M110 159V181' stroke='%233C4BA0' stroke-width='1'/%3E%3Cpath d='M99 170H121' stroke='%233C4BA0' stroke-width='1'/%3E%3Cpath d='M101 160C106 164 106 176 101 180' stroke='%233C4BA0' stroke-width='1'/%3E%3Cpath d='M119 160C114 164 114 176 119 180' stroke='%233C4BA0' stroke-width='1'/%3E%3Ccircle cx='610' cy='245' r='15' stroke='%233C4BA0' stroke-width='1.8'/%3E%3Cpath d='M610 234V256' stroke='%233C4BA0' stroke-width='1'/%3E%3Cpath d='M599 245H621' stroke='%233C4BA0' stroke-width='1'/%3E%3Cpath d='M601 235C606 239 606 251 601 255' stroke='%233C4BA0' stroke-width='1'/%3E%3Cpath d='M619 235C614 239 614 251 619 255' stroke='%233C4BA0' stroke-width='1'/%3E%3Ccircle cx='75' cy='575' r='15' stroke='%233C4BA0' stroke-width='1.8'/%3E%3Cpath d='M75 564V586' stroke='%233C4BA0' stroke-width='1'/%3E%3Cpath d='M64 575H86' stroke='%233C4BA0' stroke-width='1'/%3E%3Cpath d='M66 565C71 569 71 581 66 585' stroke='%233C4BA0' stroke-width='1'/%3E%3Cpath d='M84 565C79 569 79 581 84 585' stroke='%233C4BA0' stroke-width='1'/%3E%3Ccircle cx='620' cy='575' r='15' stroke='%233C4BA0' stroke-width='1.8'/%3E%3Cpath d='M620 564V586' stroke='%233C4BA0' stroke-width='1'/%3E%3Cpath d='M609 575H631' stroke='%233C4BA0' stroke-width='1'/%3E%3Cpath d='M611 565C616 569 616 581 611 585' stroke='%233C4BA0' stroke-width='1'/%3E%3Cpath d='M629 565C624 569 624 581 629 585' stroke='%233C4BA0' stroke-width='1'/%3E%3C!-- RED BASKETBALLS --%3E%3Ccircle cx='430' cy='120' r='15' stroke='%23D12026' stroke-width='1.8'/%3E%3Cpath d='M430 109V131' stroke='%23D12026' stroke-width='1'/%3E%3Cpath d='M419 120H441' stroke='%23D12026' stroke-width='1'/%3E%3Cpath d='M421 110C426 114 426 126 421 130' stroke='%23D12026' stroke-width='1'/%3E%3Cpath d='M439 110C434 114 434 126 439 130' stroke='%23D12026' stroke-width='1'/%3E%3Ccircle cx='250' cy='430' r='15' stroke='%23D12026' stroke-width='1.8'/%3E%3Cpath d='M250 419V441' stroke='%23D12026' stroke-width='1'/%3E%3Cpath d='M239 430H261' stroke='%23D12026' stroke-width='1'/%3E%3Cpath d='M241 420C246 424 246 436 241 440' stroke='%23D12026' stroke-width='1'/%3E%3Cpath d='M259 420C254 424 254 436 259 440' stroke='%23D12026' stroke-width='1'/%3E%3Ccircle cx='470' cy='505' r='15' stroke='%23D12026' stroke-width='1.8'/%3E%3Cpath d='M470 494V516' stroke='%23D12026' stroke-width='1'/%3E%3Cpath d='M459 505H481' stroke='%23D12026' stroke-width='1'/%3E%3Cpath d='M461 495C466 499 466 511 461 515' stroke='%23D12026' stroke-width='1'/%3E%3Cpath d='M479 495C474 499 474 511 479 515' stroke='%23D12026' stroke-width='1'/%3E%3Ccircle cx='505' cy='655' r='15' stroke='%23D12026' stroke-width='1.8'/%3E%3Cpath d='M505 644V666' stroke='%23D12026' stroke-width='1'/%3E%3Cpath d='M494 655H516' stroke='%23D12026' stroke-width='1'/%3E%3Cpath d='M496 645C501 649 501 661 496 665' stroke='%23D12026' stroke-width='1'/%3E%3Cpath d='M514 645C509 649 509 661 514 665' stroke='%23D12026' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"); } .basketball-page-bg > *{ position:relative; z-index:2; } @media (max-width:768px){ .basketball-page-bg::after{ inset:14px; opacity:.20; } } /* Fix gray background only on the Sports parent menu item */ li.menu-item-parent-current.no-click, li.menu-item-parent-current.no-click > a, li.menu-item-parent-current.no-click > a span { background:#3C4BA0 !important; color:#fff !important; }