/** * Header density pass. * * Trims the existing three-row header from ~186px / ~20% of a 911px viewport * down to ~132px / ~14.5%, hitting the 8–12% modern-SaaS target band without * restructuring layout, changing markup, or touching JS. * * Savings come from three places: * - Cap the logo at 44px (was clamp(56,4.4vw,76px) — the 76px max was the * dominant contributor, costing 32px on a wide desktop). * - Slim the search input pill from 46px → 40px. * - Tighten the bottom-header padding from 12px → 6px each side. * * Scoped to @media (min-width: 1024px) so the mobile/tablet layout (where * the bar already collapses to a hamburger flow) is untouched. * * All selectors include `body` to bump specificity above the legacy * `.bottom-header .search-input, .bottom-header input.search-field.search-input` * rule that lives in wp-custom-css (Customizer Additional CSS) and pins the * input to 46px with !important. Without the body prefix, the cascade ties * and source order would matter. */ @media (min-width: 1024px) { /* --- Row 2 (primary-header): cap the logo so vertical space comes back. --- */ body .primary-header .logo-wrapper a.site-logo img { height: clamp(36px, 3vw, 44px) !important; max-height: 44px !important; width: auto !important; } body .primary-header header.header-main-logo { padding-top: 0 !important; padding-bottom: 0 !important; } /* --- Row 3 (bottom-header): tighten padding and slim the inner controls. --- */ body .bottom-header { padding-top: 6px !important; padding-bottom: 6px !important; } /* Search form + input — beat the legacy 46px rule via specificity */ body .bottom-header .search-form, body .bottom-header input.search-field.search-input, body .bottom-header .search-input { height: 40px !important; min-height: 40px !important; } /* Location / Account / Shop / Cart pills — bring them down from 40px to 36px */ body .bottom-header .hos_location_section, body .bottom-header .locations > .dropdown, body .bottom-header .shop_head, body .bottom-header .cart-link { height: 36px !important; min-height: 36px !important; } /* ---- CTA pair: Request a Quote (primary) + Log in to Purchase (secondary). Both share the same footprint so the bar has a clean right-edge rhythm; visual hierarchy comes from the fill (gradient vs outlined), not from sizing. Selectors are body-prefixed to beat the legacy `.primary-header .header-buttons a.quote-button` (0,3,1) rule. ---- */ body .primary-header .header-buttons ul.menu-buttons { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } body .primary-header .header-buttons ul.menu-buttons li { margin: 0 !important; padding: 0 !important; list-style: none !important; } body .primary-header .header-buttons a.quote-button, body .primary-header .header-buttons .login_btn a, body .primary-header .header-buttons .login_btn > a[role="button"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 38px !important; min-height: 38px !important; min-width: 0 !important; padding: 0 20px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.01em !important; line-height: 1 !important; border-radius: 10px !important; box-sizing: border-box !important; text-decoration: none !important; cursor: pointer !important; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important; } /* Primary CTA — Request a Quote — brand-blue gradient with subtle lift on hover */ body .primary-header .header-buttons a.quote-button { background: linear-gradient(180deg, #0192ef 0%, #0e70bb 100%) !important; color: #ffffff !important; border: 1px solid transparent !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 4px 10px rgba(14, 112, 187, 0.20), 0 1px 2px rgba(14, 25, 53, 0.08) !important; } body .primary-header .header-buttons a.quote-button:hover, body .primary-header .header-buttons a.quote-button:focus-visible { transform: translateY(-1px) !important; color: #ffffff !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 20px rgba(14, 112, 187, 0.35), 0 2px 4px rgba(14, 25, 53, 0.10) !important; } /* Secondary CTA — Log in to Purchase — white card with brand-blue border; fills with brand blue on hover so the relationship to the primary feels intentional. */ body .primary-header .header-buttons .login_btn a, body .primary-header .header-buttons .login_btn > a[role="button"] { background: #ffffff !important; background-image: none !important; color: #0e70bb !important; border: 1px solid rgba(14, 112, 187, 0.32) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.80) inset, 0 1px 2px rgba(14, 25, 53, 0.04) !important; } body .primary-header .header-buttons .login_btn a:hover, body .primary-header .header-buttons .login_btn > a[role="button"]:hover, body .primary-header .header-buttons .login_btn a:focus-visible { transform: translateY(-1px) !important; background: #0e70bb !important; color: #ffffff !important; border-color: #0e70bb !important; box-shadow: 0 6px 14px rgba(14, 112, 187, 0.25) !important; } /* Shared icon sizing inside both buttons */ body .primary-header .header-buttons a.quote-button i, body .primary-header .header-buttons a.quote-button svg, body .primary-header .header-buttons .login_btn a i, body .primary-header .header-buttons .login_btn a svg { font-size: 13px !important; width: 14px !important; height: 14px !important; flex-shrink: 0 !important; } /* ---- Typography polish ------------------------------------------------ The header was rendering Inter correctly but with inconsistent weights and sizes — nav at 15px/600 next to buttons at 13px/600 read as a mismatched chunky-then-compact pair. Refining the entire scale so everything in the header reads as one Inter family at deliberate weights: - Eyebrows (FOLLOW US): 11px / 600 / 0.14em tracking (already) - Nav links: 14px / 500 / -0.005em (was 15/600) - Buttons (Quote, Login): 13px / 600 / -0.005em - Search input: 13.5px / 500 / -0.005em - Right cluster (loc/cart): 13px / 500 / -0.005em - Numerics (cart count, phone): tabular-nums for clean alignment Plus universal antialiasing + Inter feature settings for refined glyphs. ---------------------------------------------------------------------- */ body .top-bar, body .top-bar *, body .primary-header, body .primary-header *, body .bottom-header, body .bottom-header * { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; font-feature-settings: 'cv11', 'ss01' !important; } /* Nav links — beat the legacy .primary-header #nav-main .nav-wrapper ul > li > a rule (1,2,3) by matching its chain and adding body (1,2,4). */ body .primary-header #nav-main .nav-wrapper ul > li > a, body .primary-header #nav-main .nav-wrapper ul > li a { font-size: 14px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; line-height: 1.4 !important; color: #1a2333 !important; padding: 8px 12px !important; transition: color 0.18s ease !important; } body .primary-header #nav-main .nav-wrapper ul > li > a:hover, body .primary-header #nav-main .nav-wrapper ul > li > a:focus-visible { color: #0e70bb !important; } /* Quote + Login — refined tracking on top of existing sizing */ body .primary-header .header-buttons a.quote-button, body .primary-header .header-buttons .login_btn a { letter-spacing: -0.005em !important; } /* Search input — explicit Inter and softer placeholder */ body .bottom-header input.search-field.search-input, body .bottom-header .search-input { font-family: 'Inter', sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; } body .bottom-header input.search-field.search-input::placeholder { font-weight: 400 !important; color: #94a3b8 !important; } /* Right cluster: location / account / shop / cart — unified at 13/500 */ body .bottom-header .hospital-name, body .bottom-header .dropdown-toggle, body .bottom-header .shop_head, body .bottom-header .shop_head a, body .bottom-header .cart-link { font-size: 13px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; } /* Cart count badge — tabular numerals so 1, 10, 99+ stay aligned */ body .header_cart_count { font-variant-numeric: tabular-nums !important; font-feature-settings: 'tnum' !important; font-weight: 700 !important; } /* Top bar Call link — tabular numerals for the phone number */ body .top-bar .contact-wrapper a { letter-spacing: -0.005em !important; font-variant-numeric: tabular-nums !important; font-feature-settings: 'tnum' !important; } }