:root { --orange: #ff5722; --orange-dark: #e04a1a; --orange-pale: #fff5f2; --ink: #1a1a1a; --ink-mid: #555; --ink-muted: #999; --border: #e0e0e0; --bg: #f5f5f5; --white: #ffffff; --f-serif: 'DM Serif Display', serif; --f-sans: 'Inter', sans-serif; } /* ============================================================ OrangeWit — nav.css Single source of truth for all navigation styles. Linked in of every page. ============================================================ */ /* ── BASE NAV ── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.5rem, 4vw, 4rem); background: rgba(245,245,245,.96); border-bottom: 1px solid var(--border); box-shadow: 0 1px 20px rgba(0,0,0,.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Transparent variant — used on pages with dark hero images */ .nav.nav-transparent { background: transparent; border-bottom: 1px solid transparent; box-shadow: none; } .nav.nav-transparent::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 140px; background: linear-gradient(to bottom, rgba(0,0,0,.50) 0%, transparent 100%); z-index: -1; pointer-events: none; } .nav.nav-transparent.scrolled, .nav.nav-transparent.scrolled::before { background: rgba(245,245,245,.96); border-bottom: 1px solid var(--border); box-shadow: 0 1px 20px rgba(0,0,0,.06); } .nav.nav-transparent.scrolled::before { display: none; } /* ── LOGO ── */ .nav-logo { font-family: var(--f-serif); font-size: 1.25rem; color: var(--ink); text-decoration: none; flex-shrink: 0; position: relative; z-index: 1; } .nav.nav-transparent .nav-logo { color: #fff; } .nav.nav-transparent.scrolled .nav-logo { color: var(--ink); } .nav-logo span { color: var(--orange); } /* ── NAV LINKS LIST ── */ .nav-links { display: flex; list-style: none; align-items: center; gap: 1.5rem; margin: 0; padding: 0; line-height: 1; } .nav-links li { list-style: none; } /* Plain anchor links */ .nav-links a { font-family: var(--f-sans); font-size: .8rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; transition: color .2s; line-height: 1; display: inline-block; } .nav-links a:hover, .nav-links a.active { color: var(--ink); } .nav-links a.active { color: var(--orange); } /* Transparent nav — links white */ .nav.nav-transparent .nav-links a { color: rgba(255,255,255,.88); } .nav.nav-transparent .nav-links a:hover { color: #fff; } .nav.nav-transparent.scrolled .nav-links a { color: var(--ink-muted); } .nav.nav-transparent.scrolled .nav-links a:hover { color: var(--ink); } .nav.nav-transparent.scrolled .nav-links a.active { color: var(--orange); } /* ── CTA BUTTON ── */ .nav-cta { font-family: var(--f-sans); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--orange); padding: .55rem 1.4rem; border-radius: 100px; text-decoration: none; transition: background .2s; white-space: nowrap; flex-shrink: 0; } .nav-cta:hover { background: var(--orange-dark); } /* ── PRODUCTS DROPDOWN ── */ .nav-has-drop { position: relative; } .nav-drop-btn { font-family: var(--f-sans); font-size: .8rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 0; padding-block: 0; padding-inline: 0; line-height: 1; vertical-align: middle; transition: color .2s; } .nav-drop-btn:hover { color: var(--ink); } /* Transparent nav — button white */ .nav.nav-transparent .nav-drop-btn { color: rgba(255,255,255,.88); } .nav.nav-transparent .nav-drop-btn:hover { color: #fff; } .nav.nav-transparent.scrolled .nav-drop-btn { color: var(--ink-muted); } .nav.nav-transparent.scrolled .nav-drop-btn:hover { color: var(--ink); } .nav-drop-btn svg { transition: transform .25s; stroke: currentColor; fill: none; flex-shrink: 0; } .nav-drop-btn.open svg { transform: rotate(180deg); } /* Dropdown panel */ .nav-drop { position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 248px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.12); padding: 6px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 600; } .nav-drop.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* Dropdown items */ .nav-drop-item:hover { background: var(--bg); } .nav-drop-name { font-family: var(--f-sans); font-size: .82rem; font-weight: 500; color: var(--ink); line-height: 1.2; } .nav-drop-sub { font-family: var(--f-sans); font-size: .68rem; font-weight: 300; color: var(--ink-muted); margin-top: 2px; } /* ── HAMBURGER ── */ .nav-mob-btn { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 38px; height: 38px; background: rgba(0,0,0,.08); border: 1px solid rgba(26,26,26,.15); border-radius: 9px; cursor: pointer; padding: 0; transition: background .3s, border-color .3s; position: relative; z-index: 600; flex-shrink: 0; } .nav-mob-btn span { display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 2px; transition: all .28s ease; pointer-events: none; } /* Transparent nav — hamburger dark pill */ .nav.nav-transparent .nav-mob-btn { background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.3); } .nav.nav-transparent .nav-mob-btn span { background: #fff; } .nav.nav-transparent.scrolled .nav-mob-btn { background: rgba(0,0,0,.08); border-color: rgba(26,26,26,.15); } .nav.nav-transparent.scrolled .nav-mob-btn span { background: var(--ink); } /* Open state */ .nav-mob-btn.open { background: var(--orange) !important; border-color: var(--orange) !important; } .nav-mob-btn.open span { background: #fff !important; } .nav-mob-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-mob-btn.open span:nth-child(2) { opacity: 0; } .nav-mob-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── MOBILE MENU ── */ .nav-mob-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: #fff; z-index: 590; overflow-y: auto; padding: 12px 24px 48px; } .nav-mob-menu.open { display: block; } .nmm-label { font-family: var(--f-sans); font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); padding: 18px 0 6px; border-top: 1px solid var(--border); margin-top: 6px; } .nmm-label:first-child { border-top: none; margin-top: 0; padding-top: 12px; } .nmm-link { display: block; padding: 13px 0; font-family: var(--f-sans); font-size: .88rem; font-weight: 400; color: var(--ink-mid); text-decoration: none; border-bottom: 1px solid var(--border); transition: color .2s; } .nmm-link:hover { color: var(--ink); } .nmm-link:last-of-type { border-bottom: none; } .nmm-cta { display: block; text-align: center; margin-top: 20px; padding: .85rem; border-radius: 100px; background: var(--orange); color: #fff; font-family: var(--f-sans); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background .2s; } .nmm-cta:hover { background: var(--orange-dark); } /* ── RESPONSIVE ── */ @media (max-width: 860px) { .nav-links { display: none; } .nav-cta { display: none; } .nav-mob-btn { display: flex; } .nav { padding: 0 1rem; } } @media (max-width: 380px) { .nav { padding: 0 .75rem; } } /* Force button reset */ .nav-links button { padding: 0 !important; margin: 0 !important; border: none !important; background: none !important; } .nav-links li { display: flex; align-items: center; } .nav-drop-item{display:flex;flex-direction:row;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:8px;text-decoration:none;transition:background .15s;} .nav-drop-item:hover{background:var(--bg);} .nav-drop-icon{width:32px;height:32px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--orange-pale);border:1px solid rgba(255,87,34,.12);margin-top:2px;} .nav-drop-icon svg{stroke:var(--orange);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;} .nav-drop-text{display:flex;flex-direction:column;gap:2px;} .nav-drop-name{font-family:var(--f-sans);font-size:.82rem;font-weight:500;color:var(--ink);line-height:1.2;} .nav-drop-sub{font-family:var(--f-sans);font-size:.67rem;font-weight:300;color:var(--ink-muted);line-height:1.4;} /* Dropdown item layout fix */ .nav-drop-item{display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:12px!important;padding:10px 12px!important;border-radius:8px!important;text-decoration:none!important;transition:background .15s!important;} .nav-drop-item:hover{background:var(--bg)!important;} .nav-drop-icon{width:32px!important;height:32px!important;border-radius:8px!important;flex-shrink:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:var(--orange-pale)!important;border:1px solid rgba(255,87,34,.12)!important;margin-top:2px!important;} .nav-drop-icon svg{stroke:var(--orange)!important;fill:none!important;stroke-width:1.5!important;} .nav-drop-text{display:flex!important;flex-direction:column!important;gap:2px!important;} .nav-drop-name{font-family:var(--f-sans)!important;font-size:.82rem!important;font-weight:500!important;color:var(--ink)!important;line-height:1.2!important;} .nav-drop-sub{font-family:var(--f-sans)!important;font-size:.67rem!important;font-weight:300!important;color:var(--ink-muted)!important;line-height:1.4!important;} /* Dark logo icon container */ .nav-drop-icon-dark { background: #1a1a1a !important; border-color: #333 !important; width: 48px !important; height: 36px !important; border-radius: 6px !important; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 4px; } /* Override dark container with light */ .nav-drop-icon-dark { background: #f5f5f5 !important; border: 1px solid #e0e0e0 !important; width: 56px !important; height: 36px !important; border-radius: 6px !important; overflow: hidden; padding: 4px 6px !important; } .nav-drop-icon-dark img { width: 100% !important; height: 100% !important; object-fit: contain !important; } /* Logo image */ .nav-logo-img{display:flex;align-items:center;text-decoration:none;flex-shrink:0;} .nav-logo-pic{height:28px;width:auto;object-fit:contain;display:block;transition:opacity .2s;} .nav-logo-pic:hover{opacity:.8;} /* On transparent nav — invert to white */ .nav.nav-transparent .nav-logo-pic{filter:brightness(0) invert(1);} .nav.nav-transparent.scrolled .nav-logo-pic{filter:none;} /* Light background icon container for logos with light backgrounds */ .nav-drop-icon-light { background: #f5f5f5 !important; border: 1px solid #e0e0e0 !important; width: 56px !important; height: 36px !important; border-radius: 6px !important; overflow: hidden; padding: 4px 6px !important; } .nav-drop-icon-light img { width: 100% !important; height: 100% !important; object-fit: contain !important; }