/* * KD Header (Shannon 2026-11-14): kdmachinery.com header in the KD Auctions * layout. Measured from kdauctions.com 11/14: grey band #cbcbcb 133px, logo * ~112px, white pill search ~507px with 1px rgba(0,0,0,.1) border, phone 16px * bold #1c1c1c, black pill button 13px/700/1.3px tracking, solid black menu bar. * No Contact Us button in the band (0.1.2, Shannon: redundant with the * menu's Contact item). * * 🔑 Every rule is scoped to html.kdh-on, which the script adds only after it * has moved the pieces. No script = the old header, untouched. Desktop only. */ @media (min-width: 992px) { html.kdh-on .kd-header-top { display: none !important; } html.kdh-on .kd-header-middle { background: #cbcbcb !important; height: 133px !important; margin-top: 0 !important; } html.kdh-on .kd-header-middle .container, html.kdh-on .kd-header-middle .row, html.kdh-on .kd-header-middle .col-12 { height: 133px !important; } html.kdh-on .kd-header-middle-grid { display: grid !important; grid-template-columns: auto 1fr auto !important; grid-template-rows: 1fr !important; grid-template-areas: none !important; grid-auto-flow: column !important; align-items: center !important; gap: 28px !important; height: 133px !important; padding: 0 !important; margin: 0 !important; } html.kdh-on .kd-header-middle-grid > * { grid-area: auto !important; grid-row: 1 !important; align-self: center !important; } /* The old blocks the pieces came out of (H1 box on the homepage, email row everywhere). */ html.kdh-on .kd-header-middle-grid > .kd-header-h1, html.kdh-on .kd-header-middle-grid > .kd-contact-container, html.kdh-on .kd-header-middle-grid > .sub-header { display: none !important; } html.kdh-on .kd-header-logo { height: auto !important; width: auto !important; display: flex; align-items: center; } html.kdh-on .kd-header-logo a { display: flex; align-items: center; height: auto !important; } html.kdh-on .kd-header-logo img { height: 104px !important; min-height: 0 !important; max-height: none !important; width: auto !important; position: static !important; transform: none !important; margin: 0 !important; } html.kdh-on .kdh-search { justify-self: center; width: 100%; max-width: 540px; } html.kdh-on .kdh-search .kd-search-form-holder, html.kdh-on .kdh-search form { position: static !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; } /* 0.4.0 (Shannon: "make the search bar look like the one on the auctions site"): KD Auctions' box, measured 11/14: white pill, 1px rgba(0,0,0,.1) border, faint shadow, 18px grey magnifier 14px from the left, text 44px in, 15px #1c1c1c, placeholder #6b7280. */ html.kdh-on .kdh-search input.search-field { width: 100% !important; height: 45px !important; border-radius: 9999px !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 14px center / 18px 18px !important; padding: 10px 16px 10px 44px !important; font-size: 15px !important; color: #1c1c1c !important; } html.kdh-on .kdh-search input.search-field::placeholder { color: #6b7280 !important; opacity: 1; } html.kdh-on .kdh-search input.search-field:focus { outline: none !important; border-color: rgba(0, 0, 0, 0.25) !important; } html.kdh-on .kdh-search form button, html.kdh-on .kdh-search form input[type="submit"] { display: none !important; } html.kdh-on .kdh-right { display: flex; align-items: center; gap: 18px; white-space: nowrap; } html.kdh-on .kdh-right a[href^="tel"] { font-weight: 700; font-size: 16px; color: #1c1c1c !important; text-decoration: none; } /* 0.4.0: email back beside the phone, KD Auctions style. */ html.kdh-on .kdh-right a[href^="mailto"] { font-weight: 500; font-size: 15px; color: rgba(28, 28, 28, 0.8) !important; text-decoration: none; } html.kdh-on .kdh-right .kdh-dot { color: rgba(0, 0, 0, 0.25); margin: 0 -8px; } html.kdh-on .kdh-cart { display: flex; align-items: center; } html.kdh-on .kdh-cart ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; gap: 10px; align-items: center; } html.kdh-on .kdh-cart li { list-style: none !important; } /* 0.3.1 (Shannon: "the cart needs an icon"): the theme's own basket icon (.cart-icon, normally phone-only) instead of the word "Cart", with the count as a small badge on its corner. */ html.kdh-on .kdh-cart .kd-basket-col { padding: 0 !important; flex: none !important; width: auto !important; } html.kdh-on .kdh-cart a { position: relative; display: inline-flex !important; align-items: center; color: #1c1c1c !important; text-decoration: none; padding: 4px 6px; } html.kdh-on .kdh-cart a > .d-sm-inline-block { display: none !important; } html.kdh-on .kdh-cart .cart-icon { display: inline-block !important; font-size: 22px; line-height: 1; } html.kdh-on .kdh-cart .count { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #141414; color: #fff !important; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } html.kdh-on #kd-header-nav { background: #000 !important; } /* 0.5.3 (Shannon: "a little more space between the header menu and the breadcrumbs" on category pages): theme default is 10px above. */ html.kdh-on .main > .breadcrumbs { padding-top: 22px !important; } /* Scrolling (0.5.0, Shannon: "act like the kd auctions site ... it jumps now ... the logo shrinks too small"). Like KD Auctions: the whole header (grey band + menu bar) is pinned from the start (kdh-fixed, added by the script after it has set .kd-header's min-height to the header's measured height, so the page below never moves). Past 120px of scroll the script adds kdh-stuck and the band EASES to 92px, logo 104 -> 80px. (KDA goes 112 -> 64, but our logo has MACHINERY lettered under it, unreadable at 64.) 🪤 The theme sets min-height:90px on the logo img: 0.1.2-0.4.1's "46px" logo was really 90px spilling out of a 60px band. min-height is reset here. The theme puts `transition: all` on everything, so the transitions here are explicit: height only, 0.3s like KDA, and none on the menu bar. */ html.kdh-on #kd-header-nav, html.kdh-on #kd-header-nav.sticky { position: relative !important; top: auto !important; left: auto !important; transition: none !important; } /* 0.6.2 (Shannon: "when scrolling on a category page it brings an invisible bar with it"): the theme fixes this box at 168px on inner pages; collapsed, the band + menu end at 141px, so 27px of transparent box rode along and swallowed clicks. The box now takes its contents' height. */ /* 0.6.3 (Shannon: "if i scroll to the bottom of the homepage and try and hover over machine categories nothing happens"): the theme gives header.kd-header z-index 2 and footer.site-footer z-index 10, so the footer covered the open mega menu near the bottom of the page. The wrapper's z-index 1000 only counted inside the header's layer 2. */ html.kdh-on.kdh-fixed .kd-header { z-index: 1000 !important; } html.kdh-on.kdh-fixed .kd-header-background-wrapper { height: auto !important; min-height: 0 !important; position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); transition: none !important; } /* 0.6.4 (Shannon: "when i load a fresh homepage and then try and scroll it is laggy and jumpy"): the theme puts `transition: all` on everything, so when this plugin restyles the header on load the theme ANIMATED it from its old size to the new one, sliding the page for ~0.3 s (measured: a run of layout shifts on
). No header animation at all until the script adds kdh-anim, after the first two frames. */ html.kdh-on:not(.kdh-anim) .kd-header, html.kdh-on:not(.kdh-anim) .kd-header * { transition: none !important; } html.kdh-on .kd-header-middle, html.kdh-on .kd-header-middle .container, html.kdh-on .kd-header-middle .row, html.kdh-on .kd-header-middle .col-12, html.kdh-on .kd-header-middle-grid, html.kdh-on .kd-header-logo, html.kdh-on .kd-header-logo a, html.kdh-on .kd-header-logo img, html.kdh-on .kdh-search input.search-field { transition: height 0.3s ease !important; } html.kdh-on.kdh-stuck .kd-header-middle, html.kdh-on.kdh-stuck .kd-header-middle .container, html.kdh-on.kdh-stuck .kd-header-middle .row, html.kdh-on.kdh-stuck .kd-header-middle .col-12, html.kdh-on.kdh-stuck .kd-header-middle-grid { height: 92px !important; } html.kdh-on.kdh-stuck .kd-header-logo, html.kdh-on.kdh-stuck .kd-header-logo a { height: 92px !important; overflow: visible !important; align-items: center !important; } html.kdh-on.kdh-stuck .kd-header-logo img { height: 80px !important; } html.kdh-on.kdh-stuck .kdh-search input.search-field { height: 40px !important; } /* 0.4.0 (Shannon: "when i search it cuts off the kd machinery logo, put the results lower"): kd-search-speed opens its results panel 8px below the search box (fine under the old 60px black bar). In the new band the box sits mid-band, so the panel covered the logo. Start it below the menu bar: 133 + 49 at the top of the page, 60 + 49 when the slim band is pinned. */ html.kdh-on .kd-is { top: var(--kdh-h, 182px) !important; } /* 0.4.1: the theme's old suggestion dropdown (.search-suggestions) is pinned 44px below the top of the header block, which in the new band is ON the search box, and the menu bar cut it off. The results panel above already lists every match with photos, so it is hidden with the new header. */ html.kdh-on .kdh-search .search-suggestions { display: none !important; } html.kdh-on.kdh-stuck .kd-is { top: calc(var(--kdh-h, 182px) - 41px) !important; } } /* 0.9.3 (Shannon 2026-11-14: "the header on the cnc machines page doesn't match the same color as the header on the homepage"). The theme lays a .site-wrapper::after veil, rgba(255,255,255,.7), 182px tall, over the top of every page (it softened the old header photo). It sits OVER our grey band, so inner pages showed it as #eeeeee instead of #cbcbcb (sampled 11/14). The homepage lost the veil in 0.8.8; now every page does. */ html.kdh-on .site-wrapper::after { display: none !important; } /* 0.9.4 (Shannon 2026-11-14, after 0.9.3 went live: "the header color on the cnc machines page is still off from the homepage"). There is a SECOND white veil: the theme puts .kd-header-middle .overlay, rgba(255,255,255,.7), inside the grey band on every page. The homepage hides it only because the theme adds body.has-header-background there, so inner pages showed #cbcbcb under 70% white (~#efefef). Measured live 11/14: overlay display block on /cnc-machines/, none on /. Hidden everywhere so the band is one grey. */ html.kdh-on .kd-header-middle .overlay { display: none !important; }