/* =========================================================================== EverOn — Navigation bar --------------------------------------------------------------------------- The nav is a "liquid glass" effect built from FOUR stacked fixed layers, all the same size and border-radius. From back to front: #b-nav the shell: background tint, rim light, hover glow #nav-refract four progressively-blurred bands that bend the content scrolling underneath (the .lv0-.lv3 / .tn0-.tn3 layers) #nav-edge a thin colour-burn hairline along the top and bottom #nav-content the actual logo, links and CTA button State classes, all applied by assets/js/site.js: .is-stuck the page has scrolled past the top; the glass turns on .is-hidden the user is scrolling up; the bar retracts .is-light the content underneath is light, so flip to dark-on-light .is-warm an orange hero slide is underneath, so tint the glass warm The --mx / --my / --glow custom properties are written by the mousemove handler and drive the pointer-following highlight in the ::after rim. HEADS UP: these rules are heavily interdependent. If you only want to change a colour, do it in tokens.css. Only edit here for real layout work. =========================================================================== */ #b-nav{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border:1px solid transparent; box-shadow:none; border-radius:999px; margin:14px 34px; height:92px; transform-origin:top center; clip-path:inset(0 0 0 0 round 999px); transition:background 0.5s cubic-bezier(.85,0,.15,1), backdrop-filter 0.5s cubic-bezier(.85,0,.15,1), border-color 0.5s cubic-bezier(.85,0,.15,1), box-shadow 0.5s cubic-bezier(.85,0,.15,1), opacity 0.5s cubic-bezier(.85,0,.15,1), clip-path 0.5s cubic-bezier(.85,0,.15,1), transform 0.5s cubic-bezier(.85,0,.15,1) !important; } #b-nav.is-stuck{ backdrop-filter:blur(14px) saturate(2.6) contrast(1.05); -webkit-backdrop-filter:blur(14px) saturate(2.6) contrast(1.05); background: linear-gradient(90deg, rgba(0,60,249,0.44) 0%, rgba(0,60,249,0.36) 8%, rgba(0,60,249,0.30) 15%, rgba(0,60,249,0.15) 21%, rgba(0,60,249,0.06) 26%, rgba(0,60,249,0) 31%), linear-gradient(103deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 26%, rgba(255,255,255,0) 46%, rgba(255,255,255,0.05) 72%, rgba(255,255,255,0.13) 100%), radial-gradient(140% 300% at 50% 50%, rgba(255,255,255,0) 46%, rgba(255,255,255,0.14) 100%); border-color:transparent; box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.85), inset 0 3px 3px -2px rgba(255,255,255,0.5), inset 0 7px 14px -7px rgba(255,255,255,0.55), inset 0 -1.5px 0 rgba(255,255,255,0.35), inset 0 -3px 3px -2px rgba(255,255,255,0.16), inset 0 -7px 14px -7px rgba(255,255,255,0.55), 0 6px 18px -6px rgba(255,255,255,0.22), 0 14px 40px rgba(0,6,40,0.20), 0 2px 6px rgba(0,6,40,0.12); } #b-nav.is-stuck::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; backdrop-filter:blur(2px) saturate(2.4) brightness(1.12); -webkit-backdrop-filter:blur(2px) saturate(2.4) brightness(1.12); -webkit-mask:linear-gradient(180deg, #000 0px, #000 7px, rgba(0,0,0,0.55) 10px, rgba(0,0,0,0) 14px); mask:linear-gradient(180deg, #000 0px, #000 7px, rgba(0,0,0,0.55) 10px, rgba(0,0,0,0) 14px); } #b-nav.is-warm.is-stuck{ background: linear-gradient(90deg, rgba(255,90,0,0.5) 0%, rgba(255,90,0,0.4) 8%, rgba(255,90,0,0.32) 15%, rgba(255,90,0,0.16) 21%, rgba(255,90,0,0.06) 26%, rgba(255,90,0,0) 31%), linear-gradient(103deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 26%, rgba(255,255,255,0) 46%, rgba(255,255,255,0.05) 72%, rgba(255,255,255,0.13) 100%), radial-gradient(140% 300% at 50% 50%, rgba(255,255,255,0) 46%, rgba(255,255,255,0.14) 100%); } #b-nav.is-light.is-stuck{ background: linear-gradient(90deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.51) 8%, rgba(255,255,255,0.34) 15%, rgba(255,255,255,0.17) 21%, rgba(255,255,255,0.06) 26%, rgba(255,255,255,0) 31%), linear-gradient(103deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.12) 26%, rgba(255,255,255,0.04) 46%, rgba(255,255,255,0.14) 72%, rgba(255,255,255,0.34) 100%), radial-gradient(140% 300% at 50% 50%, rgba(255,255,255,0) 46%, rgba(255,255,255,0.3) 100%) !important; border-color:transparent; } .nav-rim{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity 0.5s cubic-bezier(.85,0,.15,1); } #b-nav.is-stuck .nav-rim{ opacity:1; backdrop-filter:saturate(2.2); -webkit-backdrop-filter:saturate(2.2); } #b-nav.is-stuck::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; padding:1px; background: radial-gradient(240px 240px at var(--mx,30%) var(--my,50%), rgba(255,255,255,calc(0.5 * var(--glow,0))) 0%, rgba(255,226,196,calc(0.3 * var(--glow,0))) 24%, rgba(245,102,4,calc(0.16 * var(--glow,0))) 46%, rgba(245,102,4,0) 74%), rgba(255,255,255,0.05); mix-blend-mode:overlay; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } #b-nav.is-light.is-stuck::after{ background: radial-gradient(240px 240px at var(--mx,30%) var(--my,50%), rgba(255,255,255,calc(0.7 * var(--glow,0))) 0%, rgba(255,216,178,calc(0.42 * var(--glow,0))) 24%, rgba(245,102,4,calc(0.2 * var(--glow,0))) 46%, rgba(245,102,4,0) 74%), rgba(0,6,40,0.05); mix-blend-mode:soft-light; } #nav-refract{ position:fixed; top:14px; left:34px; right:34px; height:92px; border-radius:999px; overflow:hidden; pointer-events:none; z-index:101; opacity:0; transition:opacity .5s cubic-bezier(.85,0,.15,1), transform .5s cubic-bezier(.85,0,.15,1); } #nav-refract.on{ opacity:1; } #nav-refract.off{ opacity:0; transform:translateY(-10px); } #nav-refract .lyr{ position:absolute; inset:0; pointer-events:none; opacity:0.55; } #nav-refract .lv0{ backdrop-filter:blur(42px); -webkit-backdrop-filter:blur(42px); -webkit-mask:linear-gradient(180deg, #000 0px, #000 14px, rgba(0,0,0,0.94) 15.7px, rgba(0,0,0,0.8) 17.4px, rgba(0,0,0,0.61) 19.1px, rgba(0,0,0,0.39) 20.9px, rgba(0,0,0,0.2) 22.6px, rgba(0,0,0,0.06) 24.3px, rgba(0,0,0,0) 26px, rgba(0,0,0,0) calc(100% - 26px), rgba(0,0,0,0.06) calc(100% - 24.3px), rgba(0,0,0,0.2) calc(100% - 22.6px), rgba(0,0,0,0.39) calc(100% - 20.9px), rgba(0,0,0,0.61) calc(100% - 19.1px), rgba(0,0,0,0.8) calc(100% - 17.4px), rgba(0,0,0,0.94) calc(100% - 15.7px), #000 calc(100% - 14px), #000 calc(100% - 0px)), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); mask:linear-gradient(180deg, #000 0px, #000 14px, rgba(0,0,0,0.94) 15.7px, rgba(0,0,0,0.8) 17.4px, rgba(0,0,0,0.61) 19.1px, rgba(0,0,0,0.39) 20.9px, rgba(0,0,0,0.2) 22.6px, rgba(0,0,0,0.06) 24.3px, rgba(0,0,0,0) 26px, rgba(0,0,0,0) calc(100% - 26px), rgba(0,0,0,0.06) calc(100% - 24.3px), rgba(0,0,0,0.2) calc(100% - 22.6px), rgba(0,0,0,0.39) calc(100% - 20.9px), rgba(0,0,0,0.61) calc(100% - 19.1px), rgba(0,0,0,0.8) calc(100% - 17.4px), rgba(0,0,0,0.94) calc(100% - 15.7px), #000 calc(100% - 14px), #000 calc(100% - 0px)), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } #nav-refract .lv1{ backdrop-filter:blur(19px); -webkit-backdrop-filter:blur(19px); -webkit-mask:linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.06) 3.7px, rgba(0,0,0,0.2) 5.4px, rgba(0,0,0,0.39) 7.1px, rgba(0,0,0,0.61) 8.9px, rgba(0,0,0,0.8) 10.6px, rgba(0,0,0,0.94) 12.3px, #000 14px, #000 27px, rgba(0,0,0,0.94) 28.7px, rgba(0,0,0,0.8) 30.4px, rgba(0,0,0,0.61) 32.1px, rgba(0,0,0,0.39) 33.9px, rgba(0,0,0,0.2) 35.6px, rgba(0,0,0,0.06) 37.3px, rgba(0,0,0,0) 39px, rgba(0,0,0,0) calc(100% - 39px), rgba(0,0,0,0.06) calc(100% - 37.3px), rgba(0,0,0,0.2) calc(100% - 35.6px), rgba(0,0,0,0.39) calc(100% - 33.9px), rgba(0,0,0,0.61) calc(100% - 32.1px), rgba(0,0,0,0.8) calc(100% - 30.4px), rgba(0,0,0,0.94) calc(100% - 28.7px), #000 calc(100% - 27px), #000 calc(100% - 14px), rgba(0,0,0,0.94) calc(100% - 12.3px), rgba(0,0,0,0.8) calc(100% - 10.6px), rgba(0,0,0,0.61) calc(100% - 8.9px), rgba(0,0,0,0.39) calc(100% - 7.1px), rgba(0,0,0,0.2) calc(100% - 5.4px), rgba(0,0,0,0.06) calc(100% - 3.7px), rgba(0,0,0,0) calc(100% - 2px), rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); mask:linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.06) 3.7px, rgba(0,0,0,0.2) 5.4px, rgba(0,0,0,0.39) 7.1px, rgba(0,0,0,0.61) 8.9px, rgba(0,0,0,0.8) 10.6px, rgba(0,0,0,0.94) 12.3px, #000 14px, #000 27px, rgba(0,0,0,0.94) 28.7px, rgba(0,0,0,0.8) 30.4px, rgba(0,0,0,0.61) 32.1px, rgba(0,0,0,0.39) 33.9px, rgba(0,0,0,0.2) 35.6px, rgba(0,0,0,0.06) 37.3px, rgba(0,0,0,0) 39px, rgba(0,0,0,0) calc(100% - 39px), rgba(0,0,0,0.06) calc(100% - 37.3px), rgba(0,0,0,0.2) calc(100% - 35.6px), rgba(0,0,0,0.39) calc(100% - 33.9px), rgba(0,0,0,0.61) calc(100% - 32.1px), rgba(0,0,0,0.8) calc(100% - 30.4px), rgba(0,0,0,0.94) calc(100% - 28.7px), #000 calc(100% - 27px), #000 calc(100% - 14px), rgba(0,0,0,0.94) calc(100% - 12.3px), rgba(0,0,0,0.8) calc(100% - 10.6px), rgba(0,0,0,0.61) calc(100% - 8.9px), rgba(0,0,0,0.39) calc(100% - 7.1px), rgba(0,0,0,0.2) calc(100% - 5.4px), rgba(0,0,0,0.06) calc(100% - 3.7px), rgba(0,0,0,0) calc(100% - 2px), rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } #nav-refract .lv2{ backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); -webkit-mask:linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 16px, rgba(0,0,0,0.06) 17.6px, rgba(0,0,0,0.2) 19.1px, rgba(0,0,0,0.39) 20.7px, rgba(0,0,0,0.61) 22.3px, rgba(0,0,0,0.8) 23.9px, rgba(0,0,0,0.94) 25.4px, #000 27px, #000 38px, rgba(0,0,0,0.94) 39.6px, rgba(0,0,0,0.8) 41.1px, rgba(0,0,0,0.61) 42.7px, rgba(0,0,0,0.39) 44.3px, rgba(0,0,0,0.2) 45.9px, rgba(0,0,0,0.06) 47.4px, rgba(0,0,0,0) 49px, rgba(0,0,0,0) calc(100% - 49px), rgba(0,0,0,0.06) calc(100% - 47.4px), rgba(0,0,0,0.2) calc(100% - 45.9px), rgba(0,0,0,0.39) calc(100% - 44.3px), rgba(0,0,0,0.61) calc(100% - 42.7px), rgba(0,0,0,0.8) calc(100% - 41.1px), rgba(0,0,0,0.94) calc(100% - 39.6px), #000 calc(100% - 38px), #000 calc(100% - 27px), rgba(0,0,0,0.94) calc(100% - 25.4px), rgba(0,0,0,0.8) calc(100% - 23.9px), rgba(0,0,0,0.61) calc(100% - 22.3px), rgba(0,0,0,0.39) calc(100% - 20.7px), rgba(0,0,0,0.2) calc(100% - 19.1px), rgba(0,0,0,0.06) calc(100% - 17.6px), rgba(0,0,0,0) calc(100% - 16px), rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); mask:linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 16px, rgba(0,0,0,0.06) 17.6px, rgba(0,0,0,0.2) 19.1px, rgba(0,0,0,0.39) 20.7px, rgba(0,0,0,0.61) 22.3px, rgba(0,0,0,0.8) 23.9px, rgba(0,0,0,0.94) 25.4px, #000 27px, #000 38px, rgba(0,0,0,0.94) 39.6px, rgba(0,0,0,0.8) 41.1px, rgba(0,0,0,0.61) 42.7px, rgba(0,0,0,0.39) 44.3px, rgba(0,0,0,0.2) 45.9px, rgba(0,0,0,0.06) 47.4px, rgba(0,0,0,0) 49px, rgba(0,0,0,0) calc(100% - 49px), rgba(0,0,0,0.06) calc(100% - 47.4px), rgba(0,0,0,0.2) calc(100% - 45.9px), rgba(0,0,0,0.39) calc(100% - 44.3px), rgba(0,0,0,0.61) calc(100% - 42.7px), rgba(0,0,0,0.8) calc(100% - 41.1px), rgba(0,0,0,0.94) calc(100% - 39.6px), #000 calc(100% - 38px), #000 calc(100% - 27px), rgba(0,0,0,0.94) calc(100% - 25.4px), rgba(0,0,0,0.8) calc(100% - 23.9px), rgba(0,0,0,0.61) calc(100% - 22.3px), rgba(0,0,0,0.39) calc(100% - 20.7px), rgba(0,0,0,0.2) calc(100% - 19.1px), rgba(0,0,0,0.06) calc(100% - 17.6px), rgba(0,0,0,0) calc(100% - 16px), rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } #nav-refract .lv3{ backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); -webkit-mask:linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 29px, rgba(0,0,0,0.06) 30.3px, rgba(0,0,0,0.2) 31.6px, rgba(0,0,0,0.39) 32.9px, rgba(0,0,0,0.61) 34.1px, rgba(0,0,0,0.8) 35.4px, rgba(0,0,0,0.94) 36.7px, #000 38px, #000 46px, rgba(0,0,0,0.94) 47.3px, rgba(0,0,0,0.8) 48.6px, rgba(0,0,0,0.61) 49.9px, rgba(0,0,0,0.39) 51.1px, rgba(0,0,0,0.2) 52.4px, rgba(0,0,0,0.06) 53.7px, rgba(0,0,0,0) 55px, rgba(0,0,0,0) calc(100% - 55px), rgba(0,0,0,0.06) calc(100% - 53.7px), rgba(0,0,0,0.2) calc(100% - 52.4px), rgba(0,0,0,0.39) calc(100% - 51.1px), rgba(0,0,0,0.61) calc(100% - 49.9px), rgba(0,0,0,0.8) calc(100% - 48.6px), rgba(0,0,0,0.94) calc(100% - 47.3px), #000 calc(100% - 46px), #000 calc(100% - 38px), rgba(0,0,0,0.94) calc(100% - 36.7px), rgba(0,0,0,0.8) calc(100% - 35.4px), rgba(0,0,0,0.61) calc(100% - 34.1px), rgba(0,0,0,0.39) calc(100% - 32.9px), rgba(0,0,0,0.2) calc(100% - 31.6px), rgba(0,0,0,0.06) calc(100% - 30.3px), rgba(0,0,0,0) calc(100% - 29px), rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); mask:linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 29px, rgba(0,0,0,0.06) 30.3px, rgba(0,0,0,0.2) 31.6px, rgba(0,0,0,0.39) 32.9px, rgba(0,0,0,0.61) 34.1px, rgba(0,0,0,0.8) 35.4px, rgba(0,0,0,0.94) 36.7px, #000 38px, #000 46px, rgba(0,0,0,0.94) 47.3px, rgba(0,0,0,0.8) 48.6px, rgba(0,0,0,0.61) 49.9px, rgba(0,0,0,0.39) 51.1px, rgba(0,0,0,0.2) 52.4px, rgba(0,0,0,0.06) 53.7px, rgba(0,0,0,0) 55px, rgba(0,0,0,0) calc(100% - 55px), rgba(0,0,0,0.06) calc(100% - 53.7px), rgba(0,0,0,0.2) calc(100% - 52.4px), rgba(0,0,0,0.39) calc(100% - 51.1px), rgba(0,0,0,0.61) calc(100% - 49.9px), rgba(0,0,0,0.8) calc(100% - 48.6px), rgba(0,0,0,0.94) calc(100% - 47.3px), #000 calc(100% - 46px), #000 calc(100% - 38px), rgba(0,0,0,0.94) calc(100% - 36.7px), rgba(0,0,0,0.8) calc(100% - 35.4px), rgba(0,0,0,0.61) calc(100% - 34.1px), rgba(0,0,0,0.39) calc(100% - 32.9px), rgba(0,0,0,0.2) calc(100% - 31.6px), rgba(0,0,0,0.06) calc(100% - 30.3px), rgba(0,0,0,0) calc(100% - 29px), rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } #nav-refract .tn0{ opacity:0.2; background:rgba(0,60,249,0.14); backdrop-filter:blur(42px) brightness(0.82) saturate(1.6) hue-rotate(-12deg); -webkit-backdrop-filter:blur(42px) brightness(0.82) saturate(1.6) hue-rotate(-12deg); -webkit-mask:linear-gradient(180deg, #000 0px, #000 5px, rgba(0,0,0,0.94) 5.6px, rgba(0,0,0,0.8) 6.1px, rgba(0,0,0,0.61) 6.7px, rgba(0,0,0,0.39) 7.3px, rgba(0,0,0,0.2) 7.9px, rgba(0,0,0,0.06) 8.4px, rgba(0,0,0,0) 9px, rgba(0,0,0,0) calc(100% - 9px), rgba(0,0,0,0.06) calc(100% - 8.4px), rgba(0,0,0,0.2) calc(100% - 7.9px), rgba(0,0,0,0.39) calc(100% - 7.3px), rgba(0,0,0,0.61) calc(100% - 6.7px), rgba(0,0,0,0.8) calc(100% - 6.1px), rgba(0,0,0,0.94) calc(100% - 5.6px), #000 calc(100% - 5px), #000 calc(100% - 0px)), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); mask:linear-gradient(180deg, #000 0px, #000 5px, rgba(0,0,0,0.94) 5.6px, rgba(0,0,0,0.8) 6.1px, rgba(0,0,0,0.61) 6.7px, rgba(0,0,0,0.39) 7.3px, rgba(0,0,0,0.2) 7.9px, rgba(0,0,0,0.06) 8.4px, rgba(0,0,0,0) 9px, rgba(0,0,0,0) calc(100% - 9px), rgba(0,0,0,0.06) calc(100% - 8.4px), rgba(0,0,0,0.2) calc(100% - 7.9px), rgba(0,0,0,0.39) calc(100% - 7.3px), rgba(0,0,0,0.61) calc(100% - 6.7px), rgba(0,0,0,0.8) calc(100% - 6.1px), rgba(0,0,0,0.94) calc(100% - 5.6px), #000 calc(100% - 5px), #000 calc(100% - 0px)), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } #nav-refract .tn1{ opacity:0.2; background:rgba(0,60,249,0.14); backdrop-filter:blur(19px) brightness(0.82) saturate(1.6) hue-rotate(-12deg); -webkit-backdrop-filter:blur(19px) brightness(0.82) saturate(1.6) hue-rotate(-12deg); -webkit-mask:linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, rgba(0,0,0,0.06) 1.6px, rgba(0,0,0,0.2) 2.1px, rgba(0,0,0,0.39) 2.7px, rgba(0,0,0,0.61) 3.3px, rgba(0,0,0,0.8) 3.9px, rgba(0,0,0,0.94) 4.4px, #000 5px, #000 10px, rgba(0,0,0,0.94) 10.6px, rgba(0,0,0,0.8) 11.1px, rgba(0,0,0,0.61) 11.7px, rgba(0,0,0,0.39) 12.3px, rgba(0,0,0,0.2) 12.9px, rgba(0,0,0,0.06) 13.4px, rgba(0,0,0,0) 14px, rgba(0,0,0,0) calc(100% - 14px), rgba(0,0,0,0.06) calc(100% - 13.4px), rgba(0,0,0,0.2) calc(100% - 12.9px), rgba(0,0,0,0.39) calc(100% - 12.3px), rgba(0,0,0,0.61) calc(100% - 11.7px), rgba(0,0,0,0.8) calc(100% - 11.1px), rgba(0,0,0,0.94) calc(100% - 10.6px), #000 calc(100% - 10px), #000 calc(100% - 5px), rgba(0,0,0,0.94) calc(100% - 4.4px), rgba(0,0,0,0.8) calc(100% - 3.9px), rgba(0,0,0,0.61) calc(100% - 3.3px), rgba(0,0,0,0.39) calc(100% - 2.7px), rgba(0,0,0,0.2) calc(100% - 2.1px), rgba(0,0,0,0.06) calc(100% - 1.6px), rgba(0,0,0,0) calc(100% - 1px), rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); mask:linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, rgba(0,0,0,0.06) 1.6px, rgba(0,0,0,0.2) 2.1px, rgba(0,0,0,0.39) 2.7px, rgba(0,0,0,0.61) 3.3px, rgba(0,0,0,0.8) 3.9px, rgba(0,0,0,0.94) 4.4px, #000 5px, #000 10px, rgba(0,0,0,0.94) 10.6px, rgba(0,0,0,0.8) 11.1px, rgba(0,0,0,0.61) 11.7px, rgba(0,0,0,0.39) 12.3px, rgba(0,0,0,0.2) 12.9px, rgba(0,0,0,0.06) 13.4px, rgba(0,0,0,0) 14px, rgba(0,0,0,0) calc(100% - 14px), rgba(0,0,0,0.06) calc(100% - 13.4px), rgba(0,0,0,0.2) calc(100% - 12.9px), rgba(0,0,0,0.39) calc(100% - 12.3px), rgba(0,0,0,0.61) calc(100% - 11.7px), rgba(0,0,0,0.8) calc(100% - 11.1px), rgba(0,0,0,0.94) calc(100% - 10.6px), #000 calc(100% - 10px), #000 calc(100% - 5px), rgba(0,0,0,0.94) calc(100% - 4.4px), rgba(0,0,0,0.8) calc(100% - 3.9px), rgba(0,0,0,0.61) calc(100% - 3.3px), rgba(0,0,0,0.39) calc(100% - 2.7px), rgba(0,0,0,0.2) calc(100% - 2.1px), rgba(0,0,0,0.06) calc(100% - 1.6px), rgba(0,0,0,0) calc(100% - 1px), rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } #nav-refract .tn2{ opacity:0.2; background:rgba(0,60,249,0.14); backdrop-filter:blur(8px) brightness(0.82) saturate(1.6) hue-rotate(-12deg); -webkit-backdrop-filter:blur(8px) brightness(0.82) saturate(1.6) hue-rotate(-12deg); -webkit-mask:linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 6px, rgba(0,0,0,0.06) 6.6px, rgba(0,0,0,0.2) 7.1px, rgba(0,0,0,0.39) 7.7px, rgba(0,0,0,0.61) 8.3px, rgba(0,0,0,0.8) 8.9px, rgba(0,0,0,0.94) 9.4px, #000 10px, #000 15px, rgba(0,0,0,0.94) 15.6px, rgba(0,0,0,0.8) 16.1px, rgba(0,0,0,0.61) 16.7px, rgba(0,0,0,0.39) 17.3px, rgba(0,0,0,0.2) 17.9px, rgba(0,0,0,0.06) 18.4px, rgba(0,0,0,0) 19px, rgba(0,0,0,0) calc(100% - 19px), rgba(0,0,0,0.06) calc(100% - 18.4px), rgba(0,0,0,0.2) calc(100% - 17.9px), rgba(0,0,0,0.39) calc(100% - 17.3px), rgba(0,0,0,0.61) calc(100% - 16.7px), rgba(0,0,0,0.8) calc(100% - 16.1px), rgba(0,0,0,0.94) calc(100% - 15.6px), #000 calc(100% - 15px), #000 calc(100% - 10px), rgba(0,0,0,0.94) calc(100% - 9.4px), rgba(0,0,0,0.8) calc(100% - 8.9px), rgba(0,0,0,0.61) calc(100% - 8.3px), rgba(0,0,0,0.39) calc(100% - 7.7px), rgba(0,0,0,0.2) calc(100% - 7.1px), rgba(0,0,0,0.06) calc(100% - 6.6px), rgba(0,0,0,0) calc(100% - 6px), rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); mask:linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 6px, rgba(0,0,0,0.06) 6.6px, rgba(0,0,0,0.2) 7.1px, rgba(0,0,0,0.39) 7.7px, rgba(0,0,0,0.61) 8.3px, rgba(0,0,0,0.8) 8.9px, rgba(0,0,0,0.94) 9.4px, #000 10px, #000 15px, rgba(0,0,0,0.94) 15.6px, rgba(0,0,0,0.8) 16.1px, rgba(0,0,0,0.61) 16.7px, rgba(0,0,0,0.39) 17.3px, rgba(0,0,0,0.2) 17.9px, rgba(0,0,0,0.06) 18.4px, rgba(0,0,0,0) 19px, rgba(0,0,0,0) calc(100% - 19px), rgba(0,0,0,0.06) calc(100% - 18.4px), rgba(0,0,0,0.2) calc(100% - 17.9px), rgba(0,0,0,0.39) calc(100% - 17.3px), rgba(0,0,0,0.61) calc(100% - 16.7px), rgba(0,0,0,0.8) calc(100% - 16.1px), rgba(0,0,0,0.94) calc(100% - 15.6px), #000 calc(100% - 15px), #000 calc(100% - 10px), rgba(0,0,0,0.94) calc(100% - 9.4px), rgba(0,0,0,0.8) calc(100% - 8.9px), rgba(0,0,0,0.61) calc(100% - 8.3px), rgba(0,0,0,0.39) calc(100% - 7.7px), rgba(0,0,0,0.2) calc(100% - 7.1px), rgba(0,0,0,0.06) calc(100% - 6.6px), rgba(0,0,0,0) calc(100% - 6px), rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } #nav-refract .tn3{ opacity:0.2; background:rgba(0,60,249,0.14); backdrop-filter:blur(2px) brightness(0.82) saturate(1.6) hue-rotate(-12deg); -webkit-backdrop-filter:blur(2px) brightness(0.82) saturate(1.6) hue-rotate(-12deg); -webkit-mask:linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 11px, rgba(0,0,0,0.06) 11.6px, rgba(0,0,0,0.2) 12.1px, rgba(0,0,0,0.39) 12.7px, rgba(0,0,0,0.61) 13.3px, rgba(0,0,0,0.8) 13.9px, rgba(0,0,0,0.94) 14.4px, #000 15px, #000 20px, rgba(0,0,0,0.94) 20.6px, rgba(0,0,0,0.8) 21.1px, rgba(0,0,0,0.61) 21.7px, rgba(0,0,0,0.39) 22.3px, rgba(0,0,0,0.2) 22.9px, rgba(0,0,0,0.06) 23.4px, rgba(0,0,0,0) 24px, rgba(0,0,0,0) calc(100% - 24px), rgba(0,0,0,0.06) calc(100% - 23.4px), rgba(0,0,0,0.2) calc(100% - 22.9px), rgba(0,0,0,0.39) calc(100% - 22.3px), rgba(0,0,0,0.61) calc(100% - 21.7px), rgba(0,0,0,0.8) calc(100% - 21.1px), rgba(0,0,0,0.94) calc(100% - 20.6px), #000 calc(100% - 20px), #000 calc(100% - 15px), rgba(0,0,0,0.94) calc(100% - 14.4px), rgba(0,0,0,0.8) calc(100% - 13.9px), rgba(0,0,0,0.61) calc(100% - 13.3px), rgba(0,0,0,0.39) calc(100% - 12.7px), rgba(0,0,0,0.2) calc(100% - 12.1px), rgba(0,0,0,0.06) calc(100% - 11.6px), rgba(0,0,0,0) calc(100% - 11px), rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); mask:linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 11px, rgba(0,0,0,0.06) 11.6px, rgba(0,0,0,0.2) 12.1px, rgba(0,0,0,0.39) 12.7px, rgba(0,0,0,0.61) 13.3px, rgba(0,0,0,0.8) 13.9px, rgba(0,0,0,0.94) 14.4px, #000 15px, #000 20px, rgba(0,0,0,0.94) 20.6px, rgba(0,0,0,0.8) 21.1px, rgba(0,0,0,0.61) 21.7px, rgba(0,0,0,0.39) 22.3px, rgba(0,0,0,0.2) 22.9px, rgba(0,0,0,0.06) 23.4px, rgba(0,0,0,0) 24px, rgba(0,0,0,0) calc(100% - 24px), rgba(0,0,0,0.06) calc(100% - 23.4px), rgba(0,0,0,0.2) calc(100% - 22.9px), rgba(0,0,0,0.39) calc(100% - 22.3px), rgba(0,0,0,0.61) calc(100% - 21.7px), rgba(0,0,0,0.8) calc(100% - 21.1px), rgba(0,0,0,0.94) calc(100% - 20.6px), #000 calc(100% - 20px), #000 calc(100% - 15px), rgba(0,0,0,0.94) calc(100% - 14.4px), rgba(0,0,0,0.8) calc(100% - 13.9px), rgba(0,0,0,0.61) calc(100% - 13.3px), rgba(0,0,0,0.39) calc(100% - 12.7px), rgba(0,0,0,0.2) calc(100% - 12.1px), rgba(0,0,0,0.06) calc(100% - 11.6px), rgba(0,0,0,0) calc(100% - 11px), rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } #nav-refract.is-light .tn0, #nav-refract.is-light .tn1, #nav-refract.is-light .tn2, #nav-refract.is-light .tn3{ opacity:0.07 !important; background:rgba(0,60,249,0.06) !important; } #nav-edge{ position:fixed; top:14px; left:34px; right:34px; height:92px; border-radius:999px; z-index:101; pointer-events:none; opacity:0; mix-blend-mode:color-burn; background:#003cf9; -webkit-mask:linear-gradient(180deg, #000 0px, #000 1.5px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) calc(100% - 3px), #000 calc(100% - 1.5px), #000 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); mask:linear-gradient(180deg, #000 0px, #000 1.5px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) calc(100% - 3px), #000 calc(100% - 1.5px), #000 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 3%, rgba(0,0,0,0.8) 7%, #000 12%, #000 88%, rgba(0,0,0,0.8) 93%, rgba(0,0,0,0.35) 97%, rgba(0,0,0,0) 100%); -webkit-mask-composite:source-in; mask-composite:intersect; clip-path:inset(0 0 0 0 round 999px); transition:opacity 0.28s cubic-bezier(.85,0,.15,1), transform 0.5s cubic-bezier(.85,0,.15,1), clip-path 0.5s cubic-bezier(.85,0,.15,1); } #nav-edge.on{ opacity:0.1; } #nav-edge.off{ opacity:0; transform:translateY(-10px); clip-path:inset(0 0 100% 0 round 999px); } #nav-content{ position:fixed; top:14px; left:34px; right:34px; height:92px; z-index:102; display:flex; align-items:center; justify-content:space-between; padding:0 22px 0 34px; transition:opacity .5s cubic-bezier(.85,0,.15,1), transform .5s cubic-bezier(.85,0,.15,1); } #nav-content.is-hidden{ opacity:0; transform:translateY(-10px); pointer-events:none; } #nav-content > *{ position:relative; } #b-nav > .nav-rim{ position:absolute; z-index:1; } #b-nav.is-hidden{ opacity:0; transform:translateY(-10px); clip-path:inset(0 0 100% 0 round 999px); pointer-events:none; } #nav-content.is-light .nav-logo-w{ opacity:0 !important; } #nav-content.is-light .nav-logo-b{ opacity:1 !important; } #nav-content.is-light .nav-link{ color:#0022CC !important; } #nav-content.is-light .nav-cta{ background:#0022CC !important; color:#fff !important; } #nav-content.is-light .cta-drop{ fill:#fff; } #nav-content.is-light .cta-arrow{ fill:#0022CC; } #nav-content .nav-link:hover{ color:#FF9A02 !important; } #nav-content.is-light .nav-link:hover{ color:#FF5A00 !important; } #nav-content .nav-cta:hover{ background:#FF9A02; color:#fff; } #nav-content.is-light .nav-cta:hover{ background:#001aa3 !important; color:#fff !important; } /* --------------------------------------------------------------------------- Mobile navigation Below 900px the inline links collapse behind a toggle button. The panel markup lives in app/views/partials/nav.php and is opened by site.js adding .is-open to #nav-mobile. --------------------------------------------------------------------------- */ .nav-toggle { display: none; } @media (max-width: 900px) { #b-nav, #nav-refract, #nav-edge, #nav-content { margin-left: 12px; margin-right: 12px; } #nav-refract, #nav-edge, #nav-content { left: 12px; right: 12px; } #nav-content { padding: 0 14px 0 18px; } #nav-content .nav-links { display: none; } #nav-content .nav-cta { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r-pill); border: 1.5px solid var(--c-on-dark-35); background: transparent; color: var(--c-white); cursor: pointer; } #nav-content.is-light .nav-toggle { border-color: var(--c-blue-link); color: var(--c-blue-link); } .nav-logo-w, .nav-logo-b { width: 168px !important; } } #nav-mobile { position: fixed; inset: 0; z-index: 200; background: var(--c-navy); display: none; flex-direction: column; padding: 28px var(--sp-gutter); overflow-y: auto; } #nav-mobile.is-open { display: flex; } #nav-mobile a { color: var(--c-white); font-size: 28px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); padding: 14px 0; border-bottom: 1px solid var(--c-on-dark-12); } #nav-mobile a:hover { color: var(--c-orange-light); } #nav-mobile .nav-mobile-close { align-self: flex-end; background: transparent; border: 0; color: var(--c-white); font-size: 34px; line-height: 1; cursor: pointer; padding: 4px 8px; margin-bottom: 18px; } body.nav-locked { overflow: hidden; }