/* ========================================================================== OB Header — modern refresh (Robinhood × Apple News) -------------------------------------------------------------------------- A clean, branded burnt-orange header bar with a white wordmark, refined menu typography, soft pill hovers, and Apple-News-style dropdown cards. Everything is scoped to the Penci header wrappers (.penci-header-wrap, .penci_navbar_mobile, .penci-mobile-midbar) so it can never leak into article/content styling. Mobile-first; desktop enhancements live in min-width media queries. ========================================================================== */ :root { --ob-header-bg: var(--site-primary-color); /* Texas burnt orange #bf5700 */ --ob-header-fg: #ffffff; --ob-header-fg-dim: rgba(255, 255, 255, 0.78); --ob-header-hover-bg: rgba(255, 255, 255, 0.16); --ob-header-hairline: rgba(0, 0, 0, 0.12); --ob-header-radius: 9px; } /* -------------------------------------------------------------------------- 1. The bar itself -------------------------------------------------------------------------- */ .penci-header-wrap, .penci-header-wrap .penci_header, .penci-header-wrap .penci_stickybar, .penci-header-wrap .penci-sticky-top, .penci-header-wrap .penci-sticky-mid, .penci-header-wrap .penci-sticky-bot, .penci-header-wrap .penci-desktop-sticky-top, .penci-header-wrap .penci-desktop-sticky-mid, .penci-header-wrap .penci-desktop-sticky-bot, .penci_navbar_mobile, .penci-mobile-topbar, .penci-mobile-midbar, .penci_mobile_midbar { background-color: var(--ob-header-bg) !important; } /* Soft lift only — no hard hairline/gray divider line under the bar */ .penci-header-wrap .penci_header.shadow-enable, .penci_navbar_mobile.shadow-enable { box-shadow: 0 6px 18px rgba(17, 17, 17, 0.06) !important; border: none !important; } /* Compact, vertically centered modern bar */ .penci-header-wrap .penci_nav_row { align-items: center; } /* Kill gray divider lines (borders) in the header bar and between (wrapped) menu items. Borders only — leaves the header's soft drop shadow and the dropdown card border (ul.sub-menu) intact. */ .penci-header-wrap .penci_navbar, .penci-header-wrap .penci-sticky-mid, .penci-header-wrap .penci-desktop-sticky-mid, .penci-header-wrap .penci-mobile-midbar, .penci-header-wrap .penci_nav_row, .penci-header-wrap .navigation, .penci-header-wrap .navigation ul.menu, .penci-header-wrap .navigation ul.menu > li.menu-item, .penci-header-wrap .navigation ul.menu > li.menu-item > a { border: none !important; } /* Sticky header — pinned to the top on scroll (desktop + mobile). Uses position:sticky so it stays in normal flow: the header's height is auto (handles the menu wrapping to multiple rows) and no content offset is needed. position:sticky is otherwise defeated by overflow:hidden on the #soledad_wrapper, so we clear that — keeps overflow-x:hidden, so no horizontal scroll is introduced. */ .penci-header-wrap { position: sticky !important; top: 0 !important; z-index: 1000 !important; } #soledad_wrapper.wrapper-boxed { overflow: visible !important; } /* -------------------------------------------------------------------------- 2. Logo — render the wordmark as solid white on the orange bar (brightness(0) flattens to black, invert(1) flips it to pure white) -------------------------------------------------------------------------- */ .penci-header-wrap .penci-header-image-logo img, .penci-mobile-midbar .pb-logo-mobile.penci-header-image-logo img { filter: brightness(0) invert(1); } /* -------------------------------------------------------------------------- 3. Primary menu — clean medium weight, soft pill hover -------------------------------------------------------------------------- */ .penci-header-wrap .navigation ul.menu > li.menu-item > a { color: var(--ob-header-fg) !important; font-weight: 700 !important; font-size: 0.99rem !important; letter-spacing: 0.1px !important; padding: 0.45rem 0.8rem !important; border-radius: var(--ob-header-radius); transition: background-color 0.18s ease, color 0.18s ease; } /* Hover / open / current → soft burnt-orange pill (a lighter shade of the bar, like the Rivals active pill) with white text. */ .penci-header-wrap .navigation ul.menu > li.menu-item > a:hover, .penci-header-wrap .navigation ul.menu > li.menu-item.current-menu-item > a, .penci-header-wrap .navigation ul.menu > li.menu-item-has-children:hover > a { background-color: rgba(255, 255, 255, 0.22) !important; color: var(--ob-header-fg) !important; text-decoration: none !important; } /* Kill Penci's default underline accent on the orange bar */ .penci-header-wrap .navigation ul.menu > li.menu-item > a::before { display: none !important; } /* Caret on items that open a dropdown */ .penci-header-wrap .navigation ul.menu > li.menu-item-has-children > a::after { content: "" !important; display: inline-block !important; vertical-align: middle !important; align-self: center !important; width: 0.4em; height: 0.4em; margin: -0.2em 0 0 0.45em !important; border: 0 !important; border-right: 2px solid currentColor !important; border-bottom: 2px solid currentColor !important; transform: rotate(45deg); transition: transform 0.18s ease; position: static !important; top: auto !important; right: auto !important; background: none !important; opacity: 1 !important; } /* -------------------------------------------------------------------------- 4. Dropdowns — Apple-News-style white card -------------------------------------------------------------------------- */ .penci-header-wrap .navigation ul.menu ul.sub-menu { background-color: #fff !important; border: 1px solid var(--border-color) !important; border-radius: 16px !important; box-shadow: 0 14px 38px rgba(17, 17, 17, 0.16) !important; padding: 0.5rem !important; margin-top: 0 !important; /* connect to the menu so hover doesn't break */ min-width: 248px !important; max-width: 320px !important; /* long items wrap instead of a giant card */ } .penci-header-wrap .navigation ul.sub-menu li { border: none !important; } .penci-header-wrap .navigation ul.sub-menu li a { display: block !important; /* full-width row so the pill spans the card */ color: #3B2417 !important; /* near-black brown */ font-weight: 600 !important; font-size: 1rem !important; line-height: 1.5 !important; padding: 0.6rem 0.9rem !important; border-radius: 10px !important; text-transform: none !important; white-space: normal; /* long dropdown labels wrap to multiple lines */ transition: background-color 0.15s ease, color 0.15s ease; } /* Soft burnt-orange pill on hover + active item (reusable --ob-highlight-soft) */ .penci-header-wrap .navigation ul.sub-menu li a:hover, .penci-header-wrap .navigation ul.sub-menu li.current-menu-item > a, .penci-header-wrap .navigation ul.sub-menu li.current_page_item > a { background-color: var(--ob-highlight-soft) !important; color: var(--site-primary-color) !important; } /* -------------------------------------------------------------------------- 5. Right-side actions — Subscribe (green pill) + Login (ghost outline) -------------------------------------------------------------------------- */ .penci-header-wrap .ob-subscribe-button a, .penci_navbar_mobile .ob-subscribe-button a { border-radius: 999px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); } /* Logged out → Login as a soft burnt-orange pill (text, no arrow icon) */ .penci-header-wrap .ob-login-button a, .penci_navbar_mobile .ob-login-button a { background-color: color-mix(in srgb, var(--site-primary-color), #fff 25%) !important; color: #fff !important; border: none !important; border-radius: 999px !important; padding: 0.5rem 1rem !important; font-size: 0.755rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.15px !important; transition: background-color 0.18s ease; } .penci-header-wrap .ob-login-button a:hover, .penci_navbar_mobile .ob-login-button a:hover { background-color: color-mix(in srgb, var(--site-primary-color), #fff 12%) !important; color: #fff !important; opacity: 1; } /* Show the "Login" label, hide the arrow icon (pill is text-only) */ .penci-header-wrap .ob-login-button span, .penci_navbar_mobile .ob-login-button span { display: inline-block !important; } .penci-header-wrap .ob-login-button svg, .penci_navbar_mobile .ob-login-button svg { display: none !important; } /* Logged in → standard user icon (plain white glyph, no pill/text) */ .penci-header-wrap .ob-logout-button a, .penci_navbar_mobile .ob-logout-button a { background-color: transparent !important; color: var(--ob-header-fg) !important; border: none !important; padding: 0.35rem !important; transition: opacity 0.18s ease; } .penci-header-wrap .ob-logout-button a:hover, .penci_navbar_mobile .ob-logout-button a:hover { opacity: 0.75; } .penci-header-wrap .ob-logout-button span, .penci_navbar_mobile .ob-logout-button span { display: none !important; } .penci-header-wrap .ob-logout-button svg, .penci_navbar_mobile .ob-logout-button svg { display: inline-block !important; height: 1.3rem !important; width: 1.3rem !important; transform: none !important; /* override the rotate on the old logout arrow */ fill: var(--ob-header-fg) !important; } /* -------------------------------------------------------------------------- 6. Search + hamburger icons — white on the bar -------------------------------------------------------------------------- */ .penci-header-wrap .penci-top-search a, .penci-header-wrap .penci-top-search i, .penci-header-wrap .search-click, .penci-mobile-midbar .penci-top-search i { color: var(--ob-header-fg) !important; } .penci_navbar_mobile .button-menu-mobile svg rect, .penci-mobile-midbar .button-menu-mobile svg rect { fill: var(--ob-header-fg) !important; } .penci_navbar_mobile .button-menu-mobile, .penci-mobile-midbar .button-menu-mobile { color: var(--ob-header-fg) !important; } /* -------------------------------------------------------------------------- 8. Rivals-style single bar (desktop ≥768px) -------------------------------------------------------------------------- The Penci builder ships two stacked desktop headers: a static top utility bar (hamburger + centered logo + date) and a "show-up on scroll" sticky header that holds the real horizontal menu. To get the clean Rivals look — one bar, logo hard-left, menu beside it, actions right, NO hamburger — we hide the utility bar and pin the menu header open as a normal static bar. NOTE: this is a CSS override of a header-builder *layout* that otherwise lives in the WordPress DB (Appearance → header builder). The proper, durable fix is to reconfigure the builder there; this keeps it in theme code so it ships with the studio branch. -------------------------------------------------------------------------- */ @media screen and (min-width: 768px) { /* a) Drop the white utility bar entirely → removes the desktop hamburger, the centered duplicate logo, and the date strip. */ .penci-header-wrap .penci_header.main-builder-header, .penci-header-wrap .penci-desktop-topbar, .penci-header-wrap .penci-menuhbg-wapper, .penci-header-wrap .penci-menu-toggle-wapper { display: none !important; } /* b) Pin the menu header open (it's normally position:fixed + hidden until scroll) so it reads as a single, always-visible top bar. */ .penci-header-wrap .penci_builder_sticky_header_desktop { position: relative !important; top: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* c) Make sure the logo shows in this header and sits hard-left. Penci suppresses the logo until the header goes "fixed", so force it. */ .penci-header-wrap .penci_builder_sticky_header_desktop .penci_nav_left, .penci-header-wrap .penci_builder_sticky_header_desktop .pc-logo, .penci-header-wrap .penci_builder_sticky_header_desktop .penci-header-image-logo, .penci-header-wrap .penci_builder_sticky_header_desktop .penci-header-image-logo a { display: flex !important; align-items: center; visibility: visible !important; opacity: 1 !important; } /* Force real dimensions: overrides.css clamps the logo with max-width:100% + height:100%, which collapses to 0 against the shrunk flex column. Pin an explicit height + auto width + no max-width so the img takes its intrinsic size and expands the column. */ .penci-header-wrap .penci_builder_sticky_header_desktop .penci_nav_left, .penci-header-wrap .penci_builder_sticky_header_desktop .pc-logo, .penci-header-wrap .penci_builder_sticky_header_desktop .penci-header-image-logo { flex: 0 0 auto !important; width: auto !important; } .penci-header-wrap .penci_builder_sticky_header_desktop .penci-header-image-logo img { display: inline-block !important; visibility: visible !important; opacity: 1 !important; height: 1.5rem !important; /* 25% smaller than 2rem to free up menu space */ max-height: 1.5rem !important; width: auto !important; max-width: none !important; } /* Full-bleed orange bar, but align the inner content (logo on the left, actions on the right) to the same centered container as the page content (--ob-container-width). The max() keeps a sane gutter on narrow screens. Result: logo lines up with the featured/main column's left edge and the Join/Login/search cluster lines up with the rail's right edge. */ .penci-header-wrap .penci_builder_sticky_header_desktop .container, .penci-header-wrap .penci_builder_sticky_header_desktop .penci_container { max-width: none !important; width: 100% !important; padding-left: max(var(--spacing-4), calc((100% - var(--ob-container-width)) / 2)) !important; padding-right: max(var(--spacing-4), calc((100% - var(--ob-container-width)) / 2)) !important; } /* d) Rivals layout: logo left, menu left beside it, actions pinned right. The actions never shrink/clip; the menu absorbs any squeeze. */ .penci-header-wrap .penci_builder_sticky_header_desktop .penci_nav_row { display: flex !important; align-items: center !important; gap: 0.6rem; min-height: 59px; /* restore the previous bar height; small logo centers in it */ } /* Menu takes the middle and may shrink (min-width:0). NOTE: do NOT set overflow:hidden here — it would clip the dropdown submenus that extend below the bar. With the footer links hidden, the 6 items fit without it. */ .penci-header-wrap .penci_builder_sticky_header_desktop .penci_nav_center { flex: 0 1 auto; /* hug the menu's content so items pack left, not spread */ min-width: 0; justify-content: flex-start !important; text-align: left !important; } /* Penci puts right-margins between menu items; zero them so the menu's intrinsic width fits beside the logo + actions at common widths. */ .penci-header-wrap .penci_builder_sticky_header_desktop .navigation ul.menu > li.menu-item { margin: 0 !important; } .penci-header-wrap .penci_builder_sticky_header_desktop .penci_nav_center .navigation ul.menu { display: flex !important; flex-wrap: nowrap !important; /* keep the top menu on one line */ align-items: center !important; /* don't stretch items to full bar height */ justify-content: flex-start !important; gap: 7px !important; /* +3px more breathing room between items */ margin: 0 !important; } /* Items size to content (not stretched), so the pill is only as tall as the text + its own padding — not the whole bar. */ .penci-header-wrap .penci_builder_sticky_header_desktop .navigation ul.menu > li.menu-item { align-self: center !important; height: auto !important; } /* Rivals-style pill: short (half-height), rounded, soft-orange highlight. */ .penci-header-wrap .penci_builder_sticky_header_desktop .navigation ul.menu > li.menu-item > a { display: inline-block !important; /* height = content, not full bar */ font-size: 0.9rem !important; font-weight: 700 !important; line-height: 1.2 !important; padding: 0.28rem 0.6rem !important; border-radius: 8px !important; white-space: nowrap; } .penci-header-wrap .penci_builder_sticky_header_desktop .navigation ul.menu > li.menu-item { margin: 0 !important; } /* Actions stay on the right and never get pushed off-screen. */ .penci-header-wrap .penci_builder_sticky_header_desktop .penci_nav_right { margin-left: auto; flex: 0 0 auto; } .penci-header-wrap .penci_builder_sticky_header_desktop .ob-auth-wrapper { flex-wrap: nowrap; } } /* -------------------------------------------------------------------------- 9. Mobile slide-out panel — keep it a clean, readable white sheet (the sidebar logo keeps its original colors, so don't invert it) -------------------------------------------------------------------------- */ .penci-mobile-sidebar-content-wrapper .pb-logo-sidebar-mobile img { filter: none; } .penci-mobile-sidebar-content-wrapper .navigation ul.menu li a { font-weight: 500 !important; letter-spacing: 0.1px !important; } /* -------------------------------------------------------------------------- 10. Drop footer-only links from the header nav -------------------------------------------------------------------------- "Privacy Policy" and "Terms of Service" come from the footer menu that's assigned to the header; they don't belong in the primary nav. Hide them by their (environment-stable) page slugs so this holds on dev/prod too. This is a display-only hide — the proper fix is to assign a real primary menu in Appearance → Menus, which lives in the DB. -------------------------------------------------------------------------- */ .penci-header-wrap .menu-item:has(> a[href*="/privacy-policy/"]), .penci-header-wrap .menu-item:has(> a[href*="/terms-of-service/"]), .penci-mobile-sidebar-content-wrapper .menu-item:has(> a[href*="/privacy-policy/"]), .penci-mobile-sidebar-content-wrapper .menu-item:has(> a[href*="/terms-of-service/"]) { display: none !important; } /* Hide competitor (247Sports) links from the recruiting dropdowns. */ .penci-header-wrap .menu-item:has(> a[href*="247sports.com"]), .penci-mobile-sidebar-content-wrapper .menu-item:has(> a[href*="247sports.com"]) { display: none !important; } /* Hide social links from the header nav (they live in the left-rail social module now). Scoped to header menu items so the rail module is unaffected. */ .penci-header-wrap .menu-item:has(> a[href*="facebook.com"]), .penci-header-wrap .menu-item:has(> a[href*="instagram.com"]), .penci-header-wrap .menu-item:has(> a[href*="tiktok.com"]), .penci-header-wrap .menu-item:has(> a[href*="x.com/"]), .penci-header-wrap .menu-item:has(> a[href*="youtube.com"]), .penci-mobile-sidebar-content-wrapper .menu-item:has(> a[href*="facebook.com"]), .penci-mobile-sidebar-content-wrapper .menu-item:has(> a[href*="instagram.com"]), .penci-mobile-sidebar-content-wrapper .menu-item:has(> a[href*="tiktok.com"]), .penci-mobile-sidebar-content-wrapper .menu-item:has(> a[href*="x.com/"]), .penci-mobile-sidebar-content-wrapper .menu-item:has(> a[href*="youtube.com"]) { display: none !important; }