/** * ToysEasy Header * * Consolidated static header/search styles. * First-paint fixed header + homepage Header/Hero seam fix v1.3. * Replaces legacy inline CSS MU plugins. */ /* ========================================================= DESKTOP FIRST-PAINT FIXED HEADER ========================================================= The desktop header is fixed by CSS from the first paint. WoodMart JS may still enhance menus/search, but it is no longer required to make the navigation stay on screen. ========================================================= */ :root { /* WoodMart Header Builder values: desktop 68px, mobile 60px. * This CSS-first fixed treatment applies only at >=1025px, so the * shared first-paint desktop geometry must use the real 68px value. */ --te-fixed-header-height: 68px; --te-fixed-header-top: 0px; --te-fixed-header-bottom: 68px; } /* WordPress front-end admin bar is 32px at desktop widths. */ body.admin-bar { --te-fixed-header-top: 32px; --te-fixed-header-bottom: 100px; } @media (min-width: 1025px) { /* * Keep a real in-flow spacer so fixing the header does not pull * Hero / page content upward underneath it. */ header.whb-header, .whb-header { min-height: var(--te-fixed-header-height) !important; /* * WoodMart adds inline padding-top while toggling * .whb-sticky-prepared. With our CSS-fixed source header that * becomes a second spacer and creates the white Header/Hero gap. */ padding-top: 0 !important; } header.whb-header.whb-sticky-prepared, .whb-header.whb-sticky-prepared { padding-top: 0 !important; } /* The existing WoodMart header itself becomes the single fixed header. */ .whb-general-header { position: fixed !important; top: var(--te-fixed-header-top) !important; right: 0 !important; left: 0 !important; width: 100% !important; z-index: 9995 !important; transform: none !important; margin: 0 !important; } /* * Do not allow WoodMart to display a second sticky clone on top of * the CSS-fixed source header. Search/menu/cart behavior stays on the * original header DOM. */ .whb-clone { display: none !important; } } /* ========================================================= HOMEPAGE HEADER ↔ HERO SEAM ========================================================= WoodMart adds top spacing to the page content wrapper so WooCommerce/content templates do not sit directly under the header. On the homepage, the Hero is intentionally the first visual block, so that default spacing must be removed. IMPORTANT: - homepage only; - does not change Shop/product/page spacing; - does not change Hero dimensions; - does not change Sidebar DOM or JavaScript. ========================================================= */ @media (min-width: 1025px) { /* * WoodMart legacy/current wrapper variants. * Keep bottom spacing untouched; remove only the top seam. */ body.home .main-page-wrapper, body.home .wd-content-layout { padding-top: 0 !important; padding-block-start: 0 !important; } /* * Some WoodMart header configurations carry a bottom margin. * The homepage Hero must start immediately after the fixed Header * spacer, so suppress that margin only on the homepage. */ body.home header.whb-header, body.home .whb-header { margin-bottom: 0 !important; } } /* ========================================================= DESKTOP MAIN NAVIGATION ========================================================= */ @media (min-width: 1025px) { /* Keep WordPress Navigation Labels exactly as entered. */ .whb-general-header .wd-nav-main > li > a, .whb-general-header .wd-nav-main > li > a span, .whb-general-header .wd-header-nav .menu > li > a, .whb-general-header .wd-header-nav .menu > li > a span { text-transform: none !important; } /* Default. */ .whb-general-header .wd-nav-main > li > a, .whb-general-header .wd-nav-main > li > a span, .whb-general-header .wd-header-nav .menu > li > a, .whb-general-header .wd-header-nav .menu > li > a span { color: #fff !important; } /* Hover. */ .whb-general-header .wd-nav-main > li:hover > a, .whb-general-header .wd-nav-main > li:hover > a span, .whb-general-header .wd-header-nav .menu > li:hover > a, .whb-general-header .wd-header-nav .menu > li:hover > a span { color: #ffc700 !important; } /* Current item. */ .whb-general-header .wd-nav-main > li.current-menu-item > a, .whb-general-header .wd-nav-main > li.current-menu-item > a span, .whb-general-header .wd-nav-main > li.current-menu-parent > a, .whb-general-header .wd-nav-main > li.current-menu-parent > a span, .whb-general-header .wd-nav-main > li.current-menu-ancestor > a, .whb-general-header .wd-nav-main > li.current-menu-ancestor > a span { color: #ffc700 !important; } } /* ========================================================= DESKTOP MENU POSITION ========================================================= */ @media (min-width: 1200px) { .whb-general-header .whb-col-center { transform: translateX(-50px) !important; } } /* ========================================================= HEADER SEARCH TYPOGRAPHY ========================================================= */ .whb-general-header .wd-header-search-form input, .whb-general-header .wd-header-search-form input[type="text"], .whb-general-header .wd-header-search-form input[type="search"], .whb-general-header .wd-header-search-form input[name="s"] { font-family: "Segoe UI", Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0 !important; font-synthesis: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; text-shadow: none !important; } .whb-general-header .wd-header-search-form input::placeholder { font-family: "Segoe UI", Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: rgba(255,255,255,.92) !important; opacity: 1 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================= AJAX SEARCH RESULT PANEL ========================================================= */ @media (min-width: 1025px) { .whb-general-header .autocomplete-suggestions { max-height: 430px !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.32) rgba(255,255,255,.05); } .whb-general-header .autocomplete-suggestions::-webkit-scrollbar { width: 7px; } .whb-general-header .autocomplete-suggestions::-webkit-scrollbar-track { background: rgba(255,255,255,.05); } .whb-general-header .autocomplete-suggestions::-webkit-scrollbar-thumb { background: rgba(255,255,255,.32); border-radius: 10px; } .whb-general-header .autocomplete-suggestions::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.48); } .whb-general-header .autocomplete-suggestion { flex-shrink: 0 !important; } }