/* Shared navigation. Source HTML is generated by _sync-nav.cjs. */
#main-nav.nav-v3 {
--nav-bottom: 96px;
display: flex; align-items: center; justify-content: space-between;
gap: 28px; padding: 12px clamp(20px, 3vw, 48px); min-height: 80px;
background: #090a0b !important; color: #f5f5f5 !important;
border-bottom: 1px solid #282a2d; z-index: 1100;
/* Keep the mobile drawer fixed to the viewport. */
backdrop-filter: none; -webkit-backdrop-filter: none; transform: none;
font-family: 'Inter', Arial, sans-serif;
}
#main-nav.nav-v3 *, #main-nav.nav-v3 *::before, #main-nav.nav-v3 *::after { box-sizing: border-box; }
#main-nav.nav-v3 .nav-logo { flex-shrink: 0; color: #fff; }
#main-nav.nav-v3 .nav-logo img { width: auto !important; height: 48px !important; max-width: 200px; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); }
#main-nav.nav-v3 .nav-drawer { display: contents; }
#main-nav.nav-v3 .nav-links {
display: flex !important; position: static; align-items: center; flex-direction: row;
gap: clamp(18px, 2.2vw, 34px); margin: 0; padding: 0; list-style: none;
width: auto; height: auto; transform: none; overflow: visible; background: none; border: 0;
}
#main-nav.nav-v3 .nav-links > li { position: static; margin: 0; padding: 0; border: 0; }
#main-nav.nav-v3 summary, #main-nav.nav-v3 .nav-top-link {
display: flex; align-items: center; gap: 9px; padding: 16px 0;
color: #c8cbd0; font-size: 14px; font-weight: 500; line-height: 1.3;
letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
list-style: none; cursor: pointer; opacity: 1;
}
#main-nav.nav-v3 summary::-webkit-details-marker { display: none; }
#main-nav.nav-v3 summary:hover, #main-nav.nav-v3 .nav-top-link:hover,
#main-nav.nav-v3 details[open] > summary { color: #fff; }
#main-nav.nav-v3 details[open] > summary { box-shadow: inset 0 -2px #5c95ff; }
#main-nav.nav-v3 .nav-current-group > summary { color: #a8c9ff; }
#main-nav.nav-v3 .nav-chevron { width: 6px; height: 6px; border: solid currentColor; border-width: 0 1px 1px 0; transform: translateY(-2px) rotate(45deg); }
#main-nav.nav-v3 details[open] .nav-chevron { transform: translateY(1px) rotate(225deg); }
#main-nav.nav-v3 a:focus-visible, #main-nav.nav-v3 summary:focus-visible, #main-nav.nav-v3 button:focus-visible { outline: 2px solid #73a8ff; outline-offset: 4px; }
#main-nav.nav-v3 details:not([open]) > .nav-panel { display: none; }
#main-nav.nav-v3 .nav-panel {
position: absolute; top: 100%; left: 0; right: 0;
display: grid; grid-template-columns: minmax(220px, .9fr) minmax(0, 3fr);
padding: 32px max(32px, calc((100vw - 1320px) / 2)); gap: 42px;
max-height: calc(100dvh - var(--nav-bottom) - 12px); overflow: auto;
overscroll-behavior: contain; background: #101113; border-bottom: 1px solid #34373c;
box-shadow: 0 24px 40px #0006; z-index: 20; text-align: left;
}
#main-nav.nav-v3 .nav-panel p { margin: 0; }
#main-nav.nav-v3 .nav-panel-intro { padding: 2px 28px 4px 0; border-right: 1px solid #2b2d31; }
#main-nav.nav-v3 .nav-kicker { color: #8da2bd; text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; margin-bottom: 14px; }
#main-nav.nav-v3 .nav-panel-title { color: #f4f5f7; font-size: 23px; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; margin: 12px 0; }
#main-nav.nav-v3 .nav-panel-intro > p:not(.nav-panel-title) { color: #a5aab2; font-size: 13px; line-height: 1.7; }
#main-nav.nav-v3 a.nav-view-all { display: inline-flex; gap: 18px; margin-top: 24px; padding: 0; color: #a8c9ff; font-size: 13px; font-weight: 600; opacity: 1; text-transform: none; letter-spacing: 0; text-decoration: none; }
#main-nav.nav-v3 .nav-panel-columns { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
#main-nav.nav-v3 .nav-panel-column { min-width: 0; }
#main-nav.nav-v3 .nav-panel-column > .nav-kicker { padding: 2px 0 12px; border-bottom: 1px solid #292c31; }
#main-nav.nav-v3 .nav-panel ul { display: block; list-style: none; margin: 0; padding: 0; }
#main-nav.nav-v3 .nav-panel li { margin: 0; padding: 0; }
#main-nav.nav-v3 .nav-panel-column a { display: block; padding: 10px 0; color: #d0d4da; font-size: 14px; line-height: 1.4; font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: none; opacity: 1; }
#main-nav.nav-v3 .nav-panel a:hover, #main-nav.nav-v3 .nav-panel a[aria-current] { color: #a8c9ff; }
#main-nav.nav-v3 .nav-cta { display: flex !important; flex-direction: row; align-items: center; gap: 24px; padding: 0; width: auto; flex-shrink: 0; }
#main-nav.nav-v3 a.nav-signin { color: #d0d4da; padding: 12px 0; font-size: 13px; font-weight: 500; text-decoration: none; letter-spacing: 0; text-transform: none; opacity: 1; white-space: nowrap; }
#main-nav.nav-v3 .nav-signin-on { color: #9dddb7; }
#main-nav.nav-v3 .nav-quote { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; padding: 12px 18px; background: #fff; border: 1px solid #fff; color: #101113; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: none; text-decoration: none; white-space: nowrap; opacity: 1; }
#main-nav.nav-v3 .nav-quote:hover { background: #bed6ff; border-color: #bed6ff; }
#main-nav.nav-v3 #mobile-nav-toggle, #main-nav.nav-v3 .nav-drawer-footer, #main-nav.nav-v3 .nav-hamburger { display: none; }
@media (max-width: 1100px) {
#main-nav.nav-v3 { gap: 12px; padding: 10px 20px !important; min-height: 72px; }
#main-nav.nav-v3 .nav-logo img { height: 38px !important; max-width: 160px; }
#main-nav.nav-v3 .nav-cta { margin-left: auto; gap: 0; }
#main-nav.nav-v3 .nav-cta .nav-signin { display: none; }
#main-nav.nav-v3 .nav-quote { min-height: 42px; padding: 10px 14px; font-size: 12px; gap: 10px; }
#main-nav.nav-v3.nav-enhanced #mobile-nav-toggle { display: block; flex: 0 0 44px; position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
#main-nav.nav-v3 #mobile-nav-toggle span { position: absolute; left: 10px; width: 24px; height: 2px; background: #fff; transition: transform .15s; }
#main-nav.nav-v3 #mobile-nav-toggle span:nth-child(1) { top: 15px; }
#main-nav.nav-v3 #mobile-nav-toggle span:nth-child(2) { top: 21px; }
#main-nav.nav-v3 #mobile-nav-toggle span:nth-child(3) { top: 27px; }
#main-nav.nav-v3.menu-open #mobile-nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
#main-nav.nav-v3.menu-open #mobile-nav-toggle span:nth-child(2) { opacity: 0; }
#main-nav.nav-v3.menu-open #mobile-nav-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
#main-nav.nav-v3 .nav-drawer { display: block; background: #0c0d0f; }
#main-nav.nav-v3.nav-enhanced .nav-drawer { position: fixed; top: var(--nav-bottom); bottom: 0; right: 0; left: 0; width: 100%; padding: 12px 24px 32px; padding-bottom: max(32px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; pointer-events: none; }
#main-nav.nav-v3.menu-open .nav-drawer { visibility: visible; opacity: 1; pointer-events: auto; }
#main-nav.nav-v3 .nav-links { display: flex !important; flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
#main-nav.nav-v3 .nav-links > li { border-bottom: 1px solid #292c31; }
#main-nav.nav-v3 summary, #main-nav.nav-v3 .nav-top-link { justify-content: space-between; width: 100%; padding: 19px 0; font-size: 17px; min-height: 60px; }
#main-nav.nav-v3 details[open] > summary { color: #a8c9ff; box-shadow: none; }
#main-nav.nav-v3 .nav-panel { position: static; display: flex; flex-direction: column; padding: 0 0 20px; gap: 16px; max-height: none; overflow: visible; background: none; box-shadow: none; border: 0; }
#main-nav.nav-v3 .nav-panel-intro { padding: 0; border: 0; order: 2; }
#main-nav.nav-v3 .nav-panel-intro > .nav-kicker, #main-nav.nav-v3 .nav-panel-intro > p { display: none; }
#main-nav.nav-v3 a.nav-view-all { margin-top: 0; padding: 12px 0; }
#main-nav.nav-v3 .nav-panel-columns { display: flex; flex-direction: column; gap: 18px; }
#main-nav.nav-v3 .nav-panel-column > .nav-kicker { margin-bottom: 4px; padding: 4px 0; border: 0; }
#main-nav.nav-v3 .nav-panel-column a { padding: 12px 0; font-size: 14px; min-height: 44px; }
#main-nav.nav-v3 .nav-drawer-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-top: 24px; }
#main-nav.nav-v3 .nav-drawer-footer > a { color: #c9ced6; font-size: 14px; padding: 12px 0; text-decoration: none; }
#main-nav.nav-v3 .nav-cutoff-note { width: 100%; border-top: 1px solid #292c31; padding-top: 20px; margin: 4px 0 0; color: #929ba8; font-size: 12px; line-height: 1.8; }
#main-nav.nav-v3 .nav-cutoff-note strong { color: #c9ddff; padding-left: 8px; }
#main-nav.nav-v3 .nav-cutoff-note span { display: block; color: #929ba8; font-size: 11px; }
body.nav-open { overflow: hidden; }
body.nav-open::after { display: none; }
/* Keep navigation available when JavaScript is disabled. */
#main-nav.nav-v3:not(.nav-enhanced) { position: relative; top: 0 !important; flex-wrap: wrap; }
#main-nav.nav-v3:not(.nav-enhanced) .nav-drawer { order: 3; flex-basis: 100%; }
}
@media (max-width: 400px) {
#main-nav.nav-v3 { padding: 10px 12px !important; gap: 8px; }
#main-nav.nav-v3 .nav-logo img { max-width: 122px; height: 32px !important; }
#main-nav.nav-v3 .nav-quote { padding: 10px 12px; font-size: 11px; }
#main-nav.nav-v3 .nav-quote > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
#main-nav.nav-v3, #main-nav.nav-v3 * { scroll-behavior: auto; transition: none !important; }
}
/* Existing customer sign-in dialog. */
/* ── 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; }
}