/* ============================================ GLOBAL NAVBAR STYLES Use this file on all pages for consistent navbar ============================================ */ /* Load Inter (the font used by the ARAZAS deck's top nav) for the site-wide nav items. Imported here so every page that loads this stylesheet gets the font without editing each page's . */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* User Menu Styles */ .ms-user-menu { position: relative; display: flex; align-items: center; margin-left: 12px; } .ms-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #5568d3 100%); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; } .ms-user-avatar:hover { transform: scale(1.05); border-color: rgba(102, 126, 234, 0.3); box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); } .ms-user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: white; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); min-width: 220px; padding: 8px 0; display: none; z-index: 1001; } .ms-user-dropdown.show { display: block; } .ms-user-menu-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #1e293b; text-decoration: none; font-size: 14px; transition: background 0.2s; border: none; background: none; width: 100%; text-align: left; cursor: pointer; } .ms-user-menu-item:hover { background-color: #f8fafc; } .ms-user-menu-item i { width: 20px; color: #64748b; font-size: 14px; } .ms-user-menu-item.ms-user-menu-signout { color: #ef4444; border-top: 1px solid #e2e8f0; margin-top: 4px; } .ms-user-menu-item.ms-user-menu-signout:hover { background-color: #fef2f2; } .ms-user-menu-item.ms-user-menu-signout i { color: #ef4444; } .ms-navbar { width: 100%; background-color: transparent !important; background: transparent !important; border-bottom: none !important; border: none !important; position: relative; z-index: 1000; margin-bottom: 0; box-shadow: none !important; } /* Homepage: gradient bar (dark to transparent) with thin yellow line under */ body .ms-navbar { border-bottom: none !important; position: relative; background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.4) 60%, transparent 100%) !important; background-color: transparent !important; } body .ms-navbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.3in; height: 1px; background: #fbbf24; } /* Inner pages: dark gradient so nav tabs stand out */ .legacy-inner-nav .ms-navbar { background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e3a5f 100%) !important; background-color: #1e293b !important; border-bottom: 1px solid #334155; } .legacy-inner-nav .ms-navbar .ms-logo-img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) brightness(1.05); } .ms-navbar-container { max-width: 1400px; width: 100%; margin: 0 auto; padding: 0.1in clamp(12px, 2vw, 24px) 0 clamp(12px, 2vw, 24px); /* 0.1in top padding; fluid sides */ display: flex; align-items: center; justify-content: center; /* Center items */ height: 64px; flex-wrap: nowrap; box-sizing: border-box; gap: 0; overflow: hidden; /* Prevent container overflow */ position: relative; transform: translateY(-0.2in); /* Logo, nav items, and login moved up 0.2in */ } .ms-navbar-logo { display: flex; align-items: center; margin-right: auto; /* Push logo to left */ flex-shrink: 0; flex-basis: auto; position: absolute; left: clamp(12px, 2vw, 24px); transform: translateY(0.1in); } .ms-logo-img { height: 44px !important; /* 38px + 15% */ width: auto; max-width: 276px !important; /* 240px + 15% */ object-fit: contain; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.5)); } /* Nav items: move down 0.5in. Multiple strategies so one wins over other stylesheets. */ .ms-navbar-nav { flex: 0 0 auto; display: flex !important; align-items: center; justify-content: center; margin: 0 auto; margin-top: 0.2in !important; transform: translateX(calc(28.8px - 0.125in)) translateY(0) !important; /* was -0.05in; +0.05in down vs prior */ min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .ms-navbar-nav::-webkit-scrollbar { display: none; } .ms-navbar-menu { display: flex !important; visibility: visible !important; opacity: 1 !important; list-style: none; margin: 0; padding: 0; align-items: center; gap: 0 calc(20px + 0.15in); flex-wrap: nowrap; flex-shrink: 1; min-width: 0; width: 100%; } .ms-navbar-menu li { flex-shrink: 0; margin: 0; padding: 0; } .ms-navbar-menu li a { display: block; padding: 16px clamp(16px, 1.5vw, 28px); font-size: clamp(13px, 1.1vw, 15px) !important; font-weight: 400; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.02em; color: #ffffff !important; text-decoration: none; text-transform: uppercase; transition: color 0.167s ease-in-out; line-height: 1.4; white-space: nowrap; flex-shrink: 0; text-shadow: none; letter-spacing: 0.5px; } /* White navbar items on homepage – normal text (no uppercase), sharp system font */ body .ms-navbar-menu li a { color: #ffffff !important; text-transform: none !important; text-shadow: none !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important; font-weight: 400 !important; letter-spacing: 0.02em !important; } body .ms-navbar-menu li a:hover { color: rgba(255, 255, 255, 0.85) !important; text-shadow: none !important; } body .ms-nav-link, body .ms-login-btn { color: #ffffff !important; text-shadow: none !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important; font-weight: 400 !important; } body .ms-nav-link:hover, body .ms-login-btn:hover { color: rgba(255, 255, 255, 0.85) !important; text-shadow: none !important; } /* White navbar items on inner pages */ .legacy-inner-nav .ms-navbar-menu li a { color: #ffffff !important; text-shadow: none !important; font-weight: 400 !important; } .ms-navbar-menu li a:hover { color: rgba(255, 255, 255, 0.85) !important; text-shadow: none; } /* Hover color for navbar menu items on non-homepage pages */ .legacy-inner-nav .ms-navbar-menu li a:hover { color: rgba(255, 255, 255, 0.85) !important; text-shadow: none !important; } .ms-navbar-utils { display: flex !important; visibility: visible !important; opacity: 1 !important; align-items: center; gap: 0 12px; margin-left: auto; /* Push utils to right */ flex-shrink: 0; flex-wrap: nowrap; flex-basis: auto; min-width: fit-content; position: absolute; right: clamp(12px, 2vw, 24px); } .ms-nav-link, .ms-login-btn { white-space: nowrap; padding: 16px clamp(4px, 0.8vw, 10px); /* Reduced padding */ font-size: clamp(9px, 0.9vw, 11px); /* Smaller font */ font-weight: 400; color: #ffffff !important; text-decoration: none; transition: color 0.167s ease-in-out; display: inline-block; flex-shrink: 0; text-shadow: none; } /* White navbar links on all pages */ .legacy-inner-nav .ms-nav-link, .legacy-inner-nav .ms-login-btn { color: #ffffff !important; text-shadow: none !important; } /* Signup button excluded from shared styles - has its own circular design */ .ms-nav-link:hover, .ms-login-btn:hover { color: rgba(255, 255, 255, 0.85) !important; text-shadow: none; } /* Hover color for non-homepage pages */ .legacy-inner-nav .ms-nav-link:hover, .legacy-inner-nav .ms-login-btn:hover { color: rgba(255, 255, 255, 0.85) !important; text-shadow: none !important; } .ms-login-btn { color: #ffffff !important; } /* White login on all pages */ .legacy-inner-nav .ms-login-btn { color: #ffffff !important; } .ms-signup-btn { background-color: #22c55e !important; color: #ffffff !important; border-radius: 9999px !important; border: none !important; padding: 6px 12px !important; margin-left: clamp(4px, 0.8vw, 8px); font-size: clamp(10px, 0.9vw, 12px) !important; font-weight: 500 !important; display: inline-block !important; text-align: center !important; line-height: 1.5 !important; white-space: nowrap !important; text-decoration: none !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; cursor: pointer !important; box-sizing: border-box !important; } .ms-signup-btn:hover { background-color: #16a34a !important; color: #ffffff !important; box-shadow: 0 2px 4px rgba(34, 197, 94, 0.4) !important; transition: all 0.2s ease; } .ms-signup-btn:active { background-color: #15803d !important; transform: translateY(1px); } .ms-icon-link { padding: 16px clamp(8px, 1vw, 12px); font-size: clamp(12px, 1.2vw, 14px); flex-shrink: 0; } /* Dropdown Menu */ .ms-navbar-dropdown { position: relative; } .ms-dropdown-toggle { cursor: pointer; } .ms-dropdown-menu { display: none; position: absolute; top: 100%; right: 0; background: #ffffff; border: 1px solid #e1dfdd; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 1000; margin-top: 4px; } .ms-navbar-dropdown:hover .ms-dropdown-menu { display: block; } .ms-dropdown-item { display: block; padding: 12px 16px; color: #323130; text-decoration: none; font-size: 13px; transition: background-color 0.15s ease; } .ms-dropdown-item:hover { background-color: #f3f2f1; color: #0078d4; } .ms-dropdown-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .ms-dropdown-item:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .ms-chevron { font-size: 10px; margin-left: 4px; transition: transform 0.2s ease; } .ms-navbar-dropdown:hover .ms-chevron { transform: rotate(180deg); } /* Mobile Menu Toggle - Hide by default on desktop */ .ms-mobile-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px; margin-left: 12px; } .ms-mobile-toggle span { width: 20px; height: 2px; background-color: #323130; transition: all 0.3s ease; } /* Mobile toggle button color - white on homepage, black on other pages */ body .ms-mobile-toggle span { background-color: #ffffff; } .legacy-inner-nav .ms-mobile-toggle span { background-color: #323130; } /* Responsive Navbar */ /* Large desktops (1400px+) */ @media (min-width: 1400px) { .ms-navbar-container { max-width: 1400px; } } /* Medium desktops (1201px - 1399px) */ @media (max-width: 1399px) { .ms-navbar-menu li a { padding: 16px 14px; font-size: 13px !important; } .ms-nav-link, .ms-login-btn { padding: 16px 8px; font-size: 10px; } .ms-signup-btn { padding: 8px 14px !important; font-size: 10px !important; } } /* Large tablets and small desktops (1025px - 1200px) */ @media (max-width: 1200px) { .ms-navbar-menu li a { padding: 16px 10px; font-size: 12px !important; } .ms-nav-link, .ms-login-btn { padding: 16px 6px; font-size: 9px; } .ms-signup-btn { padding: 8px 12px !important; font-size: 9px !important; } .ms-icon-link { padding: 16px 8px; font-size: 10px; } } /* Tablets (769px - 1024px) */ @media (max-width: 1024px) { .ms-navbar-container { padding: 0 clamp(12px, 1.5vw, 20px); } .ms-navbar-menu li a { padding: 14px 8px; font-size: 11px !important; } .ms-nav-link, .ms-login-btn { padding: 16px 4px; font-size: 9px; } .ms-signup-btn { padding: 8px 12px !important; font-size: 9px !important; } .ms-icon-link { padding: 16px 6px; font-size: 9px; } } /* Small tablets and large phones (481px - 768px) */ @media (max-width: 768px) { .ms-navbar-container { padding: 0 12px; height: 50px; } .ms-navbar-logo { margin-right: auto; } .ms-logo-img { height: 39px !important; /* 34px + 15% */ } .ms-navbar-menu, .ms-navbar-utils { display: none !important; /* Hide main menu and utility links on mobile */ } .ms-mobile-toggle { display: flex !important; /* Show mobile toggle on mobile */ margin-left: auto; } } /* Small phones (up to 480px) */ @media (max-width: 480px) { .ms-navbar-container { padding: 0 8px; height: 48px; } .ms-logo-img { height: 37px !important; /* 32px + 15% */ max-width: 207px !important; /* 180px + 15% */ } } /* ============================================ NAV ITEMS DOWN 0.5in – high-specificity overrides (Wins over homepage-clean.css and other sheets) ============================================ */ /* Strategy 3: Container allows content to sit lower (no clipping); keep 0.2in up shift */ header.ms-navbar .ms-navbar-container, .ms-navbar .ms-navbar-container { min-height: calc(64px + 0.5in) !important; height: auto !important; overflow: visible !important; transform: translateY(-0.2in) !important; } /* Strategy 4: Nav block – 0.05in left */ header.ms-navbar .ms-navbar-container .ms-navbar-nav, .ms-navbar .ms-navbar-container .ms-navbar-nav { transform: translateX(calc(28.8px - 0.125in)) translateY(0) !important; /* was -0.05in; +0.05in down vs prior */ } /* Strategy 5: If transform is reset, margin-top */ header.ms-navbar .ms-navbar-container .ms-navbar-nav { margin-top: 0.2in !important; } /* Additional strategies to try if nav still doesn't move (uncomment one at a time): 6. .ms-navbar-menu { padding-top: 0.5in !important; } 7. .ms-navbar-menu li a { padding-top: calc(16px + 0.5in) !important; } 8. .ms-navbar-nav { position: relative !important; top: 0.5in !important; } 9. .ms-navbar-container { padding-top: 0.6in !important; } then .ms-navbar-logo, .ms-navbar-utils { top: 0.1in; } to re-align 10. .ms-navbar-container { display: grid; grid-template-rows: 0.5in 1fr; align-items: end; } then put nav in second row 11. .ms-navbar-nav::before { content: ''; display: block; height: 0.5in; } 12. .ms-navbar-nav { align-self: flex-end !important; } with container min-height increased 13. .ms-navbar-menu { margin-top: 0.5in !important; } 14. body .ms-navbar .ms-navbar-nav { margin-top: 0.75in !important; } (higher specificity) 15. Use JavaScript to set .ms-navbar-nav.style.marginTop = '0.75in'; */ /* ============================================ Inner pages (non-homepage) — navbar polish Resets Strategy 3–5 transforms, improves layout and legibility. Homepage uses body and is unchanged. ============================================ */ .legacy-inner-nav .ms-navbar { position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.35); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid rgba(251, 191, 36, 0.35) !important; } .legacy-inner-nav header.ms-navbar .ms-navbar-container, .legacy-inner-nav .ms-navbar .ms-navbar-container { transform: none !important; min-height: 64px !important; height: auto !important; padding: 10px clamp(16px, 2.5vw, 32px) 12px !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto !important; align-items: center !important; column-gap: clamp(8px, 1.5vw, 20px) !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; overflow: visible !important; } .legacy-inner-nav .ms-navbar-logo { position: relative !important; left: auto !important; transform: none !important; margin-right: 0 !important; } .legacy-inner-nav header.ms-navbar .ms-navbar-container .ms-navbar-nav, .legacy-inner-nav .ms-navbar .ms-navbar-container .ms-navbar-nav { transform: none !important; margin-top: 0.135in !important; /* nav sits slightly lower than logo */ margin-left: 0 !important; margin-right: 0 !important; justify-content: center !important; } .legacy-inner-nav .ms-navbar-utils { position: relative !important; right: auto !important; margin-left: 0 !important; } .legacy-inner-nav .ms-navbar-menu li a { text-transform: none !important; letter-spacing: 0.02em !important; padding: 10px clamp(10px, 1vw, 18px) !important; font-size: clamp(13px, 1.05vw, 15px) !important; font-weight: 500 !important; border-radius: 6px; } .legacy-inner-nav .ms-navbar-menu li a:hover { background: rgba(255, 255, 255, 0.08); color: #fde68a !important; } .legacy-inner-nav .ms-login-btn, .legacy-inner-nav .ms-nav-link { padding: 8px 14px !important; font-size: clamp(13px, 1.05vw, 15px) !important; font-weight: 500 !important; } .legacy-inner-nav .ms-signup-btn { padding: 8px 18px !important; font-size: clamp(13px, 1.05vw, 15px) !important; font-weight: 600 !important; } .legacy-inner-nav .ms-mobile-toggle span { background-color: #ffffff !important; } @media (max-width: 768px) { .legacy-inner-nav header.ms-navbar .ms-navbar-container, .legacy-inner-nav .ms-navbar .ms-navbar-container { display: flex !important; justify-content: space-between !important; align-items: center !important; column-gap: 12px !important; min-height: 52px !important; padding: 8px 12px !important; } } /* ============================================================ HOMEPAGE NAV — DECK-STYLE Mirrors projects.arazas.com/arazas/deck nav: - obsidian glass header with gold hairline - small Inter nav links, gold hover underline accent - mono uppercase gold pill CTAs (Sign Up + Login) - tiny gold "dot" brand mark in the lockup Scoped to body so inner pages are untouched. ============================================================ */ /* ARAZAS deck color tokens (homepage-local) */ body { --arz-gold:#ffb400; --arz-gold-bright:#ffc74d; --arz-gold-deep:#e68a00; --arz-ink:#ffffff; --arz-ink-dim:rgba(226,232,240,0.82); --arz-ink-mute:rgba(203,213,225,0.6); --arz-line:rgba(255,180,0,0.14); --arz-line-strong:rgba(255,180,0,0.34); --arz-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --arz-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif; } /* Glass header (replaces gradient + yellow line) */ body .ms-navbar { position: fixed !important; top: 0; left: 0; right: 0; z-index: 100; background: rgba(7, 11, 20, 0.68) !important; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(255, 180, 0, 0.65) !important; box-shadow: 0 1px 0 rgba(255, 180, 0, 0.18) !important; transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } body .ms-navbar.is-scrolled { background: rgba(7, 11, 20, 0.92) !important; border-bottom-color: var(--arz-gold) !important; box-shadow: 0 1px 0 rgba(255, 180, 0, 0.28) !important; } /* Kill the legacy yellow hairline; the border-bottom replaces it */ body .ms-navbar::after { content: none !important; background: transparent !important; height: 0 !important; } /* Container — 3-column grid keeps the logo flush-left, utils flush-right, and the nav block visually centered on the page. `auto` on the middle column lets it size to its content (so items render at full width with no clipping); the 1fr side columns absorb leftover space so the middle stays on the page's optical center when the logo and utils are roughly balanced. */ body header.ms-navbar .ms-navbar-container, body .ms-navbar .ms-navbar-container { min-height: 64px !important; height: 64px !important; padding: 0 clamp(16px, 2vw, 28px) !important; transform: none !important; overflow: visible !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; column-gap: clamp(0.5rem, 1.5vw, 1.25rem) !important; } /* Logo — keep the original ARAZAS wordmark image; pinned to the left grid cell */ body .ms-navbar-logo { position: relative !important; left: auto !important; transform: none !important; margin: 0 !important; justify-self: start; } body .ms-navbar-logo .ms-logo-link { display: inline-flex; align-items: center; } body .ms-logo-img { height: 36px !important; max-width: 220px !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); } /* Nav block — sits in the middle grid cell so it's visually centered. Items render at their natural width; the 0.02in nudge keeps the labels that hair below the geometric center of the header bar. */ body header.ms-navbar .ms-navbar-container .ms-navbar-nav, body .ms-navbar .ms-navbar-container .ms-navbar-nav { position: static !important; transform: translateY(0.105in) !important; /* nav sits slightly lower than logo */ margin: 0 !important; justify-self: center; justify-content: center !important; overflow: visible !important; display: flex !important; align-items: center; flex-shrink: 0; } /* Menu items — deck look (small Inter, sentence case, dim white, gold underline accent). Spacing: deck baseline + ~0.1in extra so items breathe, but the clamp keeps the minimum tight enough that all 7 Dream* items fit between the logo and the Sign Up pill at common desktop widths. `display: flex` here beats the `display: none` in mobile-optimization.css at <=768px (that sheet loads after this one) because of the body selector. */ body .ms-navbar-menu { display: flex !important; visibility: visible !important; opacity: 1 !important; gap: clamp(calc(0.85rem + 0.1in), calc(1.6vw + 0.1in), calc(1.5rem + 0.1in)) !important; flex-wrap: nowrap !important; } body .ms-navbar-menu li a { padding: 0.45rem 0 !important; font-family: var(--arz-sans) !important; font-size: clamp(13px, 0.92vw, 14.5px) !important; font-weight: 400 !important; letter-spacing: 0.02em !important; text-transform: none !important; color: var(--arz-ink-dim) !important; text-shadow: none !important; position: relative; transition: color 160ms ease; } body .ms-navbar-menu li a:hover { color: var(--arz-ink) !important; } body .ms-navbar-menu li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--arz-gold); transform: scaleX(0); transform-origin: center; transition: transform 180ms ease; } body .ms-navbar-menu li a:hover::after, body .ms-navbar-menu li a.is-active::after { transform: scaleX(1); } body .ms-navbar-menu li a.is-active { color: var(--arz-gold) !important; } /* Utility cluster — pinned to the right grid cell. `display: flex` here beats the `display: none` in mobile-optimization.css at <=768px. */ body .ms-navbar-utils { display: flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; right: auto !important; margin: 0 !important; gap: 0.6rem !important; justify-self: end; align-items: center; } /* Login — subtle mono uppercase text link */ body .ms-login-btn { padding: 0.5rem 0.75rem !important; font-family: var(--arz-mono) !important; font-size: 0.72rem !important; font-weight: 500 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--arz-ink-dim) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; text-shadow: none !important; transition: color 160ms ease; } body .ms-login-btn:hover { color: var(--arz-ink) !important; } /* Sign Up — the deck's mono uppercase gold pill (Connect CTA look) */ body .ms-signup-btn { display: inline-flex !important; align-items: center; gap: 0.4rem; padding: 0.55rem 1.1rem !important; border: 1px solid var(--arz-line-strong) !important; border-radius: 999px !important; background: transparent !important; background-color: transparent !important; font-family: var(--arz-mono) !important; font-size: 0.72rem !important; font-weight: 500 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--arz-gold) !important; margin-left: 0 !important; line-height: 1 !important; box-shadow: none !important; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } body .ms-signup-btn:hover { background: rgba(255, 180, 0, 0.08) !important; border-color: var(--arz-gold) !important; color: var(--arz-gold-bright) !important; box-shadow: none !important; transform: none !important; } /* Reserve space below the now-fixed header so the banner doesn't slip under it. The homepage banner already uses a large negative top margin / planetary backdrop and doesn't need this; all other pages get a 64px (56px mobile) offset to clear the fixed nav. */ body#home-version-1 #main_content { padding-top: 0; } body:not(#home-version-1) #main_content, body:not(#home-version-1) > main:first-of-type { padding-top: 64px; } @media (max-width: 768px) { body:not(#home-version-1) #main_content, body:not(#home-version-1) > main:first-of-type { padding-top: 56px; } } /* Homepage mobile navigation behavior: switch to hamburger + overlay menu on touch widths instead of squeezing the full desktop product rail into one line. */ @media (max-width: 768px) { body header.ms-navbar .ms-navbar-container, body .ms-navbar .ms-navbar-container { min-height: 56px !important; height: 56px !important; padding: 0 12px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; column-gap: 0 !important; } body .ms-navbar-logo { position: relative !important; left: auto !important; transform: none !important; margin: 0 !important; } body .ms-logo-img { height: 32px !important; max-width: 155px !important; } /* Hide desktop rails on mobile; overlay is provided by mobile-menu.js */ body .ms-navbar-nav, body .ms-navbar-utils { display: none !important; } /* Show hamburger on homepage mobile */ body .ms-mobile-toggle { display: inline-flex !important; width: 44px !important; height: 44px !important; align-items: center; justify-content: center; padding: 10px !important; margin-left: 0 !important; } body .ms-mobile-toggle span { background-color: #ffffff !important; width: 22px !important; height: 2px !important; } } @media (max-width: 420px) { body .ms-logo-img { height: 29px !important; max-width: 136px !important; } }