/** * Scroll header: #mainNav fixed over all page content; #navContainer gets glass on .scrolled. */ #landingHeaderMount, #toolSharedHeaderMount { position: relative; z-index: var(--z-scroll-header, 9000); pointer-events: none; } #landingHeaderMount { min-height: calc(4.25rem + max(1rem, env(safe-area-inset-top, 0px))); } #toolSharedHeaderMount { min-height: calc(7.75rem + max(1rem, env(safe-area-inset-top, 0px))); } #mainNav.navorina-scroll-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-scroll-header, 9000); display: flex; justify-content: center; margin: 0; padding-left: 1rem; padding-right: 1rem; padding-top: max(1rem, env(safe-area-inset-top, 0px)); box-sizing: border-box; pointer-events: none; isolation: isolate; } #mainNav.navorina-scroll-header > #navContainer { pointer-events: auto; position: relative; z-index: 1; } /* Home landing: Cash App-inspired split chrome, expressed with Navorina tokens. */ #mainNav.navorina-scroll-header--home > #navContainer.landing-home-nav { max-width: none; min-height: var(--control-height-mobile, 42px); padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } #mainNav.navorina-scroll-header--home > #navContainer.landing-home-nav.scrolled, html.dark #mainNav.navorina-scroll-header--home > #navContainer.landing-home-nav.scrolled, html.dark-theme #mainNav.navorina-scroll-header--home > #navContainer.landing-home-nav.scrolled, body.dark-theme #mainNav.navorina-scroll-header--home > #navContainer.landing-home-nav.scrolled { background: transparent !important; border-color: transparent !important; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } #mainNav.navorina-scroll-header--home .landing-home-nav__brand, #mainNav.navorina-scroll-header--home .landing-home-nav__menu { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--control-height-mobile, 42px); border: 1px solid var(--color-border-secondary); color: var(--color-text-primary); background: color-mix(in srgb, var(--color-bg-canvas) 78%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text-primary) 7%, transparent); transition: background var(--transition-fast, 150ms) ease, border-color var(--transition-fast, 150ms) ease, color var(--transition-fast, 150ms) ease, transform var(--transition-fast, 150ms) ease, box-shadow var(--transition-fast, 150ms) ease; } #mainNav.navorina-scroll-header--home .landing-home-nav__brand { min-inline-size: clamp(6.75rem, 10vw, 8.25rem); padding-inline: var(--spacing-lg, 1rem); border-radius: var(--radius-md, 0.75rem); text-decoration: none; } #mainNav.navorina-scroll-header--home .landing-home-nav__brand .navorina-logo { padding-inline: 0; } #mainNav.navorina-scroll-header--home .landing-home-nav__actions { display: flex; align-items: center; gap: var(--spacing-sm, 0.5rem); } #mainNav.navorina-scroll-header--home #waitlistButton.landing-home-nav__cta { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--control-height-mobile, 42px); padding-inline: var(--spacing-xl, 1.25rem); border-radius: var(--radius-full, 9999px); font-family: var(--font-primary, system-ui, sans-serif); font-size: var(--font-size-md, 0.875rem); font-weight: var(--font-weight-semibold, 600); line-height: 1; text-decoration: none; border-color: var(--color-button-primary); background: var(--color-button-primary); color: var(--color-button-primary-text); } #mainNav.navorina-scroll-header--home #waitlistButton.landing-home-nav__cta:hover { border-color: var(--color-button-primary-hover); background: var(--color-button-primary-hover); color: var(--color-button-primary-text); transform: translateY(-1px); } #mainNav.navorina-scroll-header--home .landing-home-nav__menu { inline-size: var(--control-height-mobile, 42px); padding: 0; border: 0; border-radius: var(--radius-circle, 50%); background: color-mix(in srgb, var(--color-text-primary) 6%, transparent); box-shadow: none; cursor: pointer; } #mainNav.navorina-scroll-header--home :where(.landing-home-nav__brand, .landing-home-nav__menu):hover { border-color: var(--color-border-primary); background: color-mix(in srgb, var(--color-bg-secondary) 92%, transparent); transform: translateY(-1px); } #mainNav.navorina-scroll-header--home .landing-home-nav__menu:hover { border: 0; background: color-mix(in srgb, var(--color-text-primary) 10%, transparent); box-shadow: none; } #mainNav.navorina-scroll-header--home :where(.landing-home-nav__brand, .landing-home-nav__menu):focus-visible { outline: 2px solid var(--color-button-primary-focus); outline-offset: 3px; } #mainNav.navorina-scroll-header--home .landing-home-nav__menu:focus:not(:focus-visible) { outline: none; } #mainNav.navorina-scroll-header--home .landing-home-nav__menu:focus-visible { outline: none; background: color-mix(in srgb, var(--color-text-primary) 10%, transparent); box-shadow: none; } #mainNav.navorina-scroll-header--home.is-scrolled :where(.landing-home-nav__brand, .landing-home-nav__menu) { background: color-mix(in srgb, var(--color-bg-canvas) 90%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text-primary) 8%, transparent), 0 10px 28px color-mix(in srgb, var(--color-bg-canvas) 42%, transparent); } #mainNav.navorina-scroll-header--home.is-scrolled .landing-home-nav__menu { border: 0; background: color-mix(in srgb, var(--color-text-primary) 6%, transparent); box-shadow: none; } #mainNav.navorina-scroll-header--home .landing-home-nav__brand, #mainNav.navorina-scroll-header--home .landing-home-nav__brand:hover, #mainNav.navorina-scroll-header--home.is-scrolled .landing-home-nav__brand { border: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transform: none; } @media (max-width: 30rem) { #mainNav.navorina-scroll-header--home .landing-home-nav__brand { min-inline-size: auto; padding-inline: var(--spacing-md, 0.75rem); } #mainNav.navorina-scroll-header--home #waitlistButton.landing-home-nav__cta { padding-inline: var(--spacing-lg, 1rem); } } @media (prefers-reduced-motion: reduce) { #mainNav.navorina-scroll-header--home :where(.landing-home-nav__brand, .landing-home-nav__menu), #mainNav.navorina-scroll-header--home #waitlistButton.landing-home-nav__cta { transition-duration: 0.01ms; } } @media (forced-colors: active) { #mainNav.navorina-scroll-header--home .landing-home-nav__brand, #mainNav.navorina-scroll-header--home .landing-home-nav__menu, #mainNav.navorina-scroll-header--home #waitlistButton.landing-home-nav__cta { border: 1px solid ButtonText; } } #navContainer .navorina-logo { padding-left: 24px; } #navContainer { transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, -webkit-backdrop-filter 0.3s ease-in-out; background: transparent !important; border: 1px solid transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } #navContainer.scrolled, html.dark #navContainer.scrolled, html.dark-theme #navContainer.scrolled, body.dark-theme #navContainer.scrolled { background: color-mix(in srgb, #020203 82%, transparent) !important; border-color: rgba(238, 238, 238, 0.12) !important; -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05); box-shadow: inset 0 1px 0 rgba(238, 238, 238, 0.07), 0 12px 38px rgba(0, 0, 0, 0.3); } #mainNav #waitlistButton.landing-header-waitlist-cta { border: 1px solid var(--color-border-secondary); background: var(--color-button-secondary); color: var(--color-text-primary); box-shadow: none; transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease; } #mainNav #waitlistButton.landing-header-waitlist-cta:hover, #mainNav #waitlistButton.landing-header-waitlist-cta:focus-visible { border-color: var(--color-button-primary); background: var(--color-button-primary); color: var(--color-button-primary-text); transform: translateY(-1px); } #mainNav #waitlistButton.landing-header-waitlist-cta:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-button-primary) 52%, transparent); outline-offset: 2px; } /* Tool pages: light glass even before scroll */ body.tool-main-has-video #mainNav #navContainer:not(.scrolled) { background: color-mix(in srgb, #020203 76%, transparent) !important; border: 1px solid rgba(238, 238, 238, 0.1); box-shadow: inset 0 1px 0 rgba(238, 238, 238, 0.06), 0 10px 32px rgba(0, 0, 0, 0.26); -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05); } #mainNav #appsMenuPanel { isolation: isolate; overflow: hidden; z-index: 1300; background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-canvas) 100%) !important; border-color: var(--color-border-secondary) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Calculators: inline nav without mount — padding for fixed header */ body.calculator-page .tool-page-breadcrumb-bar { padding-top: calc(4.25rem + max(1rem, env(safe-area-inset-top, 0px)) + 0.35rem); } body.calculator-page #toolSharedHeaderMount + main .tool-page-breadcrumb-bar { padding-top: 0.75rem; } /* Static pages (contact, docs, legal) without mount wrapper */ #mainNav.navorina-scroll-header ~ main { padding-top: calc(4.25rem + max(1rem, env(safe-area-inset-top, 0px)) + 1.25rem); } /* Legal / tool shells: breadcrumbs directly under header mount */ body.legal-page #toolSharedHeaderMount ~ .tool-page-breadcrumb-bar { padding-top: 0.75rem; } body[data-landing-skip-hero] main.landing-main { padding-top: 0; }