/** * TRC Sticky Header — KAAM-36055 * Pins #masthead on scroll (utility + menu). Announcement bar (.topbar) scrolls away. * Activated by the .trc-header-stuck class on (added by trc-sticky-header.js). */ /* Flow spacer that reserves the header's height while it is fixed (prevents jump). */ .trc-header-spacer { height: 0; } /* Pinned state — the red announcement bar (.topbar) and the black nav * (#masthead) pin TOGETHER so the announcement bar stays visible on scroll * (KAAM-36430). The topbar sits at the very top; the masthead sits directly * beneath it via `top: var(--trc-topbar-h)` (JS publishes the topbar height). */ body.trc-header-stuck .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 991; /* just above the masthead */ } body.trc-header-stuck #masthead.site-header { position: fixed; top: var(--trc-topbar-h, 0); /* directly beneath the pinned announcement bar */ left: 0; right: 0; z-index: 990; /* above WPBakery rows + homepage slider, below modals */ background: #000; /* header is black (rgb(0,0,0)) — keep opaque when fixed */ box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22); } /* WordPress admin bar offset (logged-in users only): push BOTH down by the bar. */ body.trc-header-stuck.admin-bar .topbar { top: 32px; } body.trc-header-stuck.admin-bar #masthead.site-header { top: calc(32px + var(--trc-topbar-h, 0)); } @media screen and (max-width: 782px) { body.trc-header-stuck.admin-bar .topbar { top: 46px; } body.trc-header-stuck.admin-bar #masthead.site-header { top: calc(46px + var(--trc-topbar-h, 0)); } } /* ------------------------------------------------------------------------- * Tablet + mobile (<=1023px) — compact bar: logo LEFT, hamburger RIGHT. * The 7-item horizontal menu can't fit beside the logo below ~1024px, so this * whole range uses the hamburger (extends the theme's <=767 mobile menu up to * 1023). Logo shrinks to share the row with the hamburger; menu opens below. * ------------------------------------------------------------------------- */ @media screen and (max-width: 1023px) { /* header padding 15px top/bottom (was 25/20) */ .site-header { padding-top: 15px; padding-bottom: 15px; } /* TOP band — sign-in (left) + search/cart (right). Right-align the icon cluster so the cart sits directly above the hamburger (both 15px in). */ .site-header .sign-in { top: 2px; left: 15px; } .site-header .header-links { width: auto; /* shrink to content so the cart's right edge = 15px from viewport */ top: 0; right: 15px; padding-top: 0; overflow: visible; /* cart badge (.cart-contents-count) rises ~8px ABOVE the icon (translateY(-105%)) — with padding-top:0 the theme's overflow:hidden would clip it. Container is abs-positioned, so visible overflow can't shift any siblings. */ } .site-header .header-search-link { width: 20px; height: 19px; background-size: contain; background-repeat: no-repeat; top: 3px; margin-right: 14px; } .site-header .header-cart-link, .site-header .cart-contents { width: 26px; height: 24px; background-size: contain; background-repeat: no-repeat; } /* KAAM-36053 (Ravi 2026-08-28): NO hamburger — the menu is a horizontal side-scroll strip up top in the same header (Memberships · Swim Camps · …). */ .site-header button.menu-toggle { display: none !important; } .site-header #primary-menu.desktop-menu { display: none !important; } /* logo row — CENTERED per KAAM-36617 (Sofia/Ravi 2026-09-04). Sign-in (top band) and the menu strip (below) stay LEFT-aligned as before; only the logo centers. */ .site-header .site-branding { float: none; width: 100%; text-align: center; /* centre the logo in its own row */ position: relative; left: 18px; /* counter the Bootstrap .row -15px margin so the logo sits at true viewport centre */ padding-top: 34px; /* clears the top sign-in / search-cart band */ padding-left: 0; margin-bottom: 4px; pointer-events: none; /* full-width box overlaps the sign-in/cart band → let clicks pass THROUGH it */ } /* …but the logo itself stays clickable */ .site-header .site-branding .custom-logo-link, .site-header .site-branding .custom-logo { pointer-events: auto; } .site-header .site-branding img, .site-header .site-branding .custom-logo { height: 40px !important; /* uncut logo (attach 350636) TRUE aspect 5016/964 ≈ 5.203 → 40 x 208 */ width: 208px !important; max-height: none !important; max-width: none !important; object-fit: contain !important; /* never distort even if a box constrains it */ object-position: left center !important; /* hug LEFT — any letterbox gap goes RIGHT, no left whitespace */ } /* horizontal side-scroll menu strip — full-width row below the logo */ .site-header .main-navigation { clear: both; width: 100%; } .site-header #primary-menu.mobile-menu { display: flex !important; flex-flow: row nowrap; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox: hide scrollbar */ width: 100%; margin: 0; padding: 2px 15px 4px; list-style: none; } .site-header #primary-menu.mobile-menu::-webkit-scrollbar { display: none; } /* WebKit: hide scrollbar */ .site-header #primary-menu.mobile-menu > li { flex: 0 0 auto; position: relative; } .site-header #primary-menu.mobile-menu > li > a { display: block; padding: 6px 10px; white-space: nowrap; font-size: 13px; } .site-header #primary-menu.mobile-menu > li:first-child > a { padding-left: 0; } /* first item text → 15px, aligned with logo + sign-in */ /* subtle · separators between items (matches Ravi's example) */ .site-header #primary-menu.mobile-menu > li + li::before { content: "\00B7"; color: rgba(255, 255, 255, 0.45); position: absolute; left: -3px; top: 50%; transform: translateY(-50%); pointer-events: none; } } /* ------------------------------------------------------------------------- * Tablet landscape (1024–1199px) — menu BESIDE the logo, vertically centred, * with a gap before the cart (like desktop). The stock theme drops the menu * onto its own row below a large logo here (~350px tall, and near 820–900px * the menu slid under the cart). Requested: shrink the logo so the menu sits * beside it, centred, and clear of the cart. * ------------------------------------------------------------------------- */ @media screen and (min-width: 1024px) and (max-width: 1199px) { .site-header .header-content .row { display: flex; align-items: center; /* vertical-centre logo, menu, cart */ flex-wrap: nowrap; gap: 16px; padding-top: 30px; /* room for the absolute Sign-in above the row */ } .site-header .sign-in { left: auto; right: 0; top: 6px; } /* Sign-in top-right, like desktop */ .site-header .site-branding { float: none; width: auto; flex: 0 0 auto; text-align: left; padding-top: 0; padding-right: 0; margin-bottom: 0; } .site-header .site-branding img, .site-header .site-branding .custom-logo { height: 44px !important; /* uncut logo TRUE aspect ≈ 5.203 → 44 x 229 */ width: 229px !important; max-height: none !important; max-width: none !important; object-fit: contain !important; object-position: left center !important; } .site-header .main-navigation { float: none; width: auto; flex: 1 1 auto; padding-top: 0; display: flex; align-items: center; } .site-header .main-navigation .desktop-menu { display: flex; flex-wrap: nowrap; } .site-header .main-navigation .desktop-menu > li > a { padding: 8px 6px; /* tighten so all 7 items fit one row */ white-space: nowrap; /* keep multi-word items ("Swim Camps") on one line */ font-size: 13px; /* slightly smaller so it fits at 1024 with a cart gap */ } .site-header .header-links { float: none; position: static; width: auto; flex: 0 0 auto; padding-top: 0; margin-left: auto; /* gap before the cart */ top: auto; right: auto; } } /* ------------------------------------------------------------------------- * Announcement bar (<=767px) — promo text LEFT, language selector RIGHT * (side by side) instead of stacked, so the red bar fits in a smaller height * on phones. Was ~98px (announcement wrapped + "English" on its own line). * ------------------------------------------------------------------------- */ @media screen and (max-width: 767px) { /* An inline theme