/* * megamenu.css - Responsive mega menu for RabbitEars.Info * Desktop: horizontal bar with hover-activated mega panels * Mobile (<= 820px): hamburger toggle with accordion panels */ /* ===== Site Header ===== */ .site-header { background: #fff; border-bottom: 1px solid #d0d0d0; position: relative; z-index: 1000; width: 100%; } /* * Standards mode compatibility fixes. * * The old header used a broken DOCTYPE () which put * browsers in quirks mode. The proper switches to * standards mode, which changes how CSS inheritance works: * * - body { text-align: center } (from style.css) now propagates into * table cells and other block elements * - In quirks mode it did NOT propagate into table cells * * The fix: reset text-align at the table level. This preserves the * old centering technique (body text-align:center centers the tables * themselves on the page) while preventing cell content from inheriting * the centering. */ /* Reset text-align inside tables so cell content is left-aligned. * body { text-align: center } still centers the tables on the page. */ table { text-align: left; } /* Re-center table headers that should be centered */ thead td, thead th { text-align: center; } /* Market list cells are centered */ .marketlist td { text-align: center; } /* Keep icon cells flowing horizontally */ td img { display: inline; vertical-align: middle; } /* Keep min-width so existing 990px table layouts don't get squeezed */ body { min-width: 990px; } /* ===== Top Header Bar (links + logo + login in one row) ===== */ .header-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 8px 12px; font-size: 13px; font-family: arial, helvetica, sans-serif; color: #555; border-bottom: 1px solid #e8e8e8; text-align: left; } .header-top a { color: #555; } .header-top a:hover { color: #2980b9; } .header-top-left, .header-top-right { flex: 1; padding-top: 0; line-height: 1.2; } .header-top-left { text-align: left; } .header-top-center { flex: 0 0 auto; text-align: center; padding: 0 16px; } .header-top-right { text-align: right; line-height: 1.6; } /* Logout + Admin on their own line */ .header-top-right .logout-link { display: block; } /* ===== Announcement Banner ===== */ .header-announcement { text-align: center; padding: 4px 12px; font-family: arial, helvetica, sans-serif; } /* ===== Hamburger Toggle (hidden on desktop) ===== */ .menu-toggle { display: none; background: none; border: 1px solid #ccc; border-radius: 4px; padding: 4px 10px; font-size: 22px; cursor: pointer; color: #333; line-height: 1; vertical-align: middle; margin-left: 10px; } .menu-toggle:hover { background: #f0f0f0; } /* ===== Navigation Bar ===== */ .nav-bar { background: #3b3b3b; position: relative; width: 100%; margin: 0; padding: 0; text-align: left; } .nav-menu { list-style: none; display: flex; justify-content: center; margin: 0; padding: 0; } .nav-menu > li { position: relative; } /* Top-level nav items */ .nav-menu > li > a, .nav-menu > li > .nav-label { display: block; padding: 10px 18px; color: #e0e0e0; font-size: 14px; font-family: arial, helvetica, sans-serif; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; border-bottom: 3px solid transparent; transition: background 0.15s, border-color 0.15s; user-select: none; } .nav-menu > li:hover > a, .nav-menu > li:hover > .nav-label { background: #4a4a4a; color: #fff; border-bottom-color: #5dade2; text-decoration: none; } /* Down arrow for mega menu items */ .nav-menu > li.has-mega > .nav-label::after { content: ' \25BE'; font-size: 11px; opacity: 0.7; } /* ===== Mega Panel (Desktop) ===== */ .mega-panel { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #d0d0d0; border-top: 3px solid #5dade2; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 20px 24px; z-index: 999; min-width: 500px; max-width: 1050px; } .mega-panel-narrow { min-width: 200px; max-width: 400px; } /* Show on hover (desktop) */ .nav-menu > li:hover > .mega-panel { display: block; } /* ===== Mega Panel Columns ===== */ .mega-columns { display: flex; gap: 28px; } .mega-col { flex: 1; min-width: 140px; } .mega-col h4 { font-size: 12px; font-family: arial, helvetica, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #888; margin: 0 0 8px 0; padding-bottom: 4px; border-bottom: 1px solid #e8e8e8; } /* Spacing between stacked headings within one column */ .mega-col h4 + ul + h4 { margin-top: 14px; } .mega-col ul { list-style: none; padding: 0; margin: 0; } .mega-col li { margin-bottom: 2px; } .mega-col a { display: block; padding: 3px 6px; font-size: 13px; font-family: arial, helvetica, sans-serif; color: #333; border-radius: 3px; text-decoration: none; transition: background 0.1s; } .mega-col a:hover { background: #eaf2f8; color: #1a5276; text-decoration: none; } /* ========================================================== MOBILE STYLES ========================================================== */ @media (max-width: 820px) { /* Allow mobile layout to use actual screen width for the header. Page content below will still scroll horizontally until individual pages are made responsive. */ body { min-width: 0; } /* Top bar stacks */ .header-top { flex-direction: column; gap: 4px; text-align: center; } .header-top-center { position: static; transform: none; } .header-top-right { text-align: center; } /* Show hamburger */ .menu-toggle { display: block; } /* On mobile, stack the header vertically */ .header-top { flex-direction: column; align-items: center; gap: 4px; } .header-top-left, .header-top-right { text-align: center; } .header-top-center { position: relative; } /* Nav hidden by default, shown when toggled */ .nav-bar { display: none; background: #fff; border-bottom: 1px solid #d0d0d0; } .nav-bar.open { display: block; } /* Vertical menu */ .nav-menu { flex-direction: column; } .nav-menu > li > a, .nav-menu > li > .nav-label { color: #333; border-bottom: 1px solid #eee; border-left: 3px solid transparent; padding: 12px 16px; } /* Override desktop hover on mobile */ .nav-menu > li:hover > a, .nav-menu > li:hover > .nav-label { background: transparent; border-bottom-color: #eee; color: #333; } /* Active (tapped) state */ .nav-menu > li.active > .nav-label { background: #eaf2f8; border-left-color: #5dade2; border-bottom-color: #eee; color: #1a5276; } /* Mega panel becomes inline accordion */ .mega-panel, .mega-panel-narrow { position: static; transform: none; border: none; border-top: none; box-shadow: none; min-width: 0; max-width: none; padding: 8px 16px 8px 24px; background: #fafafa; border-bottom: 1px solid #eee; } /* Only show via JS .active class on mobile, not hover */ .nav-menu > li:hover > .mega-panel { display: none; } .nav-menu > li.active > .mega-panel { display: block; } /* Stack columns vertically */ .mega-columns { flex-direction: column; gap: 12px; } .mega-col { min-width: 0; } .mega-col a { padding: 6px 6px; font-size: 14px; } }