/* ============================================================ Xeon NC — shared navigation stylesheet Self-contained (no dependency on per-page CSS variables) so it renders identically on every page. Loaded LAST in so it is authoritative over any older inline nav rules. Covers: full-width mega-dropdowns (desktop), the hover-intent open state (driven by nav-menu.js), the hamburger button, the mobile slide-in menu, and the mobile tap-to-expand accordion. ============================================================ */ /* ───────────────────────────────────────────────────────────── DROPDOWN — base (hidden) state ───────────────────────────────────────────────────────────── */ #main-nav .nav-has-dropdown { position: relative; } #main-nav .nav-dropdown { opacity: 0; visibility: hidden; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); background: #111; border: 1px solid rgba(255, 255, 255, 0.18); border-top: 24px solid transparent; margin-top: -4px; background-clip: padding-box; width: max-content; max-width: 1400px; z-index: 200; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; display: flex; text-align: left; } #main-nav .nav-dropdown::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: #111; border-left: 1px solid rgba(255, 255, 255, 0.18); border-top: 1px solid rgba(255, 255, 255, 0.18); } /* ── summary / left column ── */ #main-nav .dd-all-col { background: #0a0a0a; border-right: 1px solid rgba(255, 255, 255, 0.08); padding: 28px 24px; min-width: 200px; display: flex; flex-direction: column; } #main-nav .dd-all-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #888; margin-bottom: 12px; } #main-nav .dd-all-link { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; transition: color 0.2s; text-transform: none; letter-spacing: normal; opacity: 1; } #main-nav .dd-all-link:hover { color: #3b82f6; } #main-nav .dd-all-sub { font-size: 12px; color: #888; line-height: 1.55; margin-top: 8px; text-transform: none; letter-spacing: normal; } #main-nav .dd-arrow { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.4); color: #3b82f6; font-size: 11px; flex-shrink: 0; } #main-nav .dd-stat-chips { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; } #main-nav .dd-stat-chip { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); padding: 8px 12px; } #main-nav .dd-stat-chip-num { font-family: 'Share Tech Mono', monospace; font-size: 18px; font-weight: 700; color: #3b82f6; line-height: 1; } #main-nav .dd-stat-chip-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.08em; } /* ── columns ── */ #main-nav .dd-cols { display: grid; grid-template-columns: repeat(3, minmax(210px, 1fr)); flex: 1; } /* Resources has a dedicated editorial Insights area in addition to Guides, Calculators, and About. Keep all four areas on one desktop row. */ @media (min-width: 901px) { #main-nav #resources-dropdown .dd-cols { grid-template-columns: minmax(175px, .72fr) minmax(230px, 1.05fr) minmax(245px, 1.1fr) minmax(205px, .9fr); } #main-nav #resources-dropdown .dd-insights-col { background: #0d1729; border-top: 2px solid #3b82f6; } #main-nav #resources-dropdown .dd-insights-col .dd-col-title { color: #8db5ff; } } #main-nav .dd-col { padding: 22px 18px; border-right: 1px solid rgba(255, 255, 255, 0.08); position: relative; } #main-nav .dd-col:last-child { border-right: none; } #main-nav .dd-col-title { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #888; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } #main-nav .dd-col-title + .dd-col-title { margin-top: 18px; } #main-nav .dd-col ul { list-style: none; display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; } #main-nav .dd-col ul li a { display: block; padding: 5px 0; color: rgba(255, 255, 255, 0.5); text-decoration: none; font-size: 12px; font-weight: 400; letter-spacing: 0.01em; text-transform: none; opacity: 1; transition: color 0.15s, padding-left 0.15s; } #main-nav .dd-col ul li a:hover { color: #fff; padding-left: 5px; opacity: 1; } /* ── expandable rows → flyout ── */ #main-nav .dd-expandable { position: relative; } #main-nav .dd-expand-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; cursor: default; transition: background 0.15s; } #main-nav .dd-expand-label { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.65); font-size: 12.5px; font-weight: 500; text-decoration: none; text-transform: none; letter-spacing: 0.01em; transition: color 0.15s; } #main-nav .dd-expand-count { font-family: 'Share Tech Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); color: #888; padding: 1px 6px; border-radius: 2px; transition: background 0.15s, color 0.15s, border-color 0.15s; } #main-nav .dd-expand-caret { font-size: 9px; color: #888; transition: color 0.15s; flex-shrink: 0; } #main-nav .dd-expandable:hover .dd-expand-label { color: #fff; } #main-nav .dd-expandable:hover .dd-expand-count { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.4); color: #3b82f6; } #main-nav .dd-expandable:hover .dd-expand-caret { color: #3b82f6; } #main-nav .dd-flyout { display: none; position: absolute; top: -22px; left: calc(100% + 1px); background: #0e0e0e; border: 1px solid rgba(255, 255, 255, 0.18); padding: 16px 0; min-width: 220px; z-index: 300; box-shadow: 12px 12px 40px rgba(0, 0, 0, 0.7); } #main-nav .dd-expandable:hover .dd-flyout { display: block; } #main-nav .dd-flyout-title { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #888; padding: 0 18px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 6px; } #main-nav .dd-flyout a { display: flex; align-items: center; justify-content: space-between; padding: 7px 18px; color: rgba(255, 255, 255, 0.55); text-decoration: none; font-size: 12.5px; font-weight: 400; transition: background 0.12s, color 0.12s; text-transform: none; letter-spacing: normal; opacity: 1; } #main-nav .dd-flyout a:hover { background: rgba(255, 255, 255, 0.04); color: #fff; opacity: 1; } #main-nav .dd-flyout-badge { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: #888; letter-spacing: 0.06em; } #main-nav .dd-finish-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: rgba(255, 255, 255, 0.55); text-decoration: none; font-size: 12.5px; font-weight: 400; transition: color 0.15s, padding-left 0.15s; text-transform: none; letter-spacing: normal; opacity: 1; } #main-nav .dd-finish-row:hover { color: #fff; padding-left: 4px; } #main-nav .dd-finish-swatch { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.15); } #main-nav .nav-caret { font-size: 9px; transition: transform 0.2s; display: inline-block; } /* ───────────────────────────────────────────────────────────── ORDER CUTOFF BADGE (injected by nav-menu.js) On desktop nav-menu.js reparents #nav-cutoff-badge onto (fixed, floating below the nav) so these rules are deliberately NOT scoped under #main-nav. On mobile it lives inside .nav-links for the slide-in accordion, where the mobile block below re-styles it. ───────────────────────────────────────────────────────────── */ .nav-cutoff-item { position: relative; list-style: none; } /* Solid brand blue rather than a translucent tint: on desktop this pill is reparented onto and floats over page content, and the site runs both dark pages and cream (#F5F4EF) guide pages. An opaque fill keeps it legible on either, instead of inheriting whatever is behind it. */ .nav-cutoff-pill { display: inline-flex; align-items: center; gap: 7px; background: #1a4fff; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 6px 12px; font-family: 'Share Tech Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: #ffffff; white-space: nowrap; opacity: 1; box-shadow: 0 4px 14px rgba(26, 79, 255, 0.32); } .nav-cutoff-icon { color: #ffffff; flex-shrink: 0; } #nav-cutoff-time { color: #ffffff; font-weight: 700; } .nav-cutoff-clock { color: rgba(255, 255, 255, 0.78); } .nav-cutoff-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.55); color: rgba(255, 255, 255, 0.9); font-size: 9.5px; font-weight: 700; cursor: help; flex-shrink: 0; outline: none; } .nav-cutoff-tooltip { position: absolute; top: calc(100% + 10px); right: -8px; width: 220px; background: #111; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.75); font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 400; line-height: 1.5; letter-spacing: normal; text-transform: none; padding: 10px 12px; opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 300; pointer-events: none; } .nav-cutoff-info:hover .nav-cutoff-tooltip, .nav-cutoff-info:focus .nav-cutoff-tooltip { opacity: 1; visibility: visible; } @media (min-width: 901px) { /* nav has no spare width for extra content at common desktop sizes, so on desktop this docks as a floating pill just under the nav (nav-menu.js moves it onto and sets `top` dynamically) */ .nav-cutoff-item { position: fixed; right: 20px; z-index: 150; } } @media (max-width: 1180px) { .nav-cutoff-clock { display: none; } } /* ───────────────────────────────────────────────────────────── OPEN STATE — driven by nav-menu.js (.nav-dd-open on the

) ───────────────────────────────────────────────────────────── */ #main-nav .nav-has-dropdown.nav-dd-open > .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.25s ease, transform 0.28s ease, visibility 0s; } #main-nav .nav-has-dropdown.nav-dd-open .nav-caret { transform: rotate(180deg); } /* ───────────────────────────────────────────────────────────── FULL-WIDTH MEGA PANEL — desktop only (mobile uses accordion) ───────────────────────────────────────────────────────────── */ @media (min-width: 901px) { #main-nav .nav-dropdown { position: fixed; left: 0; right: 0; width: auto; max-width: none; margin: 0; transform: translateY(-10px); border-left: none; border-right: none; border-top: 1px solid rgba(255, 255, 255, 0.18); border-bottom: 1px solid rgba(255, 255, 255, 0.18); padding-left: max(40px, calc((100vw - 1360px) / 2)); padding-right: max(40px, calc((100vw - 1360px) / 2)); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); } #main-nav .nav-dropdown::before { display: none !important; } #main-nav .nav-has-dropdown.nav-dd-open > .nav-dropdown { transform: translateY(0); } } /* ───────────────────────────────────────────────────────────── HAMBURGER BUTTON (injected by nav-menu.js) ───────────────────────────────────────────────────────────── */ /* legacy per-page hamburger hacks (e.g. quote.html) — superseded */ #main-nav .nav-hamburger { display: none !important; } #mobile-nav-toggle { display: none; position: relative; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; padding: 0; z-index: 1001; } #mobile-nav-toggle span { display: block; position: absolute; left: 10px; width: 24px; height: 2px; background: #fff; transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease; } #mobile-nav-toggle span:nth-child(1) { top: 14px; } #mobile-nav-toggle span:nth-child(2) { top: 21px; } #mobile-nav-toggle span:nth-child(3) { top: 28px; } body.nav-open #mobile-nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); } body.nav-open #mobile-nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open #mobile-nav-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); } /* ───────────────────────────────────────────────────────────── MOBILE — slide-in menu + tap-to-expand accordion (≤ 900px) ───────────────────────────────────────────────────────────── */ @media (max-width: 900px) { #main-nav #mobile-nav-toggle { display: block; } #main-nav .nav-links { display: flex !important; position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(86vw, 380px); background: #0a0a0a; border-left: 1px solid rgba(255, 255, 255, 0.18); flex-direction: column; align-items: stretch; gap: 0; padding: 84px 0 40px; transform: translateX(100%); transition: transform 0.3s ease; z-index: 1000; overflow-y: auto; } body.nav-open #main-nav .nav-links { transform: translateX(0); } #main-nav .nav-links > li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: static; } /* top-level row (link + caret) */ #main-nav .nav-links > li > a { font-size: 15px; opacity: 1; color: rgba(255, 255, 255, 0.85); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; min-height: 52px; line-height: 1.3; text-transform: none; letter-spacing: 0.01em; } #main-nav .nav-links > li > a:hover, #main-nav .nav-links > li > a.active { color: #fff; } #main-nav .nav-cutoff-item { padding: 14px 24px; } #main-nav .nav-cutoff-pill { width: 100%; justify-content: flex-start; flex-wrap: wrap; border-radius: 8px; padding: 10px 14px; font-size: 12.5px; white-space: normal; } #main-nav .nav-cutoff-text { white-space: normal; } #main-nav .nav-cutoff-clock { display: none; } #main-nav .nav-cutoff-info { margin-left: auto; } #main-nav .nav-cutoff-tooltip { right: -8px; left: auto; width: 260px; max-width: calc(100vw - 60px); } #main-nav .nav-links > li > a .nav-caret { display: inline-block !important; font-size: 12px; transition: transform 0.25s ease; } #main-nav .nav-has-dropdown.nav-dd-open > a .nav-caret { transform: rotate(180deg); } /* the panel collapses into an inline accordion */ #main-nav .nav-dropdown { display: none; position: static; opacity: 1; visibility: visible; transform: none; width: auto; max-width: none; margin: 0; border: none; border-top: none; box-shadow: none; background: rgba(255, 255, 255, 0.02); flex-direction: column; padding: 0; transition: none; } #main-nav .nav-dropdown::before { display: none; } #main-nav .nav-has-dropdown.nav-dd-open > .nav-dropdown { display: flex !important; } /* flatten the multi-column desktop layout into a single stack */ #main-nav .dd-all-col { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: transparent; padding: 14px 24px; min-width: 0; } #main-nav .dd-stat-chips { display: none; } #main-nav .dd-cols { display: flex; flex-direction: column; grid-template-columns: none !important; } #main-nav .dd-col { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 14px 24px; } #main-nav .dd-col-title { color: #9aa0a6; } #main-nav .dd-col ul li a { font-size: 13.5px; padding: 8px 0; color: rgba(255, 255, 255, 0.6); } /* on mobile, expandable rows just show their flyout links inline */ #main-nav .dd-expand-row { padding: 8px 0; } #main-nav .dd-flyout { display: block; position: static; border: none; box-shadow: none; padding: 2px 0 6px 12px; min-width: 0; background: transparent; } #main-nav .dd-flyout-title { display: none; } #main-nav .dd-flyout a { padding: 7px 0; } #main-nav .dd-expand-caret { display: none; } #main-nav .nav-cta { display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; padding: 20px 24px; width: 100%; } #main-nav .nav-cta .btn-outline, #main-nav .nav-cta .btn-solid { text-align: center; padding: 13px 18px; } /* The CTA moves inside .nav-links on mobile, so each page's `.nav-links a { color: ... }` rule starts winning over the button's own colour — which left "Get a Quote" as white text on a white button. Restate both buttons against the dark panel, specific enough to hold. */ #main-nav .nav-cta .btn-solid { background: #fff; color: #111; border: 1px solid #fff; opacity: 1; } #main-nav .nav-cta .btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.38); opacity: 1; } /* Sign In's own mobile rules live with the rest of its styles at the foot of this file — they have to come after the base ones to win. */ /* dim backdrop behind the panel */ body.nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 999; } body.nav-open { overflow: hidden; } /* #main-nav is fixed with its own z-index, so it forms a stacking context and the panel's z-index:1000 only competes *inside* it. Pages set the nav as low as 99, which put the whole menu under the 999 backdrop — visible through the dim layer, but eating every tap. Raise the nav itself above the backdrop while the menu is open. */ body.nav-open #main-nav { z-index: 1000; } } /* ───────────────────────────────────────────────────────────── CUSTOMER SIGN-IN — nav CTA + embedded portal modal Injected by nav-menu.js. Styles are self-contained (no per-page custom properties) and namespaced under #main-nav / .signin-* so they survive on every page's own nav CSS. ───────────────────────────────────────────────────────────── */ /* The colour below is only the fallback: nav-menu.js copies the sibling .btn-outline's computed colour onto this link inline, per page, because several pages pair a dark bar with a near-black inherited colour and neither `inherit` nor the bar's own colour can be trusted. Hover and focus therefore work off currentColor. */ #main-nav .nav-cta .nav-signin { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; background: transparent; border: 1px solid transparent; color: #fff; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; cursor: pointer; text-decoration: none; transition: color 0.2s, border-color 0.2s, background 0.2s; } /* hover/focus in currentColor and neutral grey, so the same rules read correctly on the light navs (materials, catalog, calculators) and the dark ones */ #main-nav .nav-cta .nav-signin:hover { border-color: currentColor; background: rgba(128, 128, 128, 0.16); } #main-nav .nav-cta .nav-signin:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } #main-nav .nav-cta .nav-signin svg { flex: none; opacity: 0.85; } /* ── signed-in state ── nav-menu.js adds .nav-signin-on once the portal session is confirmed and swaps the label to "Account". The status dot hangs off the icon wrapper instead of sitting beside it, so it costs no width at all — which matters because the row is tight everywhere and "Account" is already 16px wider than "Sign In". Worst measured case is the capabilities nav at 1500px, where the gap between links and buttons goes 31px → 23px. Below 1500 the label is hidden and the swap is free. */ #main-nav .nav-cta .nav-signin-icon { position: relative; display: inline-flex; align-items: center; } #main-nav .nav-cta .nav-signin-on .nav-signin-icon::after { content: ''; position: absolute; top: -2px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; } #main-nav .nav-cta .nav-signin-on svg { opacity: 1; } /* the dot alone carries the state under 1500px, where the label is hidden, so give it a touch more presence there */ @media (min-width: 901px) and (max-width: 1499px) { #main-nav .nav-cta .nav-signin-on .nav-signin-icon::after { width: 8px; height: 8px; right: -4px; } } /* The nav row has no spare width on laptops. Measured at 906px: 7 links at a 32px gap are 699px on their own on index.html, and the pages that show a wordmark spend another 160–243px on it — several of them were already running past their right gutter before this button existed. So below 1500px Sign In shows its icon alone (it carries an aria-label, so its accessible name is unaffected), 32px instead of ~107, and the row gives back more than that: 60px across the six link gaps, 8 from the CTA gap. Net, the band is roomier than it was. 1500 is where the label earns its width: at 1440 the labelled row fits the widest nav (logo 243 + links 736 + CTA 362) with 19px to spare, so the links all but touch the buttons; by 1500 that is ~79px. Below 1440 it doesn't fit at all — the link row starts compressing. */ @media (min-width: 901px) and (max-width: 1499px) { #main-nav .nav-links { gap: 22px; } #main-nav .nav-cta { gap: 8px; } #main-nav .nav-cta .nav-signin { padding: 9px 8px; } /* the label only — the icon wrapper keeps carrying the signed-in dot */ #main-nav .nav-cta .nav-signin .nav-signin-label { display: none; } } /* the tightest band — the gaps alone still leave index.html 8px from the edge here, so take 16px off each side gutter (40 → 24) and a little off the two existing buttons */ @media (min-width: 901px) and (max-width: 1079px) { #main-nav { padding-left: 24px; padding-right: 24px; } #main-nav .nav-cta .btn-outline { padding: 9px 14px; } #main-nav .nav-cta .btn-solid { padding: 9px 16px; } } /* In the mobile slide-in panel .nav-cta is reparented into .nav-links, so the page's own `.nav-links a/button { … }` colours start applying and there is room for a full-width row like the other two CTAs. Restated here, after the base rules, so it wins on equal specificity. */ @media (max-width: 900px) { #main-nav .nav-cta .nav-signin { justify-content: center; width: 100%; /* 16 rather than the siblings' 13: this button sets line-height:1 for the icon, so it needs the extra to match their 48px row height */ padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.38); background: transparent; color: #fff; opacity: 1; } } /* ── overlay ── */ .signin-overlay { position: fixed; inset: 0; z-index: 100000; /* above every page's nav, which ranges 99–1000 */ display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 8, 8, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0s linear 0.22s; } .signin-overlay.signin-visible { opacity: 1; visibility: visible; transition: opacity 0.22s ease; } body.signin-open { overflow: hidden; } .signin-panel { width: 100%; max-width: 480px; max-height: 100%; display: flex; flex-direction: column; background: #111; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75); transform: translateY(10px) scale(0.99); transition: transform 0.22s ease; } .signin-overlay.signin-visible .signin-panel { transform: none; } .signin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .signin-eyebrow { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #888; margin-bottom: 6px; } .signin-title { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #fff; } .signin-close { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .signin-close:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.45); } /* ── Sign In | Custom Quote ── Two ways in, given equal footing: a first-time visitor with a weldment to price has no account to sign into, and the portal cannot quote that part on its own anyway. The left half is a label for the panel already showing; the right half is a link out to custom-quote.html, which needs no account. Injected by nav-menu.js. The underline marks which side you are on, so the link deliberately does not carry one until hover. */ .signin-switch { display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: #0d0d0d; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .signin-switch-on, .signin-switch-link { flex: 1; padding: 12px 10px; text-align: center; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s, background 0.2s; } .signin-switch-on { color: #fff; border-bottom-color: #1a4fff; } .signin-switch-link { color: #8b9099; text-decoration: none; } .signin-switch-link:hover { color: #fff; background: rgba(255, 255, 255, 0.05); border-bottom-color: rgba(255, 255, 255, 0.3); } .signin-switch-link:focus-visible { outline: 2px solid #3d69ff; outline-offset: -2px; } /* ── frame ── Geometry measured inside a 478px-wide frame: the form runs 144→488 (Login heading → "Or continue with Sign Up") and a "© Powered by oroox.com" bar sits at 554, the end of a ~570px layout. The widget's document never scrolls, it clips, and it only pushes that bar to the bottom edge once the frame is taller than 570. So the frame is 545 (form complete, bar already past the fold) and the box showing it is 505, which hides the last 40px outright — belt and braces, since a small future shift in the bar's position still lands in the trimmed strip. The two numbers move together: shrink the clip much further and the Sign Up row goes with the footer. The scroll lives on .signin-body (outside the clip) so a short viewport scrolls the whole 505px box into reach without ever scrolling the trimmed strip back into view. */ .signin-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; background: #fff; /* the portal widget is light-themed */ -webkit-overflow-scrolling: touch; } .signin-clip { position: relative; height: 505px; overflow: hidden; } .signin-frame { display: block; width: 100%; height: 545px; border: 0; opacity: 0; transition: opacity 0.25s ease; } .signin-overlay.signin-loaded .signin-frame { opacity: 1; } /* placeholder while the widget boots, and the hand-off message after a successful sign-in — the same slot, so it always covers the frame */ .signin-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; background: #fff; color: #666; font-family: 'Inter', sans-serif; font-size: 13px; letter-spacing: 0.02em; pointer-events: none; transition: opacity 0.25s ease; } .signin-overlay.signin-loaded .signin-status { opacity: 0; } .signin-overlay.signin-done .signin-status { opacity: 1; color: #111; font-weight: 600; line-height: 1.9; } /* only the popup-blocked fallback needs to be clickable */ .signin-overlay.signin-blocked .signin-status { pointer-events: auto; } .signin-go { display: inline-block; margin-top: 6px; padding: 10px 20px; background: #111; color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } .signin-go:hover { background: #333; } .signin-foot { padding: 13px 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-family: 'Inter', sans-serif; font-size: 11.5px; color: #888; text-align: center; } .signin-foot a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); } .signin-foot a:hover { border-bottom-color: #fff; } /* Short viewports (phones in landscape, small laptops): the frame keeps its measured height — shrinking it would clip the Login button, as the widget sizes itself to the frame and never scrolls — and .signin-body scrolls instead. */ @media (max-height: 700px) { .signin-overlay { padding: 10px; } } @media (max-width: 560px) { .signin-overlay { padding: 0; } .signin-panel { max-width: none; height: 100%; border: none; } } /* ───────────────────────────────────────────────────────────── MEDIA ROW — the YouTube / Instagram strip that nav-menu.js appends to the Resources panel, plus the embed modal a card opens. The row is a full-width flex line that wraps beneath the summary column and the link columns. ───────────────────────────────────────────────────────────── */ #main-nav .nav-dropdown.has-media-row { flex-wrap: wrap; } /* The media row can push its panel past a short viewport, so on desktop the panel scrolls internally. Only the panel carrying the row: the Materials and FAQ panels have side flyouts that an overflow context would clip. nav-menu.js sets the exact max-height from the live nav height. */ @media (min-width: 901px) { #main-nav .nav-dropdown.has-media-row { max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; } } #main-nav .dd-media-row { flex: 0 0 100%; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.1); background: #0d0d0d; padding: 16px 18px 18px; } #main-nav .dd-media-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; } #main-nav .dd-media-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #888; } #main-nav .dd-media-chan { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.62); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; text-decoration: none; opacity: 1; transition: color 0.15s; } #main-nav .dd-media-chan svg { width: 15px; height: 15px; flex-shrink: 0; } #main-nav .dd-media-chan.is-yt:hover { color: #ff3d3d; } #main-nav .dd-media-chan.is-ig:hover { color: #e1306c; } #main-nav .dd-media-hub { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; text-decoration: none; opacity: 1; transition: color 0.15s; } #main-nav .dd-media-hub:hover { color: #3b82f6; } #main-nav .dd-media-hub .dd-arrow { width: 18px; height: 18px; font-size: 10px; } #main-nav .dd-media-strip { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } #main-nav .dd-media-card { flex: 0 0 auto; width: 192px; display: block; text-align: left; padding: 0; margin: 0; border: 1px solid rgba(255, 255, 255, 0.1); background: #131313; color: inherit; font: inherit; text-decoration: none; cursor: pointer; transition: border-color 0.15s, transform 0.15s, background 0.15s; } #main-nav .dd-media-card.is-ig { width: 116px; } #main-nav .dd-media-card:hover { background: #171717; border-color: rgba(59, 130, 246, 0.55); transform: translateY(-2px); } #main-nav .dd-media-card:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; } #main-nav .dd-media-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0a0a0a; } #main-nav .dd-media-card.is-ig .dd-media-thumb { aspect-ratio: 1 / 1; } #main-nav .dd-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } #main-nav .dd-media-card:hover .dd-media-thumb img { transform: scale(1.05); } #main-nav .dd-media-kind { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; background: rgba(0, 0, 0, 0.72); color: #fff; line-height: 1; } #main-nav .dd-media-kind svg { width: 13px; height: 13px; } #main-nav .dd-media-card.is-yt .dd-media-kind svg { color: #ff3d3d; } #main-nav .dd-media-card.is-ig .dd-media-kind svg { color: #f77737; } #main-nav .dd-media-kind i { font-style: normal; font-family: 'Share Tech Mono', monospace; font-size: 10.5px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); } #main-nav .dd-media-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; transition: background 0.15s, border-color 0.15s; } #main-nav .dd-media-play svg { width: 16px; height: 16px; margin-left: 2px; } #main-nav .dd-media-card:hover .dd-media-play { background: #ff0033; border-color: #ff0033; } #main-nav .dd-media-cap { /* two lines, always — so every card in the strip is the same height */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2.7em + 16px); /* border-box: the padding above counts */ padding: 7px 8px 9px; font-size: 11.5px; line-height: 1.35; font-weight: 500; letter-spacing: 0.01em; text-transform: none; color: rgba(255, 255, 255, 0.62); transition: color 0.15s; } #main-nav .dd-media-card:hover .dd-media-cap { color: #fff; } /* ── mobile: the row lives inside the accordion ── */ @media (max-width: 900px) { #main-nav .dd-media-row { border-top: 1px solid rgba(255, 255, 255, 0.08); background: transparent; padding: 14px 24px 16px; } #main-nav .dd-media-head { flex-wrap: wrap; gap: 10px 14px; } #main-nav .dd-media-label { flex: 0 0 100%; } #main-nav .dd-media-hub { margin-left: 0; } #main-nav .dd-media-strip { margin: 0 -24px; padding: 0 24px 6px; -webkit-overflow-scrolling: touch; } #main-nav .dd-media-card { width: 168px; } #main-nav .dd-media-card.is-ig { width: 112px; } } /* ───────────────────────────────────────────────────────────── EMBED MODAL — a card opens the real YouTube / Instagram embed here rather than inside the panel, which closes on scroll and on mouse-out. Nothing is requested from either service until a card is clicked, and closing resets the frame to about:blank so playback actually stops. ───────────────────────────────────────────────────────────── */ .nav-media-modal { position: fixed; inset: 0; z-index: 100001; /* one above .signin-overlay */ display: flex; align-items: center; justify-content: center; padding: 24px; } .nav-media-modal[hidden] { display: none; } body.nav-media-open { overflow: hidden; } .nav-media-backdrop { position: absolute; inset: 0; background: rgba(6, 6, 6, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 0; cursor: pointer; } .nav-media-dialog { position: relative; width: 100%; max-width: 960px; max-height: 100%; display: flex; flex-direction: column; background: #111; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75); } .nav-media-modal.is-ig .nav-media-dialog { max-width: 480px; } .nav-media-close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #111; border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .nav-media-close:hover { background: #3b82f6; border-color: #3b82f6; } .nav-media-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; } .nav-media-modal.is-ig .nav-media-frame { aspect-ratio: auto; height: min(72vh, 720px); background: #fff; } .nav-media-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .nav-media-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .nav-media-title { font-size: 13px; font-weight: 600; color: #fff; } .nav-media-out { flex-shrink: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.15s; } .nav-media-out:hover { color: #3b82f6; } @media (max-width: 560px) { .nav-media-modal { padding: 14px; } .nav-media-close { top: -12px; right: -6px; } .nav-media-modal.is-ig .nav-media-frame { height: min(66vh, 620px); } .nav-media-foot { flex-direction: column; align-items: flex-start; gap: 8px; } }