/* ========================================================================== Hometrix Global Utility Navigation (Standalone) ========================================================================== */ /* Import required fonts just for the header */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;600&display=swap'); /* Scope variables strictly to the nav to prevent legacy body conflicts */ .utility-nav { --nav-bg: #161b22; --nav-border: #2d333b; --nav-text-primary: #e6edf3; --nav-text-secondary: #848d97; width: 100%; padding: 0.75rem 2rem; background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; font-family: 'Inter', sans-serif; box-sizing: border-box; } .utility-nav * { box-sizing: border-box; } .utility-nav .breadcrumbs { display: flex; align-items: center; font-size: 0.75rem; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; text-transform: uppercase; } .utility-nav .crumb { color: var(--nav-text-secondary); text-decoration: none; transition: color 0.2s ease; } .utility-nav .crumb:hover { color: #00FF00; /*var(--nav-text-primary); */ } .utility-nav .separator { margin: 0 0.8rem; color: var(--nav-border); } .utility-nav .current { color: var(--nav-text-primary); font-weight: 600; } .utility-nav .nav-logo img { height: 35px; display: block; border: none; } /* Utility class to blend the black-background logo into light headers */ .logo-blend-fade { /* Fades from the nav background (left) to solid black (right) */ background: linear-gradient(to right, var(--nav-bg) 0%, #000000 85%); /* Optional: Add a little padding so the gradient has room to breathe before hitting the image */ padding-left: 20px; /* Optional: Smooth the corners if the fade doesn't touch the edges of the header */ border-radius: 4px; /* Ensures the div wraps tightly around the flex-item */ display: flex; align-items: center; } /* --- Mobile Responsiveness for Utility Nav --- */ @media (max-width: 600px) { .utility-nav { padding: 0.75rem 1rem; flex-direction: column-reverse; align-items: flex-start; gap: 0.75rem; } .utility-nav .breadcrumbs { flex-wrap: wrap; line-height: 1.8; } .utility-nav .nav-logo img { height: 28px; } } /* The HTML Drop-In Whenever you retrofit a legacy page, you will delete the old

and drop this directly under the opening tag. Just update the breadcrumb text to match the article. */