/* ========================================================================== Moonstruck nav menu Slater CSS file: nav-menu-new-styling.css (load site-wide) Extends the existing Osmo centered nav (.navigation / .centered-nav). Adds row hairlines, a hover line draw, a pixel arrow, and two CTA buttons with a character roll. Safe by design: - Never sets `transform` on [data-navigation-item] elements, so the Osmo open and close stagger is untouched. - Hooks on .centered-nav__li > a (clean class name) instead of the renamed "hamburger-nav__a 2" / "hamburger-nav__p 2" classes. - No GSAP, no scroll lock, no html/body overflow changes. - Everything stays inside .navigation (z-index 500). ========================================================================== */ .navigation { --mnav-ease: cubic-bezier(0.16, 1, 0.3, 1); --mnav-pad-x: 1.25em; /* lines up row text with the logo */ --mnav-row-pad-y: 1em; --mnav-arrow-w: 21px; /* 7 x 5 grid of 3px pixels */ --mnav-arrow-h: 15px; /* CTA buttons: normal state */ --mnav-btn-bg: #FAFAFA; --mnav-btn-text: #282828; /* CTA buttons: hover state */ --mnav-btn-bg-hover: #282828; --mnav-btn-text-hover: #FAFAFA; /* Keyboard focus ring */ --mnav-focus: #3D3D3D; } /* 1. Rows sit flush. CTA sits directly under the last line. ------------- */ .centered-nav .centered-nav__inner { row-gap: 0; } /* 2. Rows ---------------------------------------------------------------- */ .centered-nav__li>a { --mnav-line: rgba(245, 242, 237, 0.12); /* Line token, fallback */ position: relative; justify-content: flex-start; padding: var(--mnav-row-pad-y) calc(var(--mnav-pad-x) + var(--mnav-arrow-w) + 1em) var(--mnav-row-pad-y) var(--mnav-pad-x); border-bottom: 1px solid var(--mnav-line); } @supports (color: color-mix(in srgb, red 50%, transparent)) { .centered-nav__li>a { /* follows the text colour, so it works on light or dark glass */ --mnav-line: color-mix(in srgb, currentColor 14%, transparent); } } .centered-nav__li:first-child>a { border-top: 1px solid var(--mnav-line); } /* Neutralise the Webflow hover state on "hamburger-nav__a 2" (it sets border-bottom-color to 50% black) */ .centered-nav__li>a:hover, .centered-nav__li>a:focus-visible { border-bottom-color: var(--mnav-line); } .centered-nav__li>a>p { font-size: min(1.875em, 7vw); /* "Intelligent systems" fits down to 320px */ transition: opacity 180ms var(--mnav-ease); } /* Hover line: draws in from the left, exits to the right */ .centered-nav__li>a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform 600ms var(--mnav-ease); pointer-events: none; } /* Pixel arrow: revealed one pixel column at a time */ .centered-nav__li>a::before { content: ""; position: absolute; top: 50%; right: var(--mnav-pad-x); width: var(--mnav-arrow-w); height: var(--mnav-arrow-h); margin-top: calc(var(--mnav-arrow-h) / -2); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 5' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v1H4zM5 1h1v1H5zM0 2h7v1H0zM5 3h1v1H5zM4 4h1v1H4z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 5' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v1H4zM5 1h1v1H5zM0 2h7v1H0zM5 3h1v1H5zM4 4h1v1H4z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; clip-path: inset(0 100% 0 0); transition: clip-path 280ms steps(7, end); pointer-events: none; } /* Mouse and trackpad only, so hover never sticks on iOS */ @media (hover: hover) and (pointer: fine) { .centered-nav__ul:hover .centered-nav__li>a:not(:hover)>p { opacity: 0.45; } .centered-nav__li>a:hover::after { transform: scaleX(1); transform-origin: left center; } .centered-nav__li>a:hover::before { clip-path: inset(0 0 0 0); } } /* Keyboard */ .centered-nav__li>a:focus-visible { outline: 1px solid var(--mnav-focus); outline-offset: -1px; } .centered-nav__li>a:focus-visible::after { transform: scaleX(1); transform-origin: left center; } .centered-nav__li>a:focus-visible::before { clip-path: inset(0 0 0 0); } /* Current page (Webflow adds .w--current automatically) */ .centered-nav__li>a.w--current::after { transform: scaleX(1); } .centered-nav__li>a.w--current::before { clip-path: inset(0 0 0 0); } /* Touch: brief line on tap */ @media (hover: none) { .centered-nav__li>a:active::after { transform: scaleX(1); transform-origin: left center; transition-duration: 180ms; } } /* 3. CTA buttons ---------------------------------------------------------- */ /* Prefixed with .navigation so these beat any colour set on the mnav-btn class in the Webflow Designer */ .navigation .mnav-cta { display: flex; flex-wrap: wrap; /* side by side where they fit, stacked where they don't */ gap: 0.375em; width: 100%; padding: 0.75em; box-sizing: border-box; } .navigation .mnav-btn { flex: 1 1 9em; display: flex; align-items: center; justify-content: center; min-height: 3.25em; padding: 0 0.75em; border-radius: 0.375em; background-color: var(--mnav-btn-bg); color: var(--mnav-btn-text); text-decoration: none; transition: background-color 180ms var(--mnav-ease), color 180ms var(--mnav-ease); } /* Label always follows the button colour, including the text-eyebrow element inside the button */ .navigation .mnav-btn .mnav-btn__label, .navigation .mnav-btn .text-eyebrow { color: inherit; } .navigation .mnav-btn .mnav-btn__label { display: inline-flex; height: 1.2em; overflow: hidden; line-height: 1.2; text-transform: uppercase; white-space: nowrap; } /* Each character carries its own copy 1.2em below (text-shadow), so the roll needs no duplicated markup */ .mnav-char { display: inline-block; text-shadow: 0 1.2em 0 currentColor; transition: translate 600ms var(--mnav-ease); transition-delay: calc(var(--i, 0) * 12ms); } @media (hover: hover) and (pointer: fine) { .navigation .mnav-btn:hover { background-color: var(--mnav-btn-bg-hover); color: var(--mnav-btn-text-hover); } .navigation .mnav-btn:hover .mnav-char { translate: 0 -1.2em; } } .navigation .mnav-btn:focus-visible { outline: 2px solid var(--mnav-focus); outline-offset: 2px; } .navigation .mnav-btn:focus-visible .mnav-char { translate: 0 -1.2em; } @media (hover: none) { .navigation .mnav-btn:active { background-color: var(--mnav-btn-bg-hover); color: var(--mnav-btn-text-hover); } } /* 4. Breakpoints ----------------------------------------------------------- */ /* Phones portrait */ @media (max-width: 479px) { .navigation { --mnav-pad-x: 1em; } .navigation .mnav-cta { padding: 0.5em; } .navigation .mnav-btn { padding: 0 0.5em; } } /* Phones landscape: compact so the whole menu fits without scrolling */ @media (max-height: 540px) and (orientation: landscape) { .navigation { --mnav-row-pad-y: 0.5em; } .centered-nav__li>a>p { font-size: 1.375em; } .navigation .mnav-cta { flex-wrap: nowrap; padding: 0.5em; } .navigation .mnav-btn { min-height: 2.75em; } } /* 5. Reduced motion: everything becomes a 200ms opacity fade --------------- */ @media (prefers-reduced-motion: reduce) { .centered-nav__li>a::after { transform: scaleX(1); opacity: 0; transition: opacity 200ms linear; } .centered-nav__li>a::before { clip-path: none; opacity: 0; transition: opacity 200ms linear; } .centered-nav__li>a:hover::after, .centered-nav__li>a:hover::before, .centered-nav__li>a:focus-visible::after, .centered-nav__li>a:focus-visible::before, .centered-nav__li>a.w--current::after, .centered-nav__li>a.w--current::before { opacity: 1; } .navigation .mnav-btn { transition: background-color 200ms linear, color 200ms linear; } .mnav-char { transition: none; } .navigation .mnav-btn:hover .mnav-char, .navigation .mnav-btn:focus-visible .mnav-char { translate: none; } }