/* Aspect Ecology — Mobile Menu component styles */ .aspect-mm-root *, .aspect-mm-root *::before, .aspect-mm-root *::after { box-sizing: border-box; } /* Treat the wrapper as transparent for layout so the sticky bar's containing-block becomes (full document height), not the wrapper itself (which would be only 60px tall and trap sticky inside). */ .aspect-mm-root { display: contents; } /* ----- Top bar ------------------------------------------------------- */ .aspect-mm-bar { position: -webkit-sticky; position: sticky; top: 0; left: 0; right: 0; z-index: 9000; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; background: #fff; border-bottom: 1px solid var(--ae-hairline, rgba(31, 42, 36, 0.10)); transition: background 220ms ease, border-bottom-color 220ms ease; font-family: var(--ae-font-display, 'Space Grotesk', sans-serif); } .aspect-mm-root.is-open .aspect-mm-bar { background: transparent; border-bottom-color: transparent; } /* Scroll state — bar inverts to charcoal with light logo + light hamburger. JS toggles .is-scrolled on the bar at the same threshold as the desktop nav. */ .aspect-mm-bar.is-scrolled { background: var(--ae-charcoal, #1F2A24); border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 4px 18px rgba(31,42,36,.25); } .aspect-mm-bar.is-scrolled .aspect-mm-bars span { background: #fff; } .aspect-mm-bar.is-scrolled [data-aspect-mm-logo-light] { opacity: 0; } .aspect-mm-bar.is-scrolled [data-aspect-mm-logo-dark] { opacity: 1; } .aspect-mm-logo-link { display: block; line-height: 0; border-bottom: none; } .aspect-mm-logo-link:hover { border-bottom: none; } .aspect-mm-logo { height: 36px; width: auto; display: block; transition: opacity 220ms ease; } .aspect-mm-logo-dark { position: absolute; top: 12px; left: 22px; opacity: 0; pointer-events: none; } .aspect-mm-root.is-open [data-aspect-mm-logo-light] { opacity: 0; } .aspect-mm-root.is-open [data-aspect-mm-logo-dark] { opacity: 1; } /* ----- Hamburger button --------------------------------------------- */ .aspect-mm-ham { width: 40px; height: 40px; border: 0; background: transparent; padding: 0; margin: 0; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; z-index: 10000; } .aspect-mm-ham:focus-visible { outline: 2px solid var(--ae-sky, #7BB6D9); outline-offset: 2px; } .aspect-mm-bars { width: 22px; height: 14px; position: relative; display: block; } .aspect-mm-bars span { position: absolute; left: 0; right: 0; height: 2px; background: var(--ae-charcoal, #1F2A24); border-radius: 2px; transition: transform 320ms cubic-bezier(.7,0,.2,1), opacity 220ms ease, background 220ms ease; transform-origin: 50% 50%; } .aspect-mm-bars span:nth-child(1) { top: 0; } .aspect-mm-bars span:nth-child(2) { top: 6px; } .aspect-mm-bars span:nth-child(3) { top: 12px; } .aspect-mm-root.is-open .aspect-mm-bars span { background: #fff; } .aspect-mm-root.is-open .aspect-mm-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .aspect-mm-root.is-open .aspect-mm-bars span:nth-child(2) { opacity: 0; } .aspect-mm-root.is-open .aspect-mm-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ----- Bar actions (CTA pill + hamburger, always visible) ----------- */ .aspect-mm-bar-actions { display: flex; align-items: center; gap: 10px; } .aspect-mm-bar-cta { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 2px; background: var(--ae-green-primary, #57A108); color: #fff; font-family: var(--ae-font-display, 'Space Grotesk', sans-serif); font-weight: 600; font-size: 11px; letter-spacing: 0.04em; text-transform: none; text-decoration: none; line-height: 1; transition: background 180ms ease, opacity 220ms ease; border-bottom: none; border: 1.5px solid var(--ae-green-primary, #57A108); } .aspect-mm-bar-cta:hover, .aspect-mm-bar-cta:focus-visible { background: var(--ae-green-primary-d, #3F7806); border-color: var(--ae-green-primary-d, #3F7806); outline: none; border-bottom: none; color: #fff; } /* Hide the bar CTA when the overlay is open — the in-overlay CTA takes over */ .aspect-mm-root.is-open .aspect-mm-bar-cta { opacity: 0; pointer-events: none; } /* ----- Overlay ------------------------------------------------------- */ .aspect-mm-overlay { position: fixed; inset: 0; z-index: 8999; background: var(--ae-charcoal, #1F2A24); opacity: 0; pointer-events: none; transition: opacity 240ms ease; font-family: var(--ae-font-display, 'Space Grotesk', sans-serif); overflow: hidden auto; } /* Subtle green + sky radial wash */ .aspect-mm-overlay::before { content: ''; position: absolute; top: -260px; right: -260px; width: 720px; height: 720px; background: radial-gradient(circle, rgba(87,161,8,.32), rgba(87,161,8,.06) 40%, transparent 65%); pointer-events: none; z-index: 0; } .aspect-mm-overlay::after { content: ''; position: absolute; bottom: -260px; left: -260px; width: 720px; height: 720px; background: radial-gradient(circle, rgba(123,182,217,.20), rgba(123,182,217,.04) 42%, transparent 65%); pointer-events: none; z-index: 0; } .aspect-mm-root.is-open .aspect-mm-overlay { opacity: 1; pointer-events: auto; } .aspect-mm-content { position: relative; z-index: 1; /* above the radial wash */ padding: 108px 22px 26px; display: flex; flex-direction: column; min-height: 100%; } .aspect-mm-eyebrow { font-family: var(--ae-font-display, 'Space Grotesk', sans-serif); font-style: normal; font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ae-green-secondary, #92D050); margin: 0 0 28px; display: flex; align-items: center; gap: 12px; } .aspect-mm-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--ae-green-secondary, #92D050); display: inline-block; } .aspect-mm-items { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(255,255,255,0.10); } .aspect-mm-item { display: flex; align-items: center; justify-content: space-between; padding: 22px 4px; border-bottom: 1px solid rgba(255,255,255,0.10); color: #fff; font-weight: 500; font-size: 24px; letter-spacing: -0.015em; text-decoration: none; transition: color 160ms ease, padding 160ms ease; font-family: var(--ae-font-display, 'Space Grotesk', sans-serif); } .aspect-mm-item .aspect-mm-arrow { opacity: 0.4; font-weight: 400; font-size: 18px; transition: opacity 160ms ease, transform 160ms ease; } .aspect-mm-item.is-active { color: var(--ae-green-secondary, #92D050); } .aspect-mm-item.is-active .aspect-mm-arrow { opacity: 1; color: var(--ae-green-secondary, #92D050); } .aspect-mm-item:hover, .aspect-mm-item:focus-visible { color: var(--ae-green-secondary, #92D050); outline: none; padding-left: 8px; } .aspect-mm-item:hover .aspect-mm-arrow, .aspect-mm-item:focus-visible .aspect-mm-arrow { opacity: 1; transform: translateX(4px); color: var(--ae-green-secondary, #92D050); } .aspect-mm-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; padding: 16px 22px; border-radius: 2px; background: var(--ae-green-primary, #57A108); color: #fff; border: 1.5px solid var(--ae-green-primary, #57A108); text-decoration: none; font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; font-family: var(--ae-font-display, 'Space Grotesk', sans-serif); } .aspect-mm-cta:hover, .aspect-mm-cta:focus-visible { background: transparent; color: var(--ae-green-secondary, #92D050); border-color: var(--ae-green-secondary, #92D050); outline: none; } .aspect-mm-foot { margin-top: auto; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-top: 1px solid rgba(255,255,255,0.10); font-family: var(--ae-font-mono, ui-monospace, monospace); font-size: 11.5px; color: rgba(255,255,255,0.55); letter-spacing: 0.03em; font-weight: 400; } .aspect-mm-foot a { color: rgba(255,255,255,0.55); text-decoration: none; border-bottom: none; } .aspect-mm-foot a:hover { color: #fff; border-bottom: none; } /* ----- Stagger entry ------------------------------------------------- */ .aspect-mm-stagger > * { opacity: 0; transform: translateY(8px); transition: opacity 380ms ease, transform 380ms cubic-bezier(.2,.7,.2,1); } .aspect-mm-root.is-open .aspect-mm-stagger > * { opacity: 1; transform: none; } .aspect-mm-root.is-open .aspect-mm-stagger > *:nth-child(1) { transition-delay: 80ms; } .aspect-mm-root.is-open .aspect-mm-stagger > *:nth-child(2) { transition-delay: 120ms; } .aspect-mm-root.is-open .aspect-mm-stagger > *:nth-child(3) { transition-delay: 160ms; } .aspect-mm-root.is-open .aspect-mm-stagger > *:nth-child(4) { transition-delay: 200ms; } .aspect-mm-root.is-open .aspect-mm-stagger > *:nth-child(5) { transition-delay: 240ms; } .aspect-mm-root.is-open .aspect-mm-stagger > *:nth-child(6) { transition-delay: 280ms; } .aspect-mm-root.is-open .aspect-mm-stagger > *:nth-child(7) { transition-delay: 320ms; } .aspect-mm-root.is-open .aspect-mm-stagger > *:nth-child(8) { transition-delay: 360ms; } /* ----- Body scroll lock --------------------------------------------- */ body.aspect-mm-locked { overflow: hidden; } /* ----- Reduced motion ----------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .aspect-mm-overlay { transition-duration: 180ms; } .aspect-mm-stagger > * { transition: opacity 180ms ease; transform: none !important; } .aspect-mm-root.is-open .aspect-mm-stagger > * { transition-delay: 0 !important; } .aspect-mm-bars span { transition-duration: 160ms; } } /* ----- Hide on desktop ---------------------------------------------- */ /* Mobile menu only shows up to 900px. Above that, the desktop nav handles it. */ @media (min-width: 901px) { .aspect-mm-root { display: none; } }